자바스크립트
this
wooluck
2021. 3. 20. 01:12
자바스크립트를 배우면서 가장 헷갈렸던 부분이 this 였다.
자바에서는 단순하게 자기 자신을 가리키지만 자바스크립트에서는 여러 상황마다 다른 결과를 보여준다.
몇 년 동안 사용하다보니 익숙해지긴 했지만 확실하게 포스팅으로 정리하는게 낫겠다는 생각이 들었다.
1. 일반적인 호출
일반적인 상황. 즉, 그냥 호출하는 경우 기본적으로 this는 전역 객체를 가리킨다.
단, strict 모드에서는 undefined
function foo() {
console.log(this); // window
}
foo();
2. 내부 함수의 호출
1번과 마찬가지로 this는 전역 객체를 가리킨다.
function foo() {
console.log(this); // window
function bar() {
console.log(this); // window
}
bar();
}
foo();
3. 객체의 메소드로 호출
객체의 메소드로 호출하면 함수는 그 객체를 가리키게 된다.
const tmp = {
ftn: function() {
console.log(this); // tmp
},
};
tmp.ftn();
하지만 이 경우에도 ftn 내부에 다른 함수가 존재하며, 그 함수를 호출한다면 그 함수의 this는 전역 객체를 가리키게 된다.
4. new 키워드로 호출 (생성자 함수)
생성자 함수로 호출하는 경우 함수의 코드가 실행되기 전 this는 빈 객체가 되며, 이후 코드가 실행되고 그 결과가 this에 할당된 이후 반환된다.
const Obj = function() {
this.count = 0;
}
const obj = new Obj();
console.log(obj.count); // 0
5. 화살표 함수
화살표 함수에서는 주변 스코프의 this를 따르게 된다.
const obj = {
ftn: function() {
console.log(this); // obj
(function(){ console.log(this)})(); // window
(() => console.log(this))(); // obj)
}
}
6. call, apply, bind
call, apply, bind로 함수를 호출 또는 생성하는 경우 this는 첫 번째로 전달받은 객체가 된다.
const call = {
ftn: function() {
console.log(this); // obj
function abc() {
return this;
}
console.log(abc()); // this
console.log(abc.call(this)); // obj
}
}
call.ftn();