THIS 에 대한 고찰.

INTRO.

Immersive course 에 들어와선, this의 활용이 늘어난것같다, 분명 Pre-course 에서 들었던 내용인데, 정말 1도 기억 안나는것 보니 공부를 헛 했던것같다. 그런 의미에서 복습과 개념 재정립을 위해 글을 적는다.

DEFINITION

우선 this 의 정의를 살펴보자.

this는 함수 실행시 호출(invocation) 방법에 의해 결정되는 특별한 객체입니다. 함수 실행시 결정되므로, 실행되는 맥락(execution context)에 따라 this는 다르게 결정됩니다.

그렇다, 함수 실행시에 호출 방법에 의해 결정되는 특별한 "객체" 이며, 실행되는 맥락에 따라 다르게 결정된다. 라고 설명이 되어있다. 하지만 비전공자인 나는 이것만보고는 정확한 개념을 알기 힘들다.
32년의 생활이 그랬듯, 여러가지

이제 함수의 5가지 실행 방법을 보자.

1. Global: 정확히 말하면 함수 실행은 아니고, 전역에서 this를 참조할 때를 의미합니다.

   console.log(this)

2. Function 호출

   foo()

3. Method 호출

   obj.foo()

4. new 키워드를 이용한 생성자 호출

   new foo()

5. .call 또는 .apply 호출

   foo.call()
   
   foo.apply()

이렇게 5가지의 방법이 있다.

그럼 어떻게 binding 되는것인지 알아야한다.
여기서 binding 이란,

"Binding something in JavaScript means recording that identifier in a specific Environment Record. Each Environment Record is related to a specific Execution Context - and that binds the identifier (variable or function name) to the this keyword for that execution context."

reference : < https://www.ecma-international.org/ecma-262/5.1/#sec-10.5 >

function f1() {
  return this;
}
// 브라우저
f1() === window; // true 
// Node.js
f1() === global; // true

Web browser 에선 window 객체를, Node.js 에선 global 로 호출된다.

EXAMPLE.

MDN에서의 예시를 가져와봤다.

// 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