[JS] this

this

대부분의 객체지향 프로그래밍 언어(자바, C#, C++ 등)는 인스턴스가 만들어지는 시점에 정적으로 this가 결정된다. 그러나 자바스크립트에서는 누가 호출하느냐(caller)에 따라 this가 달라진다.

즉, 함수의 실행 시점에 결정되는 값으로 이전에 함수가 어떻게 선언되거나 할당되었는지는 this 값에 영향을 미치지 않는다.

함수 실행 방식에 따른 this

함수가 실행되는 방식은 크게 아래의 네 가지로 나뉜다.

• 일반적인 함수 실행
• Dot Notation
• 생성자 함수 실행(new Keyword)
• Call, Apply, Bind를 이용한 정적 바인딩

1. 일반적인 함수 실행

• this: 전역 (global. 브라우저에서는 window)
• 단, strict mode에서 this는 undefined이다. 함수 내부에 해당 변수의 정보가 없기 때문이다.

2. Dot Notation

• this: Dot 앞 함수를 실행한 주체

3. 생성자 함수 또는 클래스 내부에서

• this : 앞으로 만들어질 인스턴스 그 자체

function Person(name) {
  this.name = name;
  this.printName = function () {
    console.log(this.name);
  };
}

const p1 = new Person('김땡땡');
p1.printName();

4. 정적 바인딩

1) Call
아래는 MDN Function.prototype.call() 문서에 나온 예시를 조금 변형한 것이다.

// name, price 두 가지 정보를 받는 생성자 함수
function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  // Product를 호출하며 this를 new Food()를 통해 생성되는 인스턴스로 지정 =>
  // Product 함수 내부 코드가 실행되며 new Food()로 만들어지는 인스턴스에 name, price 속성값이 생성된다.
  Product.call(this, name, price);
  this.category = 'food';
}

const result = new Food('cheese', 5);

console.log(result);
// Expected output: {name: 'cheese', price: 5, category: 'food'}

• 첫 번째 인자는 this 값, 두 번째 인자부터 함수의 인자로 전달된다.

2) Apply

• call() 과 거의 동일하나 두 개의 인자만 받는다. 첫 번째 인자는 this 값, 두 번째 인자는 배열이다.
• 배열의 요소는 모두 함수의 인자로 전달된다.

3) Bind

• call(), Apply() 와 달리 bind() 메소드를 호출한 함수를 실행하지 않고 새로운 함수를 반환한다. 즉, 새로운 함수를 반환하는 bind의 실행만 이루어진다.
• 첫 번째 인자는 this 값, 두 번째 인자부터 함수의 인자로 전달된다.

화살표 함수

화살표 함수는 렉시컬 환경에서의 this를 기억한다.
다시 말하면, 화살표 함수 밖에서 제일 근접한 스코프의 this를 가리킨다.

• 특징
  1. 생성자 함수로 사용할 수 없다. 따라서 무거운 프로토타입을 만들지 않는다.
  2. 함수 자체의 arguments를 만들지 않는다.
  3. this 바인딩이 함수 선언 시점에 정적으로 결정된다.