얌생

this

this는 클래스로 생성한 인스턴스를 의미한다.

전역 환경에서 this는 전역 객체를 가르킨다.

런타임 환경에 따라 node에서 this는 global를 가르키고, browser에서 this는 window를 가르킨다.

함수, 메서드에서의 this

// 함수
// 호출 주체를 명시할 수 없기 때문에 this는 전역 객체를 의미
var func = function (x) {
    console.log(this, x);
};

func(1); // global { ... } 1

// 메서드
// 호출 주체를 명시할 수 있어서 this는 해당 객체를 의미한다.
var obj = {
    method: func
};

obj.method(2); // { method:f } 2

함수를 호출했을 경우 그 함수 내부의 this는 지정되지 않는다. this가 지정되지 않으면, 전역 객체를 가르키기 때문에

함수를 호출하면 함수 내부에서의 this는 전역 객체가 된다.

반면, 메서드를 호출하면 메서드를 호출한 대상이 있기 때문에 이 때의 this는 호출한 객체를 의미한다.

var obj = {
    name: 'jung',
    outer: function () {        
        var innerFunc = function () {
            console.log(this); 
        }

        innerFunc();        
    }
};

obj.outer();

위 코드에서도 비록 객체 안에 innerFunc() 함수가 있지만

innterFunc() 를 호출하면 this는 전역객체가 된다.

화살표 함수

ES6에서 도입된 화살표 함수는 this 바인딩 과정 자체가 없어서 this가 존재하지 않는다.

대신, 화살표 함수는 선언될 시점의 상위 스코프가 this로 바인딩된다.

obj1 = {
    name: 'jung',
    outer: function () {
        const inner = () => {
            console.log(this);
        }

        inner();
    }
};

obj1.outer();

innerFunc를 일반 함수에서 화살표 함수로 바꾼후, 출력하면

this가 전역객체가 아니고 outer: function()으로 바뀐것을 볼 수 있다.

obj2 = {
    name: 'jung',
    outer: () => {
        console.log(this)
    }
}

obj2.outer();

주의할 점은 앞서 언급했던 선언될 시점에서 상위 스코프가 this로 바인딩 된다는 점인데,

위 코드 처럼 function()으로 감싸주지 않으면 this는 전역객체로 대응된다.

콜백 함수

콜백함수에서의 this는 기본적으로 지정되지 않기 때문에 전역객체를 바라본다.

[1, 2, 3, 4, 5].forEach(function (x) {
    console.log(this, x);
});

위 코드를 실행해보면 global 전역객체에 대한 정보가 출력되는것을 확인할 수 있다.