[Javascript] this 이것은 무엇인가

this

자바스크립트에서는 함수를 호출하는 방식에 따라 this에 바인딩되는 객체가 달라진다.

다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니라, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다

함수를 호출하는 방식은 4가지가 있다.

1. 함수 호출

2. 메소드 호출

3. 생성자 함수 호출 (추후에 포스팅 예정)

4. call/apply/bind 호출 (추후에 포스팅 예정)

---

1. 함수 호출

기본적으로 this는 전역객체에 바인딩한다. 

function foo() {
console.log(this); 
}

foo(); // window

심지어 내부함수의 경우에도 this는 외부함수가 아닌 전역객체에 바인딩된다.

function foo() {
function goo() {
console.log(this); 
}
goo();
}

foo() // window

메소드의 내부함수인 경우에도 this는 전역객체에 바인딩된다.

var a = 100;

var obj = {
a: 200,
foo: function() {
function goo() {
console.log(this.a);
}
goo();
}
};

obj.foo() // 100

콜백함수의 경우에도 this는 전역객체에 바인딩 된다.

var a = 100;

var obj = {
a: 200,
foo: function() {
setTimeout(function() {
console.log(this.a);
}, 1000);
}
}

obj.foo(); // 1초후 100 출력

내부함수는 일반함수, 메소드, 콜백함수 어디에도 선언되든 관계없이 this는 전역객체를 바인딩한다.

그렇다면 내부함수의 this가 전역객체를 참조하는 것을 피하려면 어떻게 해야할까? 

메소드의 내부함수를 지정하기 전에 that라는 변수를 지정해준다.

var a = 100;

var obj = function() {
a: 200,
foo: function() {
var that = this;
function goo() {
console.log(this.a); // 100

console.log(that.a); // 200

}
goo();
}
}

obj.foo();

---

2. 메소드 호출

함수가 객체의 프로퍼티 값이면 메소드로서 호출된다. 이때 메소드 내부의 this는 해당 메소드를 소유한 객체에 바인딩된다.

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

var obj2 = {
name: 'BBB'
}

obj2.sayName = obj1.sayName;

obj1.sayName(); // AAA

obj2.sayName(); // BBB

---