모던 자바스크립트 Deep Dive 정리

1. this 키워드

▶ 메서드가 자신이 속한 프로퍼티를 참조하려면, 자신이 속한 객체를 가리키는 식별자를 참조해야 함

▷ 객체 리터럴 방식으로 생성한 객체는 식별자를 통해 참조할 수 있음

 

▶ 하지만 생성자  함수 방식에서는 문제가 있음

▷ 나중에 만들어질 인스턴스의 식별자를 모르기 때문

 

function Circle(radius) {
  // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다.
  ????.radius = radius;
}

Circle.prototype.getDiameter = function () {
  // 이 시점에는 생성자 함수 자신이 생성할 인스턴스를 가리키는 식별자를 알 수 없다.
  return 2 * ????.radius;
};

// 생성자 함수로 인스턴스를 생성하려면 먼저 생성자 함수를 정의해야 한다.
const circle = new Circle(5);

 

▷ 따라서 this 라는 특수한 식별자를 사용

 

▶ this

▷ 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수

▷ 자바나 C++ 같은 클래스 기반 언어에서는 this는 언제나 클래스가 생성하는 인스턴스를 가리킨다

▷ 하지만, 자바스크립트에서는 this는 함수 호출 방식에 따라 this 바인딩이 동적으로 결정된다

 

▷ 객체 리터럴 방식 : this -> 메서드를 호출한 객체 (자신)

▷ 생성자 함수 방식 : this  -> 생성자 함수가 생성할 인스턴스

 

▷ this는 전역에서 선언 가능

2. 함수 호출 방식과 this 바인딩

함수 호출 방식에 따라 this 바인딩이 동적으로 결정된다

2-1. 일반 함수 호출

▶ this 바인딩 : 전역 객체 (window 또는 global)

▷ 객체의 메서드 내에서 일반 함수를 호출해도, this 바인딩은 전역 객체이다

▷ 일반 함수 내부에서는 무조건 this -> 전역 객체

 

▶ 메서드의 중첩함수에서 this를 사용하려면 메서드에서 this를 변수에 할당해주고, 그 변수를 사용하면 된다

▷ 변수 that을 만들고 this를 할당

 

var value = 1;

const obj = {
  value: 100,
  foo() {
    // this 바인딩(obj)을 변수 that에 할당한다.
    const that = this;

    // 콜백 함수 내부에서 this 대신 that을 참조한다.
    setTimeout(function () {
      console.log(that.value); // 100
    }, 100);
  }
};

obj.foo();

 

▶ bind() 함수를 사용하여 명시적 this 바인딩 사용 가능

▶ 화살표 함수로 명시적 this 바인딩도 가능

 

var value = 1;

const obj = {
  value: 100,
  foo() {
    // 화살표 함수 내부의 this는 상위 스코프의 this를 가리킨다.
    setTimeout(() => console.log(this.value), 100); // 100
  }
};

obj.foo();

 

2-2. 메서드 호출

▶ 메서드 내부의 this는 메서드를 소유한 객체가 아니라 메서드를 호출한 객체에 바인딩된다

▷ 메서드를 따로 떼어 다른 객체에 붙일 수도 있기 때문

2-3. 생성자 함수 호출

▶ 생성자 함수 내부의 this 에서는 생성자 함수가 (미래에) 생성할 인스턴스가 바인딩된다

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

▶ apply, bind, call 메서드는 Function.prototype의 메서드이기 때문에 모든 함수가 상속받아 사용할 수 있다

▷ 호출할 함수의 this로 삼을 객체를 인수로 전달하면 된다

▷ 사용법

 

function getThisBinding() {
  return this;
}

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

console.log(getThisBinding()); // window

// getThisBinding 함수를 호출하면서 인수로 전달한 객체를 getThisBinding 함수의 this에 바인딩한다.
console.log(getThisBinding.apply(thisArg)); // {a: 1}
console.log(getThisBinding.call(thisArg)); // {a: 1}

 

▶ apply와 call의 본질적 기능은 함수를 호출하는 것이다 (위의 예시에서 getThisBinding 함수)

▶ apply와 call의 차이점

▷ apply : 2번째 인수로 배열을 전달

▷ call : 2번째 인수로 쉼표로 구분한 리스트 형태로 전달

 

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

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

// getThisBinding 함수를 호출하면서 인수로 전달한 객체를 getThisBinding 함수의 this에 바인딩한다.
// apply 메서드는 호출할 함수의 인수를 배열로 묶어 전달한다.
console.log(getThisBinding.apply(thisArg, [1, 2, 3]));
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// {a: 1}

// call 메서드는 호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달한다.
console.log(getThisBinding.call(thisArg, 1, 2, 3));
// Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
// {a: 1}

 

▶ apply, call 을 쓰는 이유

▷ 예 - arguments 같은 유사 배열 객체에 Array 메서드를 사용하기 위해

 

function convertArgsToArray() {
  console.log(arguments);

  // arguments 객체를 배열로 변환
  // Array.prototype.slice를 인수없이 호출하면 배열의 복사본을 생성한다.
  const arr = Array.prototype.slice.call(arguments);
  // const arr = Array.prototype.slice.apply(arguments);
  console.log(arr);

  return arr;
}

convertArgsToArray(1, 2, 3); // [1, 2, 3]

 

▶ bind 메서드는 apply와 call과 달리 함수를 호출하지 않고 this로 사용할 객체만 전달한다

▷ 함수를 호출하지 않음

▷ 메서드 내의 중첩함수의 this가 전역 객체가 되는 것을 방지하는 역할로 잘 쓰인다

▷ 콜백 함수(일반 함수)에 메서드의 this (호출된 객체)를 직접 전달하여 this 바인딩

 

const person = {
  name: 'Lee',
  foo(callback) {
    // bind 메서드로 callback 함수 내부의 this 바인딩을 전달
    setTimeout(callback.bind(this), 100);
  }
};

person.foo(function () {
  console.log(`Hi! my name is ${this.name}.`); // Hi! my name is Lee.
});

티스토리툴바