모던 자바스크립트 Deep Dive

22장 this

- 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적인 자료구조이다.

- this는 자신이 속한 객체 또는 자신이 '생성할' 인스턴스를 가리키는 자기 참조 변수이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. 함수를 호출하면 argument 객체와 this가 암묵적으로 함수 내부에 전달된다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

- this 바인딩은 함수 호출 시점에 결정된다.

- 일반 함수 호출에서는 기본적으로 this에 전역 객체가 바인딩된다.

- 콜백 함수가 일반 함수로 호출된다면 콜백 함수 내부의 this에도 전역 객체가 바인딩된다.(어떤 함수라도 일반 함수로 호출되면 this에 전역 객체가 바인딩 된다.

 

메서드 내부의 중첩 함수나 콜백 함수의 this 바인딩을 메서드의 this 바인딩과 일치시키기 위한 방법. 

var value = 1;

const obj = {
	value:100,
    foo() {
    	// this 바인딩(obj)을 변수 that에 할당한다
        const that = this;
        
        // 콜백 함수 내부에서 this 대신 that 을 참조한다.
        setTimeout(function () {
        	console.log(that.value); //100
           }, 100);
          }
        };
        
 obj.foo();

 

const person = { 
	name: 'Lee',
    getName(){
    	// 메서드 내부의 this는 메서드를 호출한 객체에 바인딩 된다.
        return this.name;
    }
};

//메서드 getName을 호출한 객체는 person 이다.
console.log(person.getName());

person 객체의 getName 프로퍼티가 가리키는 함수 객체는 person 객체에 포함된 것이 아니라 독립적으로 존재하는 별도의 객체이다. getName 프로퍼티가 함수 객체를 가리키고 있을 뿐이다.