JavaScript의 this 바인딩

 JavaScript의 this는 다른 언어의 this와는 조금 다르게 동작한다. this의 값은 함수를 호출하는 방법에 따라 바뀐다. 좋은 JavaScript 개발자로 거듭나기 위해서는 꼭 이해해야하는 개념이라고 하니, 이번 포스팅에서 다루도록 하겠다.

 JavaScript에서 함수(Function)을 호출할 때는 암묵적으로 arguments 객체 및 this 변수가 함수 내부로 전달된다. 그리고 방금 언급했듯 함수를 호출하는 방법에 따라 this에 할당되는 값은 달라진다. 지금부터 하나씩 알아보자.

1. 함수를 호출할 때 this

 일반적인 함수를 호출할 때, 해당 함수 내부에서 사용된 this는 전역객체(브라우저의 경우 window객체, Node.js의 경우 global 객체)에 바인딩 된다.

var name = 'preamtree';
console.log(windows.name); //출력결과: preamtree

function sayYourName() {
    console.log(this.name); //출력결과: preamtree
}

sayYourName();

2. 메서드를 호출할 때 this

 객체의 프로퍼티가 함수일 경우, 이를 메서드라고 부른다. 이러한 메서드를 호출할 때 this의 값은 인스턴스화 된 객체(해당 메서드를 호출한 객체)를 참조한다.

var person = {
    name: 'preamtree',
    sayYourName: function() {
        console.log(this.name);
    }
};

var myDog = {
    name: 'waldo'
};

myDog.sayYourName = person.sayYourName;
person.sayYourName();   // 출력결과 : preamtree
myDog.sayYourName();    // 출력결과 : waldo

3. 생성자함수의 this

 생성자함수. 즉, new 키워드를 사용하여 함수를 호출할 때의 this는 new 키워드로 인스턴스화 된 객체(새롭게 생성된 객체)를 참조한다.

var Person = function (name) {
    this.name = name;
};

var aaa = new Person('preamtree');
console.log(aaa.name);  // 출력결과: preamtree

 위 예제의 Person 함수를 new 키워드 없이 호출하면 일반적인 함수호출의 this 바인딩 방식을 따르게 된다. 그러니까, this에는 전역객체 window(Node.js의 경우 global)이 바인딩 됨에 유의한다.

4. call(), apply()로 호출할 때 this

 이전 포스팅에서 잠깐 다루었던 call()과 apply()는 this를 특정 객체에 명시적으로 바인딩시킬 수 있는 함수이다. 이 함수들은 Function.prototype 객체의 메서드이므로, 모든 함수는 call()과 apply()를 활용할 수 있다. 문법은 아래와 같다.

function.apply(thisArg, argArray)

 call()과 apply()의 기능은 함수 호출임에 유의하자. 예를들어 AAA라는 함수가 있으면 AAA.apply()의 형태로 사용하는데, 이는 AAA라는 함수를 호출하는 것이다.

 apply메소드의 thisArg는 this에 바인딩할 객체를 가리키고, argArray는 함수를 호출할 때 넘길 인자들의 배열을 가리킨다. 아래 예제와 함께 확인해보자.

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

var aaa = {};
var bbb = new Person('preamtree', 99, 'man');
Person.apply(aaa, ['preamtree', 99, 'man']);

// 아래의 출력결과는 같다.
console.dir(bbb);
console.dir(aaa);

 위 예제는 aaa라는 비어있는 객체에 apply()를 활용하여 프로퍼티들을 할당한 것이다. 그래서 new 키워드로 생성한 객체와 결과가 같음을 확인할 수 있다. 한편, call()은 apply()와 같은 동작을 한다. 다만 파라미터의 방식이 약간 다를 뿐이다.

-끝-

출처 및 참고

https://muckycode.blogspot.kr/2015/04/javascript-this.html

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this