일반 함수에서의 this는 전역 객체에 바인딩됩니다.
(function() {
console.log(this); // Window
})();
객체 메서드 내부의 this는 해당 메서드를 호출한 객체로 바인딩 됩니다.
즉, 현재 호출하고있는 obj 객체를 확인 할 수 있습니다.
const obj = {
test: function () {
console.log(this); // { test: [Function: test] }
}
}
obj.test();
obj 변수 안에서 this를 두 번 호출해 보았습니다.
첫 번째 this의 경우 obj의 메서드에서 호출되었기 때문에 obj 객체로 바인딩 되지만,
두 번째 this의 경우 메서드가 아닌 함수에서 호출되었습니다. 그래서 this는 Window로 바인딩됩니다.
var value = 0; // 전역 변수
var obj = {
value: 1,
setValues: function () {
this.value = 2; // this: obj -> obj.value = 2
(function(){ // 메소드가 아니고 그냥 함수
this.value = 3; // this: window -> window.value: 3;
// 전역 value: 3
})();
}
}
obj.setValues();
console.log(value); // 3
console.log(obj.value); // 2
스코프 내부에서 동일한 this를 사용하고 싶다면 아래와 같이 작성해주면 됩니다.
block-scope는 this의 영향을 받지 않습니다. this 바인딩을 하지않고 블럭 밖의 this를 그대로 사용함.
var value = 0; // 전역 변수
var obj = {
value: 1,
setValues: function () {
this.value = 2; // this: obj -> obj.value = 2
{
// block-scope는 this의 영향을 받지 않습니다.
this.value = 3; // this: obj -> obj.value = 2
};
}
}
obj.setValues();
console.log(value); // 0
console.log(obj.value); // 3