함수 호출 방식에 따라 달라지는 this

자바스크립트에서 this는 헷갈리기 쉬운 개념 중 하나다.
특히 객체의 메서드를 다른 객체에 할당하거나 호출 방식이 달라질 때 this가 어떻게 바뀌는지 이해하는 것이 중요하다.
아래 예제를 통해 this가 어떤 식으로 바인딩되는지 이해해 보려고한다.

const obj = {
    name: 'John',
    greet: function() {
        console.log(this.name); // obj.greet() 호출 시 'John'
    }
};

const obj2 = {
    name: 'Kim',
    greet: obj.greet
    }
};

obj2.greet(); // 1) 결과는?

const greetFunc = obj.greet;
greetFunc(); // 2) 결과는?

 

1) obj2.greet()를 호출했을 때 출력 결과: 'kim'
이유는 자바스크립트에서 this는 함수가 호출될 때 결정되며, 해당 함수를 누가 호출했느냐에 따라 this가 바인딩되기 때문이다.
여기서 obj2.greet();라고 호출했으므로, greet 함수 내부의 this는 obj2를 가리키게 된다.

 

2) greetFunc();를 호출했을 때 출력 결과:
- 브라우저의 비엄격 모드(non-strict) this는 window를 가리킨다.
그래서 window.name이 정의되어 있지 않다면 undefined가 출력된다.
- strict 모드 ('use strict') this는 undefined가 되어, this.name 접근 시 에러는 나지 않고 undefined가 출력된다.

this는 함수가 어떻게 호출되느냐에 따라 값이 달라지기 때문에, 코드를 작성할 때 반드시 호출 컨텍스트를 의식해야 한다.
특히 메서드를 다른 객체에 넘기거나 콜백으로 사용할 때는 더욱 주의가 필요하다.

 

+ 250603 내용 추가
객체 프로퍼티 값이 함수일 경우 이를 메서드라 부른다.
메서드를 생성할 때에는 화살표 함수보다는 function()을 사용하는게 좋다.
그 이유는 화살표 함수로 메서드를 생성한 경우 가장 바깥에 있는 글로벌 객체인 윈도우 객체를 가리키기 때문이다.