this

함수를 만들 때 함수를 실행하는 객체를 가리키는 this 가 생긴다.

this는 함수를 속성 또는 메소드로 포함하고 있는 객체를 참조한다. this는 함수 자체가 아니다. 함수를 포함하고 있는 객체의 참조이다. (단 new 키워드, call, apply는 예외)

this는 수정만 못할 뿐 변수처럼 동작한다. this는 함수를 호출할 때 자바스크립트가 자동으로 만들어서 삽입하는 객체이다. this의 값은 함수가 호출되는 context에 따라 달라진다. this와 arguments를 제외한 다른 모든 변수는 문법적 영역(lexical scope)을 따른다. (즉 소스코드만 보고 변수의 유효 영역을 알아 낼 수 있다.) 참고

call, apply

call() 과 apply() 를 통해서 this 값을 설정할 수 있다.

1var myObject = {};
2
3var myFunction = function (param1, param2) {
4    this.param1 = param1;
5    this.param2 = param2;
6    console.log(this);
7}
8
9myFunction.call(myObject, 'parameter1', 'parameter2');
10console.log(myObject);

데이터가 개별 변수로 존재한다면 call 이 더 적합하며, 데이터가 이미 배열 형태로 존재한다면 apply 가 낫다.

bind

bind 함수를 통해서도 this 를 지정할 수 있다.

1function sayName(label) {
2    console.log(label + ':' + this.name);
3}
4
5var person1 = {name: 'john'};
6var person2 = {name: 'tom'};
7
8sayName.bind(person1)('person1');
9sayName.bind(person2)('person2');

this와 생성자 함수

사용자 정의 생성자 함수에서 this는 생성자의 인스턴스를 가리킨다. 하지만 이건 new 키워드를 사용했을 때의 이야기이다. new 키워드를 사용하지 않았다면 this는 함수가 호출된 컨텍스트가 될 것이다.

this와 프로토타입

프로토타입 메소드 안의 this는 생성자 인스턴스를 참조한다. this의 속성이 없을 경우 프로토타입 체이닝을 통해 값을 찾는 것은 동일하다.