this가 가리키는 것

dynamic binding

• 함수가 호출되는 상황은 4가지가 있다.
• 함수 호출 - 함수를 직접 호출한다.
• 메서드 호출 - 객체의 메서드를 호출한다.
• 생성자 호출 - 생성자 함수를 호출한다.
• 간접 호출 - call, apply 등으로 함수를 간접 호출한다.

함수의 호출

• 그 외 콜백 함수의 호출이 있다.
• 콜백 함수는 특정 동작 이후 불려지는 함수이다.
• 보통 다른 함수의 인자로 보내지는 함수를 의미한다.

• 함수는 이렇듯 다양한 상황(환경)에서 호출될 수 있다.
• 함수의 호출 환경에 따라 this는 동적으로 세팅된다.
• 이렇게 this가 환경에 따라 바뀌는 것을 동적 바인딩 (dynamic binding)이라 한다.
• bind, apply, call 등으로 this가 가리키는 것을 조작할 수 있다.

let o = {
	name: "Daniel",
    f1: () {
    console.log("[f1] this : ", this);
    },
    
    f2: function () {
    console.log("[f2] this : ", this);
    },
  };
  
  o.f1(); //global
  o.f2(); //o
  
setTimeout(o.f1, 10); //global
setTimeout(o.f2, 20); //global

• f1은 화살표 함수로 호출 시 this는 함수가 생성된 환경을 가리키도록 고정된다.
• f2는 일반 함수로 this는 함수로 호출된 환경을 가리키며 this는 동적으로 바뀔 수 있다.
• f2는 객체의 메서드로 호출될 때 객체가 this로 할당된다.
• 최상단 스코프의 실행 컨텍스트는 전역이다.
• setTimeout으로 함수의 실행 환경을 바꾼다.

this를 조작하는 경우

let o = {
	name: "Daniel",
    printName: function() {
    console.log("내 이름은 ", this.name)'
    },
    };
 o.printName(); //내 이름은 Daniel
 setTimeout(o.printName, 10); // 내 이름은 undefined
 setTimeout(o.printName.bind(o), 20); //내 이름은 Daniel

• bind, call, apply 등의 함수로 this를 조작한다.
• setTimeout은 함수 호출과는 다른 콜백 호출이다.
• printName 메서드는 bind 함수를 이용해 this 변수가 o를 가리키도록 컨텍스트를 동적 바인딩한다.

화살표 함수와 일반 함수의 this

화살표 함수 vs 일반 함수

• 화살표 함수의 this는 호출된 함수를 둘러싼 실행 컨텍스트를 가리킨다.
• 일반 함수의 this는 새롭게 생성된 실행 컨텍스트를 가리킨다.

const o {
	method() {
    	console.log("context : ", this) //o
        let f1 = function () {
           console.log("[f1] this : ", this)
        }
        let f2 = () =>
           console.log("[f2] this : ", this)
        f1() // global
        f2() // o
      },
    };
 o.method()

• f1()은 실행될 때 새로운 컨텍스트를 생성한다.
• 이때 f1에 바인딩된 컨텍스트가 없으므로 this는 global을 가리킨다.
• f2()는 함수 컨텍스트를 생성하며 this 변수는 부모의 컨텍스트를 가리킨다.
• 따라서 this는 o가 된다.

화살표 함수와 dynamic binding

• 화살표 함수의 this는 정해지면 바꿀 수 없다.
• call, bind, apply를 사용해도 바뀌지 않는다.
• setTimeout 등 this가 바뀌는 상황에서 유용한다.