JS) this

kangdari·2020년 3월 30일
0

this

일반 함수의 this

일반 함수에서의 this는 전역 객체에 바인딩됩니다.

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

객체 메서드를 호출할때의 this

객체 메서드 내부의 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

0개의 댓글