📋 모던 자바스크립트 Deep Dive | 22장 this

모던 자바스크립트 Deep Dive 도서의 22장을 정리하였습니다.

22.1 this 키워드

동작을 나타내는 메서드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 메서드가 자신이 속한 객체의 프로퍼티를 참조할 수 있어야 한다.

// 예제 22-01
const circle = {
  // 프로퍼티: 객체 고유의 상태 데이터
  radius: 5,
  // 메서드: 상태 데이터를 참조하고 조작하는 동작
  getDiameter() {
    // 이 메서드가 자신이 속한 객체의 프로퍼티나 다른 메서드를 참조하려면 자신이 속한 객체인 circle을 참조할 수 있어야 한다.
  	return 2 * circle.radius;
  }
};

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

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

this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.

// 22-03
const circle = {
  radius: 5,
  getDiameter() {
    // this는 circle을 가리킨다.
  	return 2 * this.radius;
  }
};

// 22-05
console.log(this); //window

function square(number) {
  console.log(this); // window
  return number * number;
}
square(2);

const person = {
  name: 'waterglasses',
  getName() {
    // 메서드 내부의 this: 메서드를 호출한 객체
    console.log(this); // {name: 'waterglasses", getName: f} 
    return this.name;
  }
}
console.log(person.getName()); // waterglasses

'use strict'
function Person(name) {
  this.name = name;
  console.log(this);
}

function Person(name) {
  this.name = name;
  // 생성자 함수 내부의 this: 생성자 함수가 생성할 인스턴스
  console.log(this); // Person {name: "waterglasses"}
}
const me = new Person('waterglasses');

22.2 함수 호출 방식과 this 바인딩

this 바인딩은 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다.

22.2.1 일반 함수 호출

기본적으로 this에는 전역 객체가 바인딩된다.

// 22-07
function foo() {
  console.log("foo's this: ", this); // window
}
foo();

• 일반함수로 호출 => 함수 내부의 this에는 전역 객체가 바인딩된다.(전역, 중첩함수, 메서드 내에서 정의한 중첩 함수, 콜백함수 모두)

// 22-11
var value = 1;

const obj = {
  value: 100,
  foo() {
    const that = this; // this를 that에 할당
    
    setTimeout(function () {
      console.log(that.value);
    }, 100);
    // 혹은
    setTimeout(() => console.log(this.valueu), 100); // 100
  }
};

obj.foo();

22.2.2 메서드 호출

메서드 내부의 this에는 메서드를 호출한 객체, 즉 메서드를 호출할 때 메서드 이름 앞에 마침표(.) 연산자 앞에 기술한 객체가 바인딩된다.

// 22-16
function Person(name) {
  this.name = name;
}

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

const me = new Person('Lee');

// me가 호출
console.log(me.getName()); // Lee

22.2.3 생성자 함수 호출

생성자 함수 내부의 this에는 생성자 함수가 생성할 인스턴스에 바인딩된다. new 연산자와 함께 호출하면 생성자 함수로 동작한다.

// 22-18
const circle3 = Circle(15);
console.log(circle3); //undefined
console.log(radius); //15

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

Function.prototype.apply/call 메서드는 this로 사용할 객체와 인수 리스트를 ㅣㅇㄴ수로 전달받아 함수를 호출한다.

// 22-19
function getThisBinding() {
  return this;
}
const thisArgs = { a: 1 };

console.log(getThisBinding()); // window
console.log(getThisBinding.apply(thisArgs)); // {a: 1}window
console.log(getThisBinding.call(thisArgs)); // {a: 1}

console.log(getThisBinding.bind(thisArg)); // getThisBinding
console.log(getThisbinding.bind(thisArg)()); // {a: 1}

• apply와 call메서드는 함수를 호출하면서 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩한다.
• bind는 함수를 호출하지 않지만 첫 번째 인수로 전달한 값으로 this바인딩이 교체된 함수를 새롭게 생성해 반환한다.

// 22-23
const person = {
  name: 'Lee',
  foo(callback) {
    console.log(this); // {name: 'Lee', foo: ƒ}
  	setTimeout(callback, 100);
    // bind로 해결할 수 있음
    setTimeout(callback.bind(this), 100);
  }
}

person.foo(function () {
  console.log(this.name); // window에서는 '', Node.js에서는 undefined
})

Ref

• 이웅모 저, ⌜모던 자바스크립트 Deep Dive⌟, 위키북스