[4주차 스터디] 22장- this

this

this의 정의

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

this의 필요성

• 객체는 프로퍼티와 메서드로 이루어져 있다.

  프로퍼티 : 상태(state)를 나타냄
  메서드 : 동작을 나타냄

• 객체는 자신이 속한 객체의 상태를 참조하거나 변경해야 하는 경우가 생김
• 자신의 프로퍼티나 메서드를 참조하려면 우선 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.

  예를 들어 생성자 함수 경우 new키워드로 생성자 함수를 호출해야 instance가 생성된다. 즉, 생성자 함수를 정의하는 시점에 생성될 예정인 instance를 가리키는 식별자가 필요 (= this)

this 바인딩

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

  바인딩이란 식별자와 값을 연결하는 과정을 의미, this 바인딩은 this가 가리킬 객체를 바인딩 하는 것

• 자바스크립트의 this는 함수가 호출되는 방식에 따라 this에 바인딩 될 값이 동적으로 결정 된다.

함수 호출 방식과 this 바인딩

• this에 바인딩될 값은 함수가 어떻게 호출(함수 생성 시점과 구분하기) 되었는지에 따라 동적으로 결정된다.
• 함수 호출 방식은 다양함
  1. 일반 함수 호출
  2. 메서드 호출
  3. 생성자 함수 호출
  4. Function.prototype.apply/call/bind에 의한 간접 호출

일반 함수 호출

• 기본적으로 this에는 전역 객체(global object)가 바인딩 된다.
• 일반 함수로 호출하면 함수 내부의 this 에는 전역 객체가 바인딩된다.
• strict mode 의 일반 함수 내부의 this는 undefined(일반 함수 내부에서 this 사용 필요가 없기 때문)
• (중첩 함수, 콜백함수를 포함한)일반 함수로 호출된 모든 함수 내부의 tihs에는 전역 객체가 바인딩 된다

  중첩함수나 콜백함수의 this를 일치 시켜주기 위해 명시적으로 바인딩 할 수 있는 방법이 제공 된다.

메서드 호출

• 메서드 내부의this는 메서드를 소유한 객체가 아닌 메서드를 호출한 객체에 바인딩된다.
• 메서드는 프로퍼티에 바인딩된 함수다 => 즉 객체에 포함 된 것이 아니라 독립적으로 존재
• 따라서 메서드는 객체에 의해 호출 될 수 있고 일반 변수에 할당 하여 일빈 함수로 호출 될 수도 있다.

const anotherPerson = {
  name: 'Kim'
};
// getName 메서드를 anotherPerson 객체의 메서드로 할당
anotherPerson.getName = person.getName;

// getName 메서드를 호출한 객체는 anotherPerson이다.
console.log(anotherPerson.getName()); // Kim

// getName 메서드를 변수에 할당
const getName = person.getName;

// getName 메서드를 일반 함수로 호출
console.log(getName()); // ''
// 일반 함수로 호출된 getName 함수 내부의 this.name은 브라우저 환경에서 window.name과 같다.
// 브라우저 환경에서 window.name은 브라우저 창의 이름을 나타내는 빌트인 프로퍼티이며 기본값은 ''이다.
// Node.js 환경에서 this.name은 undefined다.

정리 : 메서드 내부의 this는 메서드를 호출한 객체에 바인딩 된다.

생성자 함수 호출

• 생성자 함수 내부의 this는 생성자 함수가 (미래에) 생성한 인스턴스가 바인딩 된다.
• 생성자 함수는 new연산자와 함께 생성자 함수를 호출하지 않으면 생성자 함수가 아니라 일반함수로 동작

// new 연산자와 함께 호출하지 않으면 생성자 함수로 동작하지 않는다. 즉, 일반적인 함수의 호출이다.
const circle3 = Circle(15);

// 일반 함수로 호출된 Circle에는 반환문이 없으므로 암묵적으로 undefined를 반환한다.
console.log(circle3); // undefined

// 일반 함수로 호출된 Circle 내부의 this는 전역 객체를 가리킨다.
console.log(radius); // 15

Function.prototype.apply / call / bind에 의한 간접 호출

• apply, call, bind는 Function.prototype의 메서드로 모든 함수가 상속 받아 사용 가능
• apply와 call의 본질적인 기능은 함수를 호출하는 것, 메서드 호출 시 apply나 call에 특정 객체를 전달하여 호출한 함수의 this에 바인딩함
• bind 메서드는 apply, call과 달리 함수를 호출하지 않는다. 다만 첫 번째 인수로 전달한 값으로 this 바인딩이 교체된 함수를 새롭게 생성해 반환
• bind는 중첩함수 또는 콜백함수의 this가 불일치하는 문제를 해결하기 위해 사용됨

정리

함수 호출 방식	this 바인딩
일반 함수 호출	전역 객체
메서드 호출	메서드를 호출한 객체
생성자 함수 호출	생성자 함수가 (미래에) 생성할 인스턴스
apply 메서드 등에 의한 간접 호출	첫 번째 인수로 전달한 객체