[JavaScript] this 키워드: 함수 호출 맥락에 따른 this의 의미

JavaScript에서 this 키워드는 함수가 호출되는 맥락(context)에 따라 그 의미가 달라집니다. this의 값은 함수가 호출되는 방식에 따라 결정되며, 다양한 시나리오에서 다르게 작동합니다.

1. 전역 컨텍스트에서의 this

전역 실행 컨텍스트에서 this는 전역 객체를 가리킵니다. 브라우저에서는 window 객체가, Node.js에서는 global 객체가 됩니다.

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

2. 함수에서의 this

일반 함수에서 this의 값은 함수를 호출하는 방식에 따라 결정됩니다.

일반 함수 호출

함수 내에서 this는 전역 객체를 가리키는 경우가 일반적입니다(엄격 모드에서는 undefined).

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

showThis(); // 브라우저에서는 window 객체를 출력, 엄격 모드에서는 undefined 출력

메서드로서의 호출

객체의 메서드로서 함수가 호출될 때, this는 해당 메서드를 호출한 객체에 바인딩됩니다.

const myObject = {
    name: 'ChatGPT',
    showThis: function() {
        console.log(this);
    }
};

myObject.showThis(); // myObject를 출력

3. 생성자 함수에서의 this

새로운 객체를 생성할 때 생성자 함수를 사용하면, this는 새로 생성되는 객체를 가리킵니다.

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

const person1 = new Person('Alice');
console.log(person1.name); // Alice

4. 화살표 함수에서의 this

화살표 함수에서는 this가 함수 자체의 this가 아니라, 화살표 함수를 둘러싼 외부 함수의 this를 상속받습니다.

const myObject = {
    name: 'ChatGPT',
    showThis: () => {
        console.log(this);
    }
};

myObject.showThis(); // 브라우저에서는 window 객체를 출력

화살표 함수는 주변의 실행 컨텍스트에서 this를 “계승”하기 때문에, 객체의 메서드로 화살표 함수를 사용하는 것은 일반적으로 피해야 합니다. 대신, 함수 표현식을 사용하는 것이 적합합니다.

5. this를 명시적으로 바인딩하기

call, apply, bind 함수를 사용하여 함수의 this 값을 명시적으로 설정할 수 있습니다.

function greet() {
    console.log(`Hello, I am ${this.name}`);
}

const user = { name: 'John' };
greet.call(user);  // Hello, I am John
greet.apply(user); // Hello, I am John

const boundGreet = greet.bind(user);
boundGreet();      // Hello, I am John