javascript "this"에 대하여

javascript에서 this가 가르키는 것들에 대해 정리해본다.

 

기본적으로 this는 window이다. 하지만 이 this가 가리키는 것은 this가 위치하는 곳 마다 바뀌게 된다.

* 화살표 함수 사용시 this가 또 달라지니 유의해야 한다.

 

1) 객체 메서드 안의 this는 객체자신을 가리킨다.

var obj = {
	a: function () { console.log(this);}
};
obj.a();

//obj를 출력

 

2) 하지만 아래처럼 호출하면, a2는 obj.a를 꺼내온 것이기에 더이상 obj 객체의 메서드가 아니므로 this는 window를 가리킨다.

* 호출하는 시점에 함수가 객체의 메서드 인지 그냥 함수인지가 중요

var a2 = obj.a;
a2();

//window 를 출력

 

=> 어떻게 함수를 호출하느냐에 따라 이렇게 this가 가리키는 것이 변하므로, 명시적으로 this를 바꾸는 함수 메서드가 존재한다 : bind, call, apply - 이 함수 메서드에 대해 따로 또 정리하겠다.

 

var obj2 = { c: 'd' };
function b(){
	console.log(this);
}

b();					//window 출력

//this가 obj2를 가리키도록 함수 메서드 실행
b.bind(obj2).call(); 	//obj2 출력 
b.call(obj2);			//obj2 출력
b.apply(obj2);			//obj2 출력

 

3) 생성자 함수의 this는 new 생성자로 생성된 인스턴스 자신을 가리킨다. (하지만, new 없으면 window 가리킴)

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

Person.prototype.sayHi = function (){
	console.log(this.name, this.age);
}

var marine = new Person('marine', 22);
marine.sayHi();
//marine 22 출력

 

4) ES6 화살표 함수안의 this는 상위 함수의 this를 가리키므로 유의해야 한다.

 

https://www.zerocho.com/category/JavaScript/post/5b0645cc7e3e36001bf676eb

(JavaScript) 자바스크립트의 this는 무엇인가?