[자바스크립트] this 바인딩

this 키워드

- 실행 컨텍스트에서 어떤 객체를 참조할지 결정하는 키워드

- this의 참조 대상은 함수가 호출되는 방식에 따라 동적으로 결정

 

1. 전역 컨텍스트

전역 컨텍스트에서 this는 전역 객체를 참조(브라우저의 경우 window)

console.log(this); // window (브라우저)

2. 일반 함수 호출

일반 함수 호출에서는 전역 객체를 참조

function showThis() {
  console.log(this);
}
showThis(); // window

3. 메서드 호출

객체의 메서드를 호출하면, 메서드를 호출한 객체를 this로 참조

const obj = {
  name: "Alice",
  greet() {
    console.log(this.name);
  },
};
obj.greet(); // "Alice"​

 

4. 생성자 함수 호출

new 키워드를 사용해 생성자 함수를 호출하면, this는 새로 생성된 객체를 참조

function Person(name) {
  this.name = name;
}
const person = new Person("Alice");
console.log(person.name); // "Alice"​

 

 

명시적 바인딩 방식

call, apply, bind 메서드는 this를 명시적으로 설정할 수 있다.

 

call: 함수를 호출하며 this를 지정

apply: call과 동일하지만, 함수 인수를 배열 형태로 전달

bind: 새로운 함수로 this를 고정한 함수를 반환

function greet(greeting, punctuation) {
  console.log(`${greeting}, ${this.name}${punctuation}`);
}

const person = { name: "Alice" };

// call
greet.call(person, "Hello", "!"); // Hello, Alice!

// apply
greet.apply(person, ["Hi", "."]); // Hi, Alice.

// bind
const boundGreet = greet.bind(person);
boundGreet("Hey", "?"); // Hey, Alice?​