[JavaScript] this

자바스크립트의 this는 함수를 호출하는 방법에 의해 결정됩니다. this가 사용되는 함수를 어떤 방식으로 실행하느냐에 따라 this의 역할이 구분된다는 것입니다. 글로만 읽어서는 어떠한 의미인지 이해하기 어려우니 4자지 방식을 예를 들어 설명하겠습니다.

 

1. 일반 함수에서 this

먼저, 일반 함수에서 this는 전역개체(window)를 말합니다.

console.log(this); // window

 

2. 객체 메서드에서 this

객체 메서드로 호출되는 경우에 this는 해당 객체를 가리키게 됩니다.

var test = {
	mtd : function() {
    	console.log(this);
    }
}
test.mtd(); // test

여기서 중요한 것은 객체의 메서드로 호출되는 경우라는 것을 기억해야 합니다. 호출하는 순간이 함수인지 메서드인지에 따라 this가 가리키는 객체가 달라지기 때문입니다.

var test = {
	mtd : function() {
    	console.log(this);
    }
}
test.mtd(); // test

var func = test.mtd;
func() // window

 

3. 생성자 함수에서 this

생성자 함수의 this는 함수의 내부를 가리키게 됩니다. 위에서 보았던 일반 함수와 비교해 보겠습니다.

function normal() {
	console.log(this);
}
normal() // window

위에서도 보았듯이 일반 함수에서의 this는 window를 가리키고 있습니다.

function make(){
	console.log(this);
}
var MK = new make(); // make {}

new를 사용하여 인스턴스 생성한 순간 함수가 실행되어 this는 make를 가리키게 됩니다.

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.check = function() {
    	return this;
    }
}
var Kim = new Person('Kim', 20);
Kim.check(); // Person {name: "Kim", age: 20, check: ƒ}

조금 더 이해하기 쉽도록 생성자 함수를 사용한 예를 하나 더 보여드렸습니다. 이번에 this가 인스턴스를 가리키는 것을 볼 수 있습니다.

 

4. 명시적으로 this를 바꾸는 함수 (call, apply, bind)

call 함수를 사용한 예시를 보겠습니다.

var num = 10
function test() {
    console.log(this.num);
}

var testNum = {
   num: 20
} 

test(); // 10
test.call(testNum); // 20

위의 예처럼 call, apply, bind 함수를 사용하면 this가 객체를 가리키게 됩니다.

 

정리하자면, this는 기본적으로 window 객체를 가리킵니다. 그러나 함수가 호출되는 시점에 따라 this가 가리키는 객체가 바뀌게 됩니다. 위의 예제들을 잘 기억했다가 항상 this를 확인하고 어떠한 것을 가르키고 있는지 생각해 보면 좋을 것 같습니다. : )