자바스크립트에서 this는 실행 컨텍스트가 생성될 때 결정됩니다. 실행 컨텍스트가 실행되는 경우는 함수가 호출될 때이므로 this는 함수가 실행될 때 결정된다고 할 수 있습니다.
전역 공간에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서의 전역객체는 this이고 Node.js 환경에서는 global입니다.
let a = this;
let b = window;
console.log(a === b); // true
이 전역 공간에서 전역 변수를 선언할 경우, 자바스크립트 엔진은 전역 객체의 프로퍼티로써 변수를 할당합니다. window 프로퍼티로 직접 변수를 선언하면 그 결과는 전역 변수를 선언하는 경우와 동일할 것이라고 예상할 수 있습니다. 다만, 변수를 삭제하는 경우에는 그 결과가 조금 다릅니다.
var c = 1;
console.log(c, window.c, this.c); // 1 1 1
/*변수 c를 let 또는 const로 선언했을 경우에는 다른 결과가 나온다.*/
window.d = 1;
var e = 2;
console.log(d, window.d, this.d); // 1 1 1
console.log(e, window.e, this.e); // 2 2 2
// 전역 변수로 선언된 변수의 경우, configurable 속성(변경 및 삭제 가능성)이 false로 할당된다.
console.log(delete window.d); // true
console.log(delete window.e); // false
자바스크립트에서 함수는 그 자체로 독립적인 기능을 수행하는 반면, 메서드는 자신을 호출한 대상 객체에 관한 동작을 수행합니다.
2-1 함수로서 호출할 때
es6에서는 arrow function(화살표 함수)이 도입
되었습니다. 실행 컨텍스트가 실행될 때, 화살표 함수는 this를 binding 하는 과정을 skip하고 상위 스코프의 this를 그대로 사용할 수 있습니다.
(호출 당시의 상황은 상관없습니다.) 2-2 메서드로서 호출할 때
2-3 생성자 함수 내부에서 호출할 때