자바스크립트에서의 this

• this는 자기 참조 변수(self-referencing variable)로서, 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리킨다.
  • this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티/메서드를 참조할 수 있다.
• 이처럼 this는 주로 객체의 프로퍼티/메서드에 접근하기 위해 사용한다.
  • 바꿔 말하면, 일반 함수 내부에서의 this를 사용하는 것은 크게 의미가 없다. 이 때문에 strict mode가 적용된 경우, 일반 함수로서 호출된 함수 내의 this에는 undefined가 바인딩 된다. (strict mode가 아닐 경우 원래는 전역 객체를 가리킨다.)

자바스크립트에서의 this는 동일한 함수 내에 있더라도 해당 함수가 어떻게 호출되는지에 따라 결정된다.

1. 일반 함수로서 호출된 함수의 this ▶ 전역 객체를 가리킴.

2. 메서드(객체 안에 존재하는 함수)로서 호출된 함수의 this ▶ 해당 메서드를 "호출"한 객체를 가리키게 됨. (해당 메서드를 "소유"한 객체가 아니라 "호출"한 객체임에 주의!)

3. 생성자 함수로서 호출된 함수의 this ▶ (미래에) 생성될 인스턴스를 가리킴.

 

function BinarySearchTree() {
  this._root = null;

  console.log(this);
}

// 🟢BinarySearchTree를 일반 함수로서 호출할 경우
BinarySearchTree();
// Object [global]

// 🟢BinarySearchTree를 생성자 함수로서 호출할 경우
const Tree = new BinarySearchTree();
// { _root: null }

const aespa = {
  members: ['Karina', 'Giselle', 'Winter', 'Ningning'],
  genAvatar() {
    return this.members.map(member => 'æ-' + member);
  },
};

// 🟢genAvatar를 메서드로서 호출할 경우
console.log(aespa.genAvatar());
// [ 'æ-Karina', 'æ-Giselle', 'æ-Winter', 'æ-Ningning' ]

 

 

---

<참고>

「모던 자바스크립트 Deep Dive」 (이웅모 저)