1. this란 무엇인가?

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

“객체 지향 프로그래밍”에서 객체는 객체의 상태를 나타내는 프로퍼티 와 동작을 나타내는 메서드를 하나의 단위로 묶은 자료구조 라고 정의한다. 여기서 메서드는 자신이 속한 객체의 상태를 참조하고 변경할 수 있어야 하는데, 이때 메서드가 상태를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.

위 말을 생성자 함수를 통해 객체를 생성하는 경우에 적용해서 말해보자면, 생성자 함수의 내부에서는 상태나 메서드를 추가하기 위해 자신이 만들 인스턴스를 참조할 수 있어야 한다. 그러나 인스턴스를 만드려면 생성자 함수가 정의되고 new 키워드를 사용해서 생성자 함수를 호출해야한다. 즉, 생성자 함수가 정의되는 상황에서는 인스턴스가 생성되기 이전이고, 따라서 생성자 함수 입장에서는 자신이 만들 인스턴스를 가리킬 방법이 없다. 이 때 자신이 속한 객체 혹은 자신이 만들 인스턴스를 가리키는 식별자가 필요했고, 그래서 this 가 나오게 되었다.

function CircleArea (radius){
  this.radius = radius
  // 이것(내가 만들 인스턴스)의 radius
}

CircleArea.prototype.getArea = function() {
  return this.radius * this.radius * 3.14
  // 이것(내가 만들 인스턴스)의 width
}

const circle = new CircleArea(3);
console.log(circle.getArea()); // 28.26

2. this 바인딩

this 바인딩은 함수가 호출되는 방식에 따라 동적으로 결정된다. 즉, this는 상황에 따라 가리키는 대상이 다르다.

• binding

console.log("window : 전역객체 window를 가리킨다.", this);

function example() {
  console.log("함수 내부 : 전역객체 window를 가리킨다", this);
}
example();

const animal = {
  name: "bear",
  getName() {
    console.log("메서드 내부 : 메서드를 호출한 객체를 가리킨다.", this);
    return this.name;
  },
};
console.log("animal.getName() : ", animal.getName());
// animal.getName() : bear

function Animal(name) {
  (this.name = name),
    console.log("생성자 함수 내부 : 생성할 인스턴스를 가리킨다", this);
}

const jaws = new Animal("dragon");