[JavaScript] this

 

함수 호출 방식

---

1. 함수 호출

2. 메소드 호출

3. 생성자 함수 호출

4. apply/call/bind 호출

---

 

함수 호출 방식에 따라 this에 바인딩되는 객체가 동적으로 결정된다.

 

1. 함수 호출

var foo = function(){
    console.dir(this);
};

foo(); // 1. 함수 호출 (window)

• 전역객체(Globla Object): 모든 객체의 유일한 최상위 객체, Browser-Side에서 window, Server-Side(Nodejs)에서 global 객체이다.
• 전역함수, 메소드 내부함수(객체 내 함수 내부 함수), 콜백함수의 경우 this는 전역객체에 바인딩된다.

 

• 따라서 전역변수 value와, 객체 내 value 프로퍼티가 있을 때, this.value는 전역변수를 의미한다.
• 객체 내부함수의 this가 전역객체를 참조하지 않게 하려면 다음과 같은 방법을 사용한다.

 

2. 메소드 호출

var obj1 = {
    name: 'Lee',
    sayName: function(){
        console.log(this.name);
    }
}

var obj2 = {
    name: 'Kim'
}

obj2.sayName = obj1.sayName;
obj1.sayName(); // Lee
obj2.sayName(); // Kim

• 메소드: 객체 내 함수, 객체의 프로퍼티 값
• 메소드 내부 this: 메소드를 소유한 객체(메소드 호출한 객체)에 바인딩

 

3. 생성자 함수 호출

• 생성자 함수 호출: new 연산자를 통한 생성자 함수 호출 (new 연산자를 사용해야 생성자 함수로 동작)