[JavaScript] This : binding 중심

• this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다.
• this를 통해 자신이 속한 객체, 또는 자신이 생성할 인스턴스의 property나 method를 참조할 수 있다.
• JS의 this는 함수가 호출되는 방식에 따라 this의 바인딩이 동적으로 결정된다.

호출 방식 this 바인딩 예제 해설

일반 함수 호출	global object가 바인딩	전역 객체 window를 가리킨다
메서드 호출	method를 호출한 객체	method를 호출한 객체 obj
생성자 함수 호출	생성자 함수가 생성할 인스턴스	생성자 함수가 생성한 인스턴스
prototype의 apply/call/bind method에 의한 간접 호출	첫 번째 인수로 전달한 객체	인수에 의해 결정

예제

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

// 일반 함수 호출
foo(); //window

//메서드 호출
const obj = {foo};
obj.foo(); //obj

//생성자 함수 호출
new foo(); //foo{}

//prototype의 apply/call/bind method에 의한 간접 호출
const bar = {name : 'bar'};

foo.call(bar); //bar
foo.apply(bar); // bar
foo.bind(bar)(); //bar

apply/call/bind 메서드

• apply & call : 함수를 호출하면서 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩apply : 호출할 함수의 인수를 배열로 묶어 전달
• call : 호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달
• → arguments 객체 같은 유사 배열 객체에 배열 method를 사용하는 경우 사용
• bind : 함수를 호출하지 않으면서 this로 사용할 객체만 전달
  • this 불일치 문제 : method의 this와 method 내부의 중첩 함수 or 콜백 함수의 this가 불일치하는 문제

  const fruit = {
    name : 'pear',
    foo(callback){
  		// 지금 this는 person이다. (method를 호출한 객체)
      setTimeout(callback,100); 
    }
  };
  
  fruit.foo(function(){
    console.log(`Hi, ${this.name}`); //Hi, 
  	//근데 지금 콜백 함수가 일반 함수로 호출돼서, this가 전역 객체가 되버렸다.
  	//콜백 함수가 일반 함수로 호출됐다는 뜻은, fruit.foo(); 를 얘기하는 것 같다.
  	//질문 : 콜백 함수를 콜백 함수로 호출할 수 있는가? 
  	//질문 2 :그렇다면 method를 호출할 때는 전역 this로 바인딩이 왜 되지 않지?
  });
  

  • 이럴 경우 setTimeout 안에 callback.bind(this)를 넣어주면 된다
  콜백 함수가 일반 함수로 호출됐다는 뜻이 무엇인지 잘 모르겠다.