[Javascript] this에 대하여

자바스크립트를 쓰면서 가장 많이 사용하는 this. 하지만 이 this가 무슨 역할을 하는지 정확히 알지 못했다.

자기 자신 이라고 대강 알고 쓰긴 했는데, 이번에 제대로 정리를 해보려고 한다.

 

 

this는 함수가 어떻게 호출되느냐에 따라 그 역할이 결정된다. 

this는 전역에서 사용할 수도 있고, 함수 안에서도 사용할 수 있다. 어떤 함수냐에 따라 그 역할이 다르게 해석되기도 한다.

 

1. 브라우저 환경에서 전역으로 this 사용하기

this.valueA = 'a';
console.log(valueA);

브라우저 환경에서 this를 전역에서 사용하면, 전역 객체인 Window 객체를 가리킨다.

그래서 valueA는 window.valueA로 해석된다.

 

 

2. 함수에서 호출하기

 

(1) 일반 함수인 경우

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

function checkThis2() {
    "use strict";
    console.log(this);
}

checkThis();
checkThis2();

함수에서 this를 사용하고 함수를 호출하면 this는 전역 객체인 Window를 가리킨다. 하지만 함수 내의 코드를 strict mode로 실행하면, this는 undefined가 된다.

* use strict : 자바스크립트 코드를 좀 더 안전하고 엄격하게 작성할 수 있도록 도와주는 모듈.

 

 

 

 

(2) 생성자 함수인 경우

const product1 = Product("가방", 2000);
console.log(window.name);   // 가방
console.log(window.price);  // 2000


const product2 = {
    name: '가방2',
    price: 3000,
    getVat() {
        return this.price/10;
    }
}
const valueOfProduct2 = product2.getVat();
console.log(valueOfProduct2);   // 300



const calVAT = product2.getVat;
const VAT2 = calVAT();
console.log(VAT2);  // 200

const newCalVAT = calVAT.bind(product2);
const VAT3 = newCalVAT();
console.log(VAT3);  // 300

product1 의 경우

생성자 함수를 new 키워드 없이 호출되면, 이 때 this는 전역 객체인 Window를 가리킨다. new 키워드와 함께 호출해야 this는 프로토타입 객체와 연결된 객체가 반환된다.

 

product2의 경우

객체 내의 정의된 함수인 메서드 안에서 this를 사용하고, 객체를 통해 메서드를 호출하면 this는 그 객체를 가리킨다.

 

VAT2의 경우

메서드 안에서 this를 정의했지만 메서드를 다른 변수에 저장하고 그 변수를 통해 메서드를 호출하면, 일반적인 함수 호출이 되어 this는 전역 객체를 가리킨다.

 

VAT3의 경우

this의 bind 메서드를 통해 전달한 인자 값을 변경할 수 있다. call과 apply 메서드를 통해서도 this가 가리키는 값을 변경할 수 있다.

 

 

 

(3) 메서드 안에 중첩 함수로 함수가 작성된 경우 / 화살표 함수를 사용한 경우

const counter1 = {
    count: 0,
    addAfter1Sec() {
        setTimeout(function(){
            this.count += 1;
            console.log(this.count);    // NaN
        }, 1000);
    }
};

counter1.addAfter1Sec();

const counter2 = {
    count: 0,
    addAfter1Sec() {
        setTimeout(()=>{
            this.count += 1;
            console.log(this.count);    // 1
        }, 1000);
    }
};

counter2.addAfter1Sec();

counter1의 경우

메서드 안에서 중첩 함수로 함수가 작성됐을 경우, 내부 함수의 this는 전역 객체를 가리킨다. 그래서 1초 뒤에 this.count는 window.count로 해석되어 undefined에 값을 더하려고 해서 NaN이 출력된다.

 

counter2의 경우

화살표 함수에서 this를 사용하면 this는 부모 환경의 this를 가리킨다. 그래서 중첩된 함수로 작성되었을 때 화살표 함수를 사용하면 부모 함수인 addAfterSect()의 this와 같다.

화살표 함수에서 this는 일반적인 this와 다르게 호출 시점에 동적으로 정의되는 것이 아니라 코드를 작성하는 시점에 정적으로 결정된다. 화살표 함수를 작성하는 시점의 부모 환경에서의 this로 정의되고, 변경이 불가능하다. 그래서 bind를 통해 this를 변경할 수 없다.