Modern JavaScript DeepDIve - 5

jkky98·2024년 3월 6일

JavaScript

목록 보기

5/6

this

자바스크립트에서 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나의 논리적인 단위로 묶은 복합적 자료구조이다.

const circle = {
  radius: 5;
  
  getDiameter () {
    return 2 * circle*radius;
  }
}
////////////////////////////////////////////////////////////////////

function Circle(radius) {
  ????.radius = radius;
}

Circle.prototype.getDiameter = function () {
  return 2 * ????.radius;
};

첫번째 객체 리터럴 방식의 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조 가능하지만, 두번째 생성자 함수 방식에서는 인스턴스가 생성되지 않았기에 인스턴스를 가리키는 식별자를 알 수 없다. 그렇기에 자바스크립트는 this라는 특수한 식별자를 제공한다. ???? 부분을 this로 대체하면 의도대로 코딩이 가능하다.

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

this의 동적 바인딩

this 바인딩은 함수 호출 방식, 즉 함수가 어떻게 호출되었는지에 따라 동적으로 결정된다.

일반 함수 호출

기본적으로 this에는 전역 객체(window)가 바인딩 된다. strict mode가 적용된 일반 함수에서는 undefined가 바인딩된다. 중첩함수또한 일반함수로 호출될 경우 전역 객체가 바인딩 된다. 어떠한 함수라도 일반 함수로 호출되면 this에 전역객체가 바인딩된다.

메서드 호출

객체의 메서드, 메서드 내부에서의 this는 메서드를 호출한 해당 객체가 바인딩 된다. person.getName()에서 getName이 this를 호출한다면 this는 person이다.

메서드는 독립적이다
const person = {
  name: 'Lee',
  getName() {
    return this.name;
  }
};
만약 anotherPerson이란 객체를 만들고 name을 Kim으로 주고, anotherPerson.getName = person.getName 이란 코드를 치면 this는 바로 기존 주인(person)을 버리고 anotherPerson에 맞춘다. 즉 getName이라는 메서드를 호출할 객체는 이제 anotherPerson이다. 즉 우리는 person 내부에서 getName을 만들었으나 getName은 독립적으로 존재한다는 것이다. 만약 특정 객체의 메서드로 존재하게 두지 않고 일반 변수에 할당한다면 메서드가 일반함수로 변화할 것이다. 그러면 this.name은 window.name이 될 것이다.