this 키워드

안녕하신가!

오늘은 기술 면접 단골 손님인 this 키워드에 관해 살펴보도록하자.

this 키워드란?

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

this는 자바스크립트 엔진에 의해 암묵적으로 생성되며, 코드 어디에서든 참조가 가능하다. 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 함수 내부에서 arguments 객체를 지역 변수처럼 사용할 수있는 것처럼 this도 지역변수처럼 사용할 수 있다.

this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있기 때문에 strict mode가 적용된 일반 함수 내부의 this에는 undefined가 바인딩된다. 일반 함수 내부에서 this를 사용할 필요가 없기 때문이다. 이러한 이유로 strict mode에서도 this 바인딩에 영향을 준다.

함수 호출 방식과 this 바인딩

렉시컬 스코프와 this 바인딩은 결정시기가 다르다.

함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프는 함수 정의가 평가되어 함수 객체가 생성되는 시점에 상위 스코프를 결정하지만 this 바인딩은 함수 호출 시점에 결정된다.

일반 함수 호출 방식

// 일반 함수 호출 방식
function greet() {
  console.log(this.name);
}

var person = {
  name: 'Jeongyun',
  greet: greet
};

greet(); // this.name은 undefined입니다. (strict mode가 아닐 경우 전역 객체 window의 name을 참조하려 시도하므로)
person.greet(); // this.name은 'Jeongyun'입니다.

• this가 전역 객체 window를 가리킨다.
• 일반 함수로 호출된 모든 함수(중첩 함수, 콜백 함수 포함) 내부의 this에는 전역 객체가 바인딩 된다.
• 콜백 함수에서 this 바인딩을 메서드의 this 바인딩과 일치 시키기 위한 방법으로는 this 바인딩을 변수에 할당하여 사용하거나 Function.prototype.apply/call/bind 메서드를 통해 일치 시키거나 화살표 함수를 통해 this 바인딩을 일치 시킬 수 있다.

메서드 호출 방식

// 메서드 호출 방식
var person = {
  name: 'Jeongyun',
  greet: function() {
    console.log(this.name);
  }
};

person.greet(); // this.name은 'Jeongyun'입니다.

• this가 메서드를 호출한 객체를 가리킨다.
• 객체 내부에 함수는 해당 프로퍼티가 함수 객체를 가리키고 있을 뿐이라 메서드를 호출한 객체에 따라 this에 바인딩된 객체가 달라진다.

생성자 함수 호출 방식

// 생성자 함수 호출 방식
function Person(name) {
  this.name = name;
}

var Jeongyun = new Person('Jeongyun');
console.log(john.name); // 'Jeongyun'이 출력됩니다.

• 생성자 함수가 생성한 인스턴스를 가리킨다.
• new 연산자와 함께 호출하지 않으면 일반 함수로 동작하기 때문에 전역 객체를 가리키게된다.

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

// Function.prototype.apply/call/bind 메서드에 의한 간접 호출 방식
function introduce(greeting) {
  console.log(greeting + ', ' + this.name);
}

var Jeongyun = { name: 'Jeongyun' };

introduce.call(Jeongyun, 'Hello'); // 'Hello, Jeongyun'가 출력됩니다.
introduce.apply(Jeongyun, ['Hi']); // 'Hi, Jeongyun'가 출력됩니다.

var introduceJeongyun = introduce.bind(Jeongyun);
introduceJeongyun('Hola'); // 'Hola, Jeongyun'가 출력됩니다.

• 각 메서드의 인수에 의해 결정된다.
• Function.prototype의 메서드이기 때문에 모든 함수가 상속받아 사용할 수 있다.
• Function.prototype.apply/call 메서드의 본질적인 기능은 함수를 호출하는 것이다. 함수를 호출하면서 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩 한다.
• Function.prototype.bind 메서드는 apply와 call 메서드와 달리 함수를 호출하지 않고 첫 번째 인수로 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성해 반환한다.