this - hochan222/Everything-in-JavaScript GitHub Wiki

MDN

• JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작한다. 또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있다.
• 실행 컨텍스트(global, function 또는 eval)의 프로퍼티는 비엄격 모드에서 항상 객체를 참조하며, 엄격 모드에서는 어떠한 값이든 될 수 있다.

대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정된다. 실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있다.
ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했다.
ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했다(이는 렉시컬 컨텍스트안의 this값을 유지한다).

놀라운 사실은 MDN의 예제에 42가 있다!!?! 위대하다 42...

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

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

Global Context

• 전역 실행 문맥global execution context에서 this는 엄격 모드 여부에 관계 없이 전역 객체를 참조합니다.

// 웹 브라우저에서는 window 객체가 전역 객체
console.log(this === window); // true

a = 37;
console.log(window.a); // 37

this.b = "MDN";
console.log(window.b)  // "MDN"
console.log(b)         // "MDN"

NOTE: globalThis로 우리는 항상 전역 객체를 얻을 수 있다. globalThis 속성은 환경에 무관하게 전역 this 값, 즉 전역 객체에 접근하는 표준 방법을 제공한다.

Function Context

• 함수 내부에서 this의 값은 함수를 호출한 방법에 의해 좌우됩니다.

다음 예제는 엄격 모드가 아니며 this의 값이 호출에 의해 설정되지 않으므로, 기본값으로 브라우저에서는 window인 전역 객체를 참조한다.

function f1() {
  return this;
}

// 브라우저
f1() === window; // true

// Node.js
f1() === global; // true

반면에 엄격 모드에서 this 값은 실행 문맥에 진입하며 설정되는 값을 유지하므로 다음 예시에서 보여지는 것 처럼 this는 undefined로 남아있다.

function f2(){
  "use strict"; // 엄격 모드 참고
  return this;
}

f2() === undefined; // true

비엄격 모드에서 this로 전달된 값이 객체가 아닌 경우, call과 apply는 이를 객체로 변환하기 위한 시도를 한다.

Object Method

• 함수를 어떤 객체의 메서드로 호출하면 this의 값은 그 객체를 사용합니다.

var o = {
  prop: 37,
  f: function() {
    return this.prop;
  }
};

console.log(o.f()); // 37

---

함수 호출 call, apply, bind의 차이