this & binding

this

• JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작한다.
• 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있다.
• 대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정된다.
• 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있다.
• ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고, ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했다.

const test = {
  prop: 42,
  func: function() {
    return this.prop;
  },
};

console.log(test.func());
// expected output: 42

함수 문맥 단순 호출 예시

// call 또는 apply의 첫 번째 인자로 객체가 전달될 수 있으며 this가 그 객체에 묶임
var obj = {a: 'Custom'};

// 변수를 선언하고 변수에 프로퍼티로 전역 window를 할당
var a = 'Global';

function whatsThis() {
  return this.a;  // 함수 호출 방식에 따라 값이 달라짐
}

whatsThis();          // this는 'Global'. 함수 내에서 설정되지 않았으므로 global/window 객체로 초기값을 설정한다.
whatsThis.call(obj);  // this는 'Custom'. 함수 내에서 obj로 설정한다.
whatsThis.apply(obj); // this는 'Custom'. 함수 내에서 obj로 설정한다.

function add(c, d) {
  return this.a + this.b + c + d;
}

var o = {a: 1, b: 3};

// 첫 번째 인자는 'this'로 사용할 객체이고,
// 이어지는 인자들은 함수 호출에서 인수로 전달된다.
add.call(o, 5, 7); // 16

// 첫 번째 인자는 'this'로 사용할 객체이고,
// 두 번째 인자는 함수 호출에서 인수로 사용될 멤버들이 위치한 배열이다.
add.apply(o, [10, 20]); // 34

bind 메서드

• f.bind(someObject) 를 호출하면 f 와 같은 본문(코드)과 범위를 가졌지만 this 는 원본 함수를 가진 새로운 함수를 생성한다다.
• 새 함수의 this는 호출 방식과 상관없이 영구적으로 bind() 의 첫 번째 매개변수로 고정된다.

function f() {
  return this.a;
}

var g = f.bind({a: 'azerty'});
console.log(g()); // azerty

var h = g.bind({a: 'yoo'}); // bind는 한 번만 동작함!
console.log(h()); // azerty

var o = {a: 37, f: f, g: g, h: h};
console.log(o.a, o.f(), o.g(), o.h()); // 37, 37, azerty, azerty

화살표 함수

• 화살표 함수에서 this는 자신을 감싼 정적 범위이다.
• 전역 코드에서는 전역 객체를 가리킨다.

var globalObject = this;
var foo = (() => this);
console.log(foo() === globalObject); // true