[Web] bind함수로 this 조작하기
this 키워드는 this를 참조하고 있는 객체를 가리킨다. 함수 내부에서 사용하면 보통 해당 함수를 가리킨다. 하지만 this가 다른 객체를 가리키게 할 수도 있다.
var healthObj = {
name : "달리기",
lastTime : "PM10:12",
showHealth : function() {
console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요");
}
}
healthObj.showHealth();
| cs |
이 코드에서 this 는 healthObj 객체를 가리켜 "달리기"를 출력 할 것이다. 하지만 아래의 코드를 보자.
var healthObj = {
name : "달리기",
lastTime : "PM10:12",
showHealth : function() {
setTimeout(function(){
console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요");
},500);
}
}
healthObj.showHealth();
| cs |
setTimeout 함수 내에 this.name을 호출한 결과는 'undefined'가 나온다. 디버거에서 this를 찍어보면 window 객체가 나온다. setTimeout 내에서도 현재 이 함수가 들어있는 healthObj 객체를 가리키게 하려면 bind()를 사용해야 한다.
var healthObj = {
name : "달리기",
lastTime : "PM10:12",
showHealth : function() {
setTimeout(function(){
console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요");
}.bind(this),500);
}
}
healthObj.showHealth();
| cs |
이렇게 하면 this는 healthObj를 가리키게 된다.
bind는 함수에 '.' 연산자를 붙여 사용하게 되는데, '.' 을 붙이는 순간 함수가 객체화 되면서 bind를 호출한 함수를 반환한다.
주의 해야 할 것은 ES6의 Arrow function 에서는 bind메서드를 쓰지 않아도 원래 함수를 가리킨다는 점이다.
var healthObj = {
name : "달리기",
lastTime : "PM10:12",
showHealth : function() {
setTimeout(()=>{
console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요");
},500);
}
}
healthObj.showHealth();
| cs |
undefined가 뜨지 않고 잘 동작하는 것을 볼 수 있다.
No comments: