[JS 문법] this 바인딩에 대해서

This Binding 언제할까??
어떤 값이 this에 바인딩 되는거지??

 

 

this 바인딩은 실행 컨텍스트가 생성되는 순간에 된다.

실행 컨텍스트는 함수가 실행되는 순간에 생성이 된다.

 

그래서 함수를 어떤식 (how)으로 호출했냐에 따라 this의 값이 바뀔 수 있다.

(호출하는 방식에 따라 this에 바인딩 되는 값이 달라진다!!)

 

1. 전역 공간

> window : 브라우저에서 

> global : Node.js 환경에서

 

2. 함수 호출시

> window : 브라우저에서

> global : Node.js 환경에서

 

3. 메서드 호출시

- 누가 호출했느냐 => 메소드 명의 '점' 바로 앞에 있는 것이 this가 된다.

** 참고

🙋‍♀️ c 함수의 this가 전역객체가 아니라 obj를 바라보게 하려면 어떻게 해야하지?

 

- 다른 변수를 이용해 this를 할당해놓고 다른 변수를 사용한다.

var a = 10;

let obj = {
  a: 20,
  b: function () {
    var _this = this;
    console.log(this.a);

    function c() {
      console.log(_this); // obj {}
    }

    c();
  },
};

obj.b();

 

- this 바인딩 하지 않는 arrow function 사용 (ES6)

var a = 10;

let obj = {
  a: 20,
  b: function () {
    console.log(this.a);

    const c = () => {
      console.log(this); // obj {}
    }

    c();
  },
};

obj.b();

 

- call / apply method 사용해서 this를 명시적으로 바인딩해줌

var a = 10;

let obj = {
  a: 20,
  b: function () {
    console.log(this.a);

    function c() {
      console.log(this); // obj {}
    }

    c.call(this);
  },
};

obj.b();

- arrow function을 함부로 쓰면 안되는 경우

// CASE 1

var a = 10;

let obj = {
  a: 20,
  b() { // 여기서는 콜론 없이 메서드를 정의합니다.
    console.log(this.a); // 20
  },
};

obj.b(); 

//---------------------------------------

// CASE 2

var a = 10;

let obj = {
  a: 20,
  b: () => {
    console.log(this.a); // 10
  },
};

obj.b();

⚠️ CASE 1번에서는 20이 출력되었는데 CASE 2번에서는 10이 출력되는 이유는?
화살표 함수는 자신을 둘러싸고 있는 상위 환경의 this를 참조한다.

그래서 화살표 함수로 작성시 this는 상위 환경의 this인 전역 객체를 가리키기 때문에 window.a인 10이 출력되는 것이다.

그래서 CASE 2의 경우에는 화살표 함수로 작성하면 안된다.

 

4. callback 호출시

기본적으로 함수내부에서와 동일