this

this

자바스크립트에서의 this 는 현재 실행중인 컨텍스트(객체)를 참조하는 키워드로 함수나 메서드가 호출되는 방식에 따라 그 참조값이 달라진다.

 

this 의 동작 방식

1. 전역 범위에서의 this

console.log(this === window); // 브라우저 환경 - true

• 전역 범위에서 this 는 전역 객체를 가리킨다.
• 브라우저 - window / Node.js - global

 

2. 일반 함수 호출

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

• 일반함수에서 this 는 기본적으로 전역 객체를 참조한다.
• 메서드의 내부함수에서도 동일함
• strict 모드에서는 undefined

 

3. 메서드 호출

const obj = { 
    name: '홍길동', 
    sayHello: function() { 
        console.log(this.name); 
    } 
};
// 객체의 메서드로 직접 호출
obj.sayHello(); // '홍길동'

const hello = obj.sayHello;
hello(); // undefined or 전역 객체의 name 속성 출력

• 객체의 메서드로서 호출될 시 this 는 해당 객체(호출 주체)를 참조한다.
• this가 의도한 객체를 가리키게 하려면 메서드를 해당 객체의 컨텍스트에서 호출해야 한다.

 

4. 생성자 함수

function Person(name) {
    this.name = name;
}
const person = new Person('김철수'); // this는 새 인스턴스

• new 키워드로 객체 생성 시 this 는 새로 생성된 인스턴스를 참조한다.

 

5. 콜백함수

Array.prototype.forEach(callback[, thisArg])
Array.prototype.map(callback[, thisArg])
Array.prototype.some(callback[, thisArg])
Array.prototype.every(callback[, thisArg])
Array.prototype.find(callback[, thisArg])
Array.prototype.findIndex(callback[, thisArg])
Array.prototype.findMap(callback[, thisArg])
Array.prototype.from(callback[, thisArg])
Set.prototype.forEach(callback[, thisArg])
Map.prototype.forEach(callback[, thisArg])

• 일반함수를 콜백으로 사용 시 this 는 기본적으로 전역객체를 가리킴
• 위와같이 일부 메서드는 콜백 함수와 함께 this 를 두번째 인자로 받아 지정할 수도 있다.

 

명시적 this 바인딩

call / apply / bind  메서드

• call / apply / bind 메서드 등으로 this 의 값을 직접 지정할 수 있다.

 ■ call 메서드

• 함수를 즉시 호출하며, this 를 특정 객체로 바인딩하는 메서드
• 첫 번째 인자는 this로 사용할 객체를 받고, 그 뒤로 함수에 전달할 인자들을 쉼표로 구분해서 받는다.

func.call(thisArg[, arg1[, arg2[, ...]]])

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

 

 ■ apply 메서드

• call 과 거의 유사, 함수 즉시 호출 및 this 지정, 함수에 전달할 인자를 배열로 받는 메서드
• apply는 인자를 배열로 전달하기 때문에 배열 형태의 데이터를 함수의 인자로 사용할 때 편리하다.

func.apply(thisArg, [argsArray]);

 

 ■ bind 메서드

• 함수를 즉시 호출하지는 않고 넘겨 받은 this 및 인수들을 바탕으로 새로운 함수를 반환하는 메서드

func.bind(thisArg[, arg1[, arg2[, ...]]])

 

this 바인딩의 예외사항

 

화살표 함수

• 화살표 함수는 실행 컨텍스트 생성 시 this 를 생성하지 않으며, 상위 스코프의 this를 그대로 상속받는다.
• 화살표 함수가 생성될 때 this 값이 결정되며 call, apply, bind 메서드로 this를 변경할 수 없다.
• 객체의 메서드나 프로토타입에 화살표 함수 사용 시 예상치 못한 결과를 얻을 수 있으므로 주의할 것