[JS]this,바인딩,this결정조건

this란, 자바스크립트에서 자기 참조 변수입니다.

 

객체에서 '자신의' 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수입니다.

 

(저라는 사람은 1명이지만, "아들"이라는 호칭은 공통으로 사용하며, 우리 집에서 아들은 저지만

 

다른 집에서 아들은 다른 사람입니다, 부르는 방법에 따라 "아들"이란 호칭에 붙은 "사람"이 달라지게 됩니다)

 

 

단, this가 가리키는 값은 함수 호출 방식에의해 동적으로 바인딩됩니다.

 

 

바인딩이란 식별자와 값을 연결하는 과정입니다.

 

this 바인딩에는 4가지가 있습니다.

 

1. 함수 호출
2. 메서드 호출
3. 생성자 함수 호출
4. apply/call/bind 호출

(일반) 함수 호출 - strict mode의 경우 undefined

const foo = function () {
  console.dir(this);
};

foo();
// window

 

일반 함수로 호출할 시, 전역 객체로 바인딩됩니다.

 

---

메서드로 호출

// 2. 메소드 호출
const obj = { foo: function() {} };
const.foo(); // obj

메소드로 호출한 경우, 호출한 객체를 가리킵니다 (이름 앞)

---

생성자 함수 호출

const instance = new foo();

미래에 생성할 인스턴스에 바인딩됩니다.

 

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

 

const bar = { name: 'bar' };
foo.call(bar);   // bar
foo.apply(bar);  // bar
foo.bind(bar)(); // bar

apply, call 함수 호출 및 특정 객체를 this에 바인딩

 

apply는 배열로 묶어 전달

call은 리스트로 전달

bind 메서드는 바인드만 하는 것