22장.

22 this

22.1 this 키워드

19.1절 객체지향 프로그래밍

객체는 상태(프로퍼티) + 동작(메서드)

메소드가 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가르키는 식별자를

참조 할 수 있어야 한다 .

객체 리터럴의 경우 자신이 속한 객체를 2 * own.property;

처럼 참조 할 수 있다.

하지만 prototype을 통해 생성자 함수를 불러와서 사용해야 하는 경우

own.property 와 같은 방식으로는 접근이 불가능하다. 이때

우리는 this. 라는것을 사용하게 된다.

This 는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가르키는 자기 참조 변수

이때 이를 통해서 생성할 인스턴스의 프로퍼티나 메서드를 접근 가능하다.

이때 this는 엔진에 의해서 암묵적으로 생성되고 값을 가르키게 되는데

이 가르키는 것은 동적으로 변화하기 때문에 사용에 주의를 둬야 한다

이때는 this를 고정시키기위해서 this.bind를 호출해서 바인딩하여 사용 할 수 있다.

22.2 함수 호출 방식과 this 바인딩

This 바인딩(this에 바인딩될 값)은 함수 호출 방식에 따라서 동적으로 결정

이때 렉시컬 스코프와 this 바인딩의 시기가 다르다

렉시컬 스코프는 함수 정의가 평가될때,

바인딩은 함수를 호출 할때

호출하는 방식에 의해서도 바인딩이 다르기 때문에

주의 해야할 필요가 있다.

1.  일반 함수 호출.      //.  window 객체를 가르킴.
2.  메서드 호출.          //  객체를 가르킴 
3.  생성자 함수 호출.   //. 함수를 가르킴. 
4.  functon.prototype.apply/call/bind를 이용한 호출 // 인수에의해 결정됨.

22.2.1 일반 함수의 호출

기본적으로 this 는 window 가 바인딩됨.

일반함수로 호출된 모든 this는 window가 바인딩된다 이말은

중첩함수, 콜백함수 또한 동일하게 동작하는것을 확인 할 수 있다.

메서드 내부에 전달된 함수의 this에는 window.value를 참조한다.

var value = 1;

Const obj = {
    value : 100,
    foo() {
        const that = this;
        /\*
        setTimeout(function() {
            console.log(that.value);
        }, 100);
        \*/
        // setTimeout(() => this.value, 100);
    }
};

obj.foo();

22.2.2. 메서드 호출

메서드 내부 this는 메서드 호출시 .연산자앞에 기술한 객체가 바인딩된다.

22.2.3 생성자 함수 호출

생성자 함수 내부에 this는 생성자 함수가 생성할 인스턴스가 바인딩된다.

22.2.4 Function.prototype.apply/call/bind 메서드에 의한 간접호출

this로 사용할 객체와 인수 리스트, (arguments) 를 전달받아 호출한다. 이때

Apply와 call 메서드의 본질은 함수를 호출 하는것, 이때 특정 객체에 바인딩 해주는 역할을

하는게 간접호출의 방식이다.

Bind 메서드를 통해서 중첩함수의 this불일치를 해결 할 수 있다.

Function () {  
    const that = this;

    function (callback) {  
        callback.bind(that);  
        setTimeOut();  
    }  
}

와 같은 방식으로 중첩함수를 처리할수 있다.