자바스크립트 this

 

 

 

자바스크립트에서 this 키워드는 현재 실행 컨텍스트의 객체를 참조한다

그러나 this가 가리키는 값은 함수가 호출되는 방식에 따라 달라진다

 

1. 전역 컨텍스트

전역 실행 컨텍스트에서 this는 전역 객체를 참조한다

브라우저에서는 window 객체가 전역 객체이며, Node.js에서는 global 객체가 된다

console.log(this === window); // 브라우저에서 true

 

2. 함수 컨텍스트

함수 내부에서 this의 값은 함수가 어떻게 호출되었는지에 따라 달라진다

일반 함수 호출:

• 기본적으로, 일반 함수에서 this는 전역 객체를 참조한다
• 엄격 모드('use strict')에서는 undefined가 된다

function show() {
  console.log(this);
}
show(); // 전역 객체 또는 'use strict' 모드에서는 undefined

 

메서드로서의 호출:

객체의 메서드(객체에 속해있는 함수)로 함수가 호출될 때, this는 메서드를 호출한 객체를 참조한다

const obj = {
  show: function() {
    console.log(this);
  }
};
obj.show(); // obj를 참조

 

 

3. 생성자 함수

new 키워드로 생성자 함수를 호출할 때, this는 새로 생성된 객체를 참조한다

function Person(name) {
  this.name = name;
}
const alice = new Person('Alice');
console.log(alice.name); // Alice

 

 

4. 명시적 바인딩

call(), apply(), bind() 메서드를 사용하여 함수를 호출하면, this의 값을 명시적으로 지정할 수 있다

function greet() {
  console.log(`Hello, ${this.name}`);
}
const person = { name: 'John' };
greet.call(person); // Hello, John

 

 

5. 화살표 함수

화살표 함수에서 this는 상위 스코프의 this 값을 "상속" 받는다

따라서 화살표 함수는 this를 자체적으로 바인딩하지 않는다

const obj = {
  show: () => {
    console.log(this);
  }
};
obj.show(); // 전역 객체 또는 'use strict' 모드에서는 undefined

 

this의 동작 방식은 때로는 혼란스러울 수 있지만, 함수가 어떻게 호출되는지를 이해하면 this의 값이 어떻게 결정되는지 예측할 수 있다

this를 올바르게 사용하면 메서드나 생성자에서 객체에 접근하는 강력한 방법을 제공한다