[모딥다] JS (12) - this

1. this 키워드

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

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

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

* this 바인딩 : 바인딩이란 식별자와 값을 연결하는 과정을 의미, 예를 들어 변수 선언은 변수 이름(식별자)과 확보된 메모리 공간의 주소를 바인딩 하는 것.

 

2. this 예시 

// 생성자 함수
function Circle(radius) {
    // this 는 생성자 함수가 생성할 인스턴스를 가리킴
    this.radius = radius;
 }
 
 Circle.prototype.getDiameter = function () {
    // this는 생성자 함수가 생성할 인스턴스를 가리킴
    return 2 * this.radius;
 };
 
 // 인스턴스 생성
 const circle = new Circle(5);
 console.log(circle.getDiameter()); // 10

 

* 전역에서 this는 전역 객체 window를 가리킴

* 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다. 

* strict mode가 적용된 일반 함수 내부의 this에는 undefined가 바인딩됨.

 

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

 

1) 함수 호출 방식

 - 일반 함수 호출

 - 메서드 호출

 - 생성자 함수 호출

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

 

2) 일반 함수 호출

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

: 결론적으로 일반 함수로 호출된 모든 함수 내부의 this에는 전역 객체가 바인딩 됨. (중첩 함수, 콜백 함수 포함)

 

 

3) 메서드 호출

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

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

const person = {
  name: 'Lee',
  getName() {
      // 메서드 내부의 this는 메서드를 호출한 객체에 바인딩 됨. 즉, person에 바인딩된다.
      return this.name;
  }
};

// 메서드 getName을 호출한 객체는 person.
console.log(person.getName()); // Lee

 

: 메서드는 프로퍼티에 바인딩된 함수, 즉 person 객체의 getName 프로퍼티가 가리키는 함수 객체는 person 객체에 포함된 것이 아닌 독립적으로 존재하는 별도의 객체다.

: 따라서 getName 프로퍼티가 가리키는 함수 객체, 즉 getName 메서드는 다른 객체의 프로퍼티에 할당하는 것으로 다른 객체의 메서드가 될 수도 있고 일반 변수에 할당하여 일반 함수로 호출 될 수도 있다.

const anotherPerson = {
   name : "Kim"
};

// getName 메서드를 anotherPerson 객체의 메서드로 할당
anotherPeson.getName = person.getName;

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

 

4) 생성자 함수 호출

: 생성자 함수 내부의 this에는 생성자 함수가 (미래에) 생성할 인스턴스가 바인딩 됨.

// 생성자 함수
function Circle(radius) {
    // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킴.
    this.radius = radius;
    this.getDiameter = function () {
        return 2 * this.radius;
    };
 }
 
const cirlce1 = new Circle(5);
const circle2 = new Circle(10);

console.log(circle1.getDiameter()); // 10
console.log(circle2.getDiameter()); // 20

 

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

: apply. call . bind 메서드는 Function.prototpype의 메서드임. 

: apply, call 메서드의 본질적인 기능은 함수를 호출하는 것.

: apply, call 메서드는 함수를 호출하면서 첫 번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩함.

: Function.prototype.bind 메서드는 apply와 call 메서드와 달리 함수를 호출하지 않고 this로 사용할 객체만 전달함.