사용자 정의 생성자 함수 내에서 this 키워드

생성자 함수와 this

new 키워드를 사용해 함수를 실행할 때 생성자 함수 내에 코딩된 this의 값은 생성자의 인스턴스를 가리킨다. 

다시 말해, 생성자 함수 내에서 우리는 실제로 객체가 만들어지기 전에도 this를 통해 인스턴스를 참조할 수 있다는 것이다.

이때 this의 기본값이 변경되는 방식은 call(),apply()를 사용한 것과 크게 다르지 않다.

다음 코드에서 Person이라는 사용자 정의 생성자 함수를 만들고, 생성자 내에서 this를 사용하여 만들어질 객체를 참조하게 한다. 

Person의 인스턴스가 만들어질 때 this.name은 새로 생성되는 객체 및 이 객체의 name이라는 속성을 참조한다.

결과적으로 생성자 함수에 전달된 매개변수(name)의 값을 새로 생성되는 객체의 name 속성에 저장한다.

JavaScript

// 사용자 정의 생성자 함수 생성
function Person(name) {
    this.name = name || 'jaehee';
}

// Person 생성자를 사용해 인스턴스를 만든다
var cody = new Person('publisher');

console.log(cody.name); // 'publisher' 가 기록

다시 한번 강조하자면 new 키워드를 사용하여 생성자 함수를 호출하게 되면 이때의 this는 "만들어질 객체"를 참조한다.

만약 위 코드에서 new 키워드를 사용하지 않았다면 this의 값은 Person 함수가 호출된 컨텍스트인 window가 되었을 것이다.

JavaScript

// 사용자 정의 생성자 함수 생성
function Person(name) {
    this.name = name || 'jaehee';
}

// 여기서는 new를 사용하지 않음
var cody = Person('publisher');

console.log(cody); // undefined 가 기록 (일반 함수로써 반환할 값이 없기 때문에 undefined가 출력)
// console.log(cody.name); // Uncaught TypeError: Cannot read property 'name' of undefined 이란 에러 발생

// name 값은 실제로 window.name에 설정되어 있게 된다.
console.log(window.name);

Jaehee's WebClub