this를 호출할 때 바인딩되는 값은?

1. this란?

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.

this는 함수가 호출되는 방식에 의해 동적으로 결정된다.

2. 함수 호출 방식

2.1. 일반 함수 호출

• 일반 함수로 호출하면 함수 내부의 this에는 전역 객체가 바인딩
  • 단, 객체를 생성하지 않는 일반 함수의 this는 의미 X
  • 전역 함수, 중첩 함수 포함
  • strict mode가 적용된 일반 함수 내부의 this에는 undefined 바인딩
  • Strict mode MDN 바로가기

function foo() {
  console.log(this);    // window
  function bar() {
    console.log(this);    // window
  }
  bar();
}
foo();

function foo() {
  'use strict';
  
  console.log(this);    // undefined
  function bar() {
    console.log(this);    // undefined
  }
  bar();
}
foo();

• 콜백 함수가 일반 함수로 호출된다면 콜백 함수 내부의 this에도 전역 객체가 바인딩

var value = 1;

const obj = {
  value: 100,
  foo() {
    console.log(this);    // {value: 100, foo: f}
    // 콜백 함수
    setTimeout(function () {
      console.log(this);    // window
      console.log(this.value);    // 1
    }, 100);
  }
};

obj.foo();

-> 콜백 함수의 this에 전역 객체가 아닌 상위 스코프의 this를 가리키도록 하는 방법

• this 바인딩을 변수에 할당

var value = 1;

const obj = {
  value: 100,
  foo() {
    // this 바인딩을 변수 that에 할당
	const that = this;
    
    // this 대신 that 참조
    setTimeout(function () {
      console.log(that.value);    // 100
    }, 100);
  }
};

obj.foo();

• Function.prototype.apply/call/bind 메서드 사용

var value = 1;

const obj = {
  value: 100,
  foo() {
    // 콜백 함수에 this 바인딩
    setTimeout(function () {
      console.log(this.value);    // 100
    }.bind(this), 100);
  }
};

obj.foo();

• 화살표 함수 사용

var value = 1;

const obj = {
  value: 100,
  foo() {
	// 화살표 함수
    setTimeout(() => console.log(this.value), 100);    // 100
  }
};

obj.foo();

2.2. 메서드 호출

• 메서드 내부의 this에는 메서드를 호출한 객체, 즉 메서드를 호출할 때 메서드 이름 앞의 마침표(.) 연산자 앞에 기술한 객체가 바인딩
• 주의 : 메서드 내부의 this는 메서드를 소유한 객체가 아니라 메서드를 호출한 객체에 바인딩

const person = {
  name: 'Lee',
  getName() {
    	return this.name;
  }
};

// getName을 호출한 person 객체에 바인딩
console.log(person.getName());    // Lee

• 프로토타입 메서드 내부에서 사용된 this도 해당 메서드를 호출한 객체에 바인딩

function Person(name) {
  this.name = name;
}

Person.prototype.getName = function () {
  return this.name;
};

const me = new Person('Lee');

// getName 메서드를 호출한 me 객체에 바인딩
console.log(me.getName());    // Lee

Person.prototype.name = 'Kim';

// getName 메서드를 호출한 Person.prototype 객체에 바인딩
console.log(Person.prototype.getName());    // Kim

2.3. 생성자 함수 호출

• 생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스가 바인딩

// 생성자 함수
function Circle(radius) {
  this.radius = radius;
  this.getDiameter = function () {
    return 2 * this.radius;
  };
}

const circle = new Circle(5);

console.log(circle.getDiameter());    // 10

2.4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출

• Function.prototype.apply/call/bind 메서드는 Function.prototype의 메서드이기 때문에 모든 함수가 상속받아 사용 가능

• Function.prototype.apply, Function.prototype.call
  • this로 사용할 객체와 인수 리스트를 인수로 전달받아 함수 호출
  • 본질적인 기능은 함수 호출
  • apply나 call 메서드는 함수를 호출하면서 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩
  • apply는 호출할 함수의 인수를 배열로 묶어 전달
  • call은 호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달

function getThisBinding() {
  console.log(arguments);
  return this;
}

// this로 사용할 객체
const thisArg = { a: 1 }

console.log(getThisBinding.apply(thisArg, [1, 2, 3]));
console.log(getThisBinding.call(thisArg, 1, 2, 3));

• Function.prototype.call
  • 함수 호출 X
  • 첫 번째 인수로 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성해 반환

function getThisBinding() {
  return this;
}

// this로 사용할 객체
const thisArg = { a: 1 };

// 함수를 새롭게 생성해 반환
console.log(getThisBinding.bind(thisArg));    // getThisBinding
// 명시적으로 함수 호출
console.log(getThisBinding.bind(thisArg)());    // {a: 1}

3. 정리

함수 호출 방식	this 바인딩
일반 함수 호출	전역 객체
메서드 호출	메서드를 호출한 객체
생성자 함수 호출	생성자 함수가 생성할 인스턴스
Function.prototype.apply/call/bind 메서드에 의한 간접 호출	Function.prototype.apply/call/bind 메서드에 첫 번째 인수로 전달한 객체

출처 : 모던 자바스크립트 Deep Dive