this는 5가지의 경우에 따라 의미가 다르다.
일반 함수에서의 this
오브젝트 내의 메소드에서의 this
생성자에서의 this
이벤트리스너 안에서의 this
화살표 함수에서의 this
widow객체를 가리킨다.
function(){
this // window객체
}
오브젝트를 가리킨다.
const obj = {
name: 'test',
print() {
console.log(this.name);
},
test: function () {
console.log(this.name);
},
arrow: () => {
console.log(this);
console.log(this.name);
},
};
obj.print(); //test
obj.test(); //test
obj.arrow(); //{} undefined
생성자로 생성되는 오브젝트를 가리킴
function dog(name) {
this.name = name;
}
const pet = new dog('hi');
console.log(pet.name); // hi
콜백함수 내부에서의 this는 해당 콜백함수의 제어권을 넘겨받은 함수가 정의한 바에 따르며, 정의하지 않은 경우에는 전역객체를 참조한다.
const button = document.querySelector('button');
//일반 함수형을 콜백으로 한 경우
button.addEventListener('click', function () {
this; // 이벤트를 수신하는 객체 여기선 button을 가리킨다.
});
this가 addEventListener 내부에서 이벤트 수신을 받는 객체로 정의되었기에 button을 가리키는 것이다.(위 콜백에서의 this 원리에 따를때,일반 함수에서 this는 window를 가리키게 되있으므로)
//화살표 함수를 콜백으로 한 경우
button.addEventListener('click', () => {
this; // window 참조
});
화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다. <=출처 : 딥다이브 블로그
화살표 함수에선 this를 변경할 수 없기에 무조건 상위 스코프를 따르게 되므로 여기서 this는 window를 가리키는 것이다
함수 자체의 this 바인딩을 갖지 않고, 스코프 체인을 통해 상위 스코프의 this를 참조한다는 점
즉 화살표 밖의 this를 참조한다.
즉 function을 만날 때 마다 this값이 변경되지 않는다.
함수 내부의 this값을 새로 바꿔주지 않기 때문
const obj = {
//현재 여기서 this는 객체를 가리킴
name: 'test',
test() {
setTimeout(function () {
console.log(this.name);
}); // this가 window를 가리키므로 undefined
},
arrow() {
setTimeout(() => {
console.log(this.name); // this값이 바뀌지 않기 때문에 객체를 가리키므로 "test"
}, 1000);
},
};