[프론트] JS에서 this 키워드의 사용과 그 특성에 대해 설명하세요

한줄 정리

this는 메서드(객체 안에 있는 함수)에서 
자신이 들어가 있는 객체를 부를때 사용하는 키워드입니다.

다른 말로, 호출의 주체를 지칭하는 키워드입니다. 

다양한 상황에서 지칭하는게 달라집니다.  

 

설명

1. 메서드가 아닌 함수일 경우

이때는 함수가 객체에 들어있지 않아, 호출의 주체가 없습니다. 

이 경우에 this는 전역 객체가 됩니다.

브라우저에서는 strict mode에서는 undefined, non-strict에서는 Window객체가 되고,
Node.js에서는 global 객체가 됩니다. 

console.log(this); //Window
function f1 () {
    console.log(this);
}
f1(); //Window

 

2. 메서드일 경우

메서드가 화살표 함수가 아닌, 일반 함수인 경우에는

this는 호출의 주체인, 함수가 담겨져 있는 객체가 됩니다. 

 

따라서, this를 사용할거라면 메서드들을 일반 함수로 표현하는 것이 좋습니다. 

const user = {
    name: 'minju',
    sayHello() {
    	console.log(`Hi this is ${this.name}`);
    }
}
user.sayHello()

 

3. 메서드이나 화살표함수인 경우

화살표 함수는 this가 호출의 주체가 아니라,

상위의 this를 그대로 가져옵니다. 

 

그래서 아래의 경우의 this는 user 객체가 아닌, Window객체가 됩니다. 

따라서 this 쓸거면 객체 안에 메서드들을 화살표 함수로 표현하지 않습니다. 

const user = {
    name: 'minju',
    sayHello: () => {
        console.log(this); //Window객체
    	console.log(this.name); //undefined
    }
}
user.sayHello()

 

다만 콜백함수를 사용하는 경우에는,

콜백 함수 한으로 화살표 함수로 정의하는 것이 권장됩니다. 

왜냐하면 콜백함수는 호출될 시 그냥 일반함수처럼 호출의 주체 없이 호출되어서, Window객체가 되기 때문입니다.

아래의 경우에 this가 user였으면 좋겠지만,
setTimeout안의 test가 그냥 일반 함수 마냥 밖으로 나와버려서 this는 Window가 됩니다. 

const user = {
    name: 'minju',
    sayHello() {
    	function test() {
            console.log(this)
        }
    	setTimeout(test,1000);
    }
}
user.sayHello()
//Window

 

하지만 여기서 화살표 함수를 사용하면 this는 예상대로 user이 됩니다. 

왜냐하면 화살표 함수는 상위의 this를 그대로 받아오기 때문입니다. 

const user = {
    name: 'minju',
    sayHello() {
    	setTimeout(()=>{
    	    console.log(`안녕하세요, ${this.name}입니다`);
    	},1000);
    }
}
user.sayHello()

 

4. bind로 this binding

call, apply, bind와 같은 함수들은 개발자가 명시적으로 this를 지정해줄 수 있습니다. 

그 중 bind를 가장 자주 사용합니다. 

위에 콜백 함수가 일반 함수라 this가 인식이 잘 안됐던 경우를 가져옵시다. 

const user = {
    name: 'minju',
    sayHello () {
        setTimeout(function() {
            console.log(`안녕하세요, ${this.name}입니다.`);
        }.bind(this), 1000);
    }
}
user.sayHello();

이런식으로 콜백함수에 bind를 사용하면 억지로 this값을 설정해줄 수 있습니다. 

이때 bind안의 this는 sayHello 스코프 내의 this로, 

sayHello 호출의 주체인 user입니다. 

 

다만, arrow function은 this를 bind로 바꿀수 없습니다. 

무조건 상위 this를 가져옵니다. 

 

정리

this는 "함수를 누가 호출했냐"로 결정된다.
- 일반 함수 → window / undefined (strict)
- 메서드 → 호출한 객체
- 화살표 함수 → 상위 this
- 콜백 → 기본적으로 this 잃어버림
- bind → this 강제 지정