자바스크립트 this 바인딩

 this의 정의

• 실행 컨텍스트에 따라 동적으로 결정되는 키워드
• 현재 함수 또는 메서드가 속한 객체에 동적으로 접근 가능

 

암시적 바인딩 (Implicit Binding)

• 객체의 메소드메서드 내에서 this는 그 메서드를 호출한 객체를 가리킴

const person = {
  name: 'Alice',
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

person.sayHello(); // "Hello, Alice!"

 

명시적 바인딩 (Explicit Binding)

• call, apply, bind를 사용하여 this 값을 직접 지정
• call과 apply는 함수를 즉시 호출하며, bind는 새로운 함수를 반환

function greet(message) {
  console.log(`${message}, ${this.name}!`);
}

const person = { name: 'Bob' };

greet.call(person, 'Hi'); // "Hi, Bob!"
greet.apply(person, ['Hi']); // "Hi, Bob!"

const sayHi = greet.bind(person);
sayHi('Hello'); // "Hello, Bob!"

 

전역 바인딩 (Global Binding)

• 함수가 어떤 객체에도 속하지 않을때, this는 전역 객체를 가리킴
  런타임 환경에 따라 this는 브라우저(window) 또는 Node(global)를 각각 가리킴

function globalFunction() {
  console.log(this); // 전역 객체 (예: window)
}

globalFunction();

런타임 환경(Runtime Environment)
컴퓨터 프로그램이 실행되는 동안 제공되는 실행환경
프로그램이 실행되는 동안에 필요한 자원과 라이브러리, 하드웨어 및 소프트웨어 서비를 제공
프로그램의 실행을 관리하고 지원

 

new 바인딩 (New Binding)

• 생성자 함수를 사용하여 새로운 객체를 생성할 때 this는 새로 생성된 객체를 가리킴

function Person(name) {
  this.name = name;
}

const john = new Person('John');
console.log(john.name); // "John"

 

동적 바인딩

• this의 값은 함수가 어떻게 호출되느냐에 따라 동적으로 결정
• 화살표 함수(arrow function) 내에서 this는 해당 함수를 둘러싼 렉시컬 스코프에 따라 정적으로 결정

const obj = {
  name: 'Alice',
  sayHello: () => {
    console.log(`Hello, ${this.name}!`);
  }
};

obj.sayHello(); // "Hello, undefined" (화살표 함수는 렉시컬 스코프의 this를 사용)

동적으로 결정된다는 것은 this의 값이 코드가 실행될 때 실제로 어떤 상황에서 호출되었느냐에 따라 변경될 수 있다는 의미

this는 실행 컨텍스트에 따라 다르게 설정되며, 코드를 작성할 때 정적으로 예측하기 어려운 경우가 많음

여러 상황에서 this의 값이 달라질 수 있기 때문에 "동적"이라고 표현

// 동적 결정 예시
const person1 = {
  name: 'Alice',
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

const person2 = {
  name: 'Bob'
};

person1.greet(); // "Hello, Alice!" - this는 person1 객체를 가리킴
person2.greet = person1.greet;
person2.greet(); // "Hello, Bob!" - this는 person2 객체를 가리킴

 

call과 apply 메소드

• call과 apply는 함수를 호출할 때 this 값을 명시적으로 지정
• call은 함수에 인수 목록을 전달하고, apply는 배열 형태로 인수를 전달

const person = {
  name: 'Alice',
  greet: function(message, age) {
    console.log(`${message}, I'm ${this.name}, and I'm ${age} years old.`);
  }
};

const newPerson = { name: 'Bob' };

person.greet.call(newPerson, 'Hi', 30);
person.greet.apply(newPerson, ['Hi', 30]);

 

bind 메서드

• bind는 함수의 복사본을 만들고, 지정된 this 값을 가지는 새로운 함수를 반환
• 원본 함수는 변경되지 않고, 새로운 함수를 호출할 때 this가 항상 지정된 값으로 유지

const person = {
  name: 'Alice',
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

const newPerson = { name: 'Bob' };

const sayHelloToNewPerson = person.sayHello.bind(newPerson);
sayHelloToNewPerson(); // "Hello, Bob!"