this, binding

코딩을 공부한지 얼마 안된 시점에 this가 js 에서 가장 헷갈리는 개념들 중 하나라고 들었던 것 같다. 아직 배우진 않았지만 검색을 통해 간접적으로나마 공부하고 포스팅을 해보고자 한다.

this

• this: 현재 실행되고 있는 코드의 실행 컨텍스트를 가리킨다.

this binding

this binding은 this에 실행 컨텍스트의 주체를 연결 짓는 것, 즉 this가 무엇을 가리킬지 연결하는 것

this binding은 실행 컨텍스트가 활성화 될 때 한다.

실행 컨텍스트는 이 컨텍스트를 지닌 함수가 호출될 때 활성화 된다.

this binding 5가지 케이스

• 전역공간에서 : window / global
• 함수 호출시 : windonw / global
• 메소드 호출시 : 메소드 호출 주체 (메소드명 앞)
• callback 호출시 : 기본적으로 함수 호출시와 동일
• 생성자 함수 호출시 : 인스턴스

1. 전역공간에서 : window / global

console.log(this);

2. 함수 호출시 : windonw / global

function a() {
  console.log(this);
}
a(); // window.a()
// 함수 a를 호출한 주체가 전역공간이기 때문에 this는 window가 된다.

function b() {
  function c() {
    console.log(this);
  }
  c();
}
b(); // window.b()
var d = {
  e: function () {
    function f() {
      console.log(this); // this는 window
    }
    f(); // 이걸보면 this는 window라는것을 알수 있다. window.f()
  },
};
d.e(); 
// 메소드를 호출한것 처럼보여도 내부적으로는 함수호출하는 방식이기때문에 this는 window 

3. 메소드 호출시 : 메소드 호출 주체 (메소드명 앞)

var a = {
  b: function () {
    console.log(this);
  },
};
a.b(); // this는 a

var a = {
  b: {
    c: function () {
      console.log(this);
    },
  },
};
a.b.c(); // this는 a.b

4.callback 호출시 : 기본적으로 함수 호출시와 동일

var callback = function () {
  console.log(this); // this는 obj
};
var obj = {
  a: 1,
  b: function (cb) {
    cb.call(this); // this는 obj, cb()함수의 this를 obj로 지정해서 호출
  },
};
obj.b(callback);

5. 생성자 함수 호출시 : 인스턴스

function Person(n, a) {
  this.name = n;
  this.age = a;
}
var gomugom = new Person('고무곰', 30);
console.log(gomugome);