[JavaScript] this 바인딩

자바스크립트에서 함수를 호출할 때 인자값과 arguments 객체, this 인자가 내부적으로 전달된다. 이번 시간에는 함수 호출 패턴에 따라 this가 어떤 객체에 바인딩 되는지, 이를 이용한 코딩 방법을 알아보자.

 

1. 객체의 메서드를 호출할 때 this 바인딩

객체의 메서드를 호출할 때, 메서드 내부에 사용된 this는 해당 메서드를 호출한 객체로 바인딩된다.

var kimMan = {
    name : 'kim',
    myNameIs : function(){
        console.log(this.name);
    }
};

var otherGuy = {
    name : 'lee'
};

otherGuy.myNameIs = kimMan.myNameIs;

kimMan.myNameIs(); //kim
otherGuy.myNameIs(); //lee

 

myNameIs 메서드는 자신의 name 프로퍼티에 있는 값을 출력하는 함수이다. 객체 매서드에서 호출하는 경우 this는 호출한 객체를 가리킨다고 했으므로 kimMan.myNameIs()에서 this는 kimMan객체가 되어 kim이 출력되고, otherGuy.myNameIs()에서 this는 otherGuy 객체가 되어 lee가 출력된다.

 

2. 함수를 호출할 때 this 바인딩

함수를 호출할 때 this는 전역 객체에 바인딩 된다. 브라우저 환경에서 자바스크립트를 실행할 경우 전역 객체는 window가 되고 Node.js와 같은 자바스크립트 런타임 환경에서의 전역 객체는 global 객체가 된다.

다음 예제를 보면 함수를 호출할 때 this는 전역 객체 window에 바인딩 됨을 알 수 있다.

var t = 'this is javascript';
console.log(window.t); // this is javascript

var ref = function(){
    console.log(this.t);// this is javascript
}

ref();

 

 

다음 예제를 보면 내부함수도 함수 호출이므로 내부함수를 호출할 때 this도 전역 객체에 바인딩 된다. 

var name = 'windowMan';

var objectMan = {
    name : 'objectMan',
    func1 : function(){
        console.log('what is your name : ' + this.name); 

        func2 = function(){
            console.log('what is your name : ' + this.name);
        };

        func2();
    }
};

objectMan.func1();

 

위 함수를 호출하면 func2를 호출할 때 objectMan이 아닌 windowMan이 출력된다. 내부함수 호출도 this가 전역 객체에 바인딩 되기 때문이다. 

func2 호출할 때도 objectMan이 출력되려면 어떻게 해야할까?

var name = 'windowMan';

var objectMan = {
    name : 'objectMan',
    func1 : function(){
        that = this;
        console.log('what is your name : ' + this.name);

        func2 = function(){
            console.log('what is your name : ' + that.name);
        };

        func2();
    }
};

objectMan.func1();

 

위와 같이 하거나 다음과 같이 코딩하면 원하는 값을 출력할 수 있다.

var name = 'windowMan';

var objectMan = {
    name : 'objectMan',
    func1 : function(){
        console.log('what is your name : ' + this.name);

        func2 = function(){
            console.log('what is your name : ' + this.name);
        };

        func2.apply(objectMan);
    }
};

objectMan.func1();