본문 바로가기

Language/Javascript

[Javascript] 생성자 함수

728x90
반응형

개발을 하다보면 비슷한 객체를 여러 개 만들어야 하는 상황이 생긴다.

그럴 때 쓸 수 있는 것이 생성자 함수이다.

 

생성자 함수는 첫 글자를 대문자로 해서 함수로 만들어준다.

new 연산자를 사용해서 함수를 호출한다.

function User(name, age){
    this.name = name;
    this.age = age;
}

let user1 = new User('Mike', 30);
let user2 = new User('Jane', 22);
let user3 = new User('Tom', 17);

비슷한 객체 3개를 만들었다. 생성자 함수는 와플 틀이라면 생성되는 객체들은 와플이라고 생각하면 된다.

 

동작하는 방식은

function User(name, age){
    //this = {};
    
    this.name = name;
    this.age = age;
    
    //return this;
}

new 함수명();

빈 객체를 만들고, this에 할당한다. this에 프로퍼티들을 추가하고, this를 반환한다.

 

function User(name, age){
    this.name = name;
    this.age = age;
    this.sayName = function(){
        console.log(this.name);
    }
}

let user5 = new User('Han', 40);
user5.sayName();   // 'Han'

this.name의 this는 user5이다.

728x90
반응형