This

• 함수와 객체(매서드) 구분이 느슨한 자바스크립트에서 this는 이 둘을 구분하는 유일한 기능을 한다.
• this는 실행 컨텍스트가 생성될 때 함께 결정. 즉, this는 함수를 호출할 때 결정된다.

전역 공간에서 this

• 전역 공간에서 this는 전역 객체를 가리킨다.

var a = 1;

console.log(a); // 1
console.log(window.a); // 1
console.log(this.a); // 1

전역 변수를 선언하면 자바스크립트 엔진은 이를 전역객체의 프로퍼티로도 할당. 즉, 자바스크립트의 모든 변수는 실은 특정 객체의 프로퍼티로서 동작. 특정 객체란 실행 컨텍스트의 LexicalEnvironment. 실행 컨텍스는 변수를 수집해서 LexicalEnvironment의 프로퍼티로 저장

메서드로서 호출할 때 그 메서드 내부에서의 this

• 함수는 그 자체로 독립적인 기능을 수행하고 메서드는 자신을 호출한 대상 객체에 관환 동작을 수행한다.
• this에는 호출한 주체의 정보가 담긴다. 점 표기법의 경우 마지막 점 앞에 명시된 객체가 곧 this

var obj = {
  methodA: function () {
    console.log(this);
  },
  inner: {
    methodB: function () {
      console.log(this);
    },
  },
};

obj.methodA(); // obj
obj.inner.methodB(); // obj.inner

함수로서 호출할 때 그 함수 내부에서의 this

• 함수로 호출하면 this가 지정되지 않는다.
• ES6에서 함수 내부에서 this가 전역객체를 바라보는 문제를 보완하고자 화살표 함수 도입

콜백 함수 호출할 때 그 함수 내부에서의 this

• 콜백 함수도 함수이기 때문에 this는 기본적으로 전역객체를 바라본다. 하지만 제어권을 받은 함수에서 콜백 함수에 별도로 this가 될 대상을 지정한 경우 그 대상을 참조.

생성자 함수 내부에서의 this

• 어떤 함수가 생성자 함수로서 호출된 경우 내부에서의 this는 instance 자신이 됨
• 생성자 함수를 호출(new 명령어와 함께)하면 생성자의 prototype 프로퍼티를 참조하는 __proto__라는 프로퍼티가 있는 객체(instance)를 만든다.

call / apply 메서드로 this 바인딩하기

call

const func = function (a, b, c){
  console.log(this, a, b, c) 
};

func(1, 2, 3, 4) // Window { ... } 1 2 3 
func.call({ x:1 }, 4, 5, 6) // { x: 1}, 4 5 6

apply

const func = function (a, b, c){
  console.log(this, a, b, c) 
};

func(1, 2, 3, 4) // Window { ... } 1 2 3 
func.apply({x:1}, [4, 5, 6]) // { x: 1}, 4 5 6

• call은 첫 번째 인자를 제외한 나머지 모든 인자들을 호출할 함수의 매개변수로 지정
• apply는 두 번째 인자를 배열로 받아 그 배열의 요소들을 호출할 함수의 매개변수로 지정한다.

call / apply 활용

const obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3,
};

Array.prototype.push.call(obj, 'd');
console.log(obj); // { '0': 'a', '1': 'b', '2': 'c', '3': 'd', length: 4 }


const arr = Array.prototype.slice.call(obj)
console.log(arr) // [ 'a', 'b', 'c', 'd' ]

• 객체에 배열 메서드를 사용할 수 없지만 배열 구조와 유사한 유사배열객체에 call을 이용하여 배열 메서드를 쓸 수 있다. (진짜 신기...)

여러 인수를 묶어 하나의 배열로 전달하고 싶을 때 - apply

const numbers =[10, 20 ,30 ,40]
const max = Math.max.apply(null, numbers)
console.log(max) // 40