Javascript에서 this의 뜻

 

 

javascript 안에서 this는 4가지 정도의 의미를 가지고 있다.

 

1. window object

💡window : javascript의 기본 함수들이 들어있는 object이다

console.log(this);
//window object 출력

function 함수(){
   console.log(this);
}
함수();
//window object 출력

이렇게 아무것도 없이 this를 출력하면 window object를 뜻한다.

그런데 'use strict' 모드에서 출력을 하면 undefined가 나온다.

 

 

2. object안의 함수(메소드)에서의 this = 해당 메소드를 가지고 있는 object

var object = {
	data : 'kim',
    함수 : function(){
    	console.log(this);
    }
}
object.함수();
// object가 출력된다.

// arrow function 사용시
var object = {
	data : 'kim',
    함수 : () => {
    	console.log(this);
    }
}
object.함수();
// arrow function안에서의 this는 함수밖에 있던 this를 그대로 가져다 쓰는 특징이 있다. 
// 때문에 여기서는 최상위 this인 window를 출력한다.

 

📌 여기까지 봤을때 사실 1번과 2번의 this는 같은 개념이다. 자신을 포함시키고 있는 object를 가리키고 있기 때문이다.

javascritp 코드를 작성하면 기본적으로 window라는 object가 생성이 되면서 그 안에 함수를 저장한다.

 

3. constructor 안에서 this = 새로 생성되는 object(instance)

💡constructor : 비슷한 object를 많이 생성해야할때 사용하는 object추출 기계이다.

function constructor(이름){
	this.name = 이름;
}

var object = new constructor('kim');

console.log(object);
//{name : 'kim'}출력

 

4. 이벤트 리스너 안에서의 this = 이벤트가 동작하는 곳

document.getElementById('#button').addEventListener('click', function(e){
	console.log(this);
    console.log(e.currentTarget);
});
// 현재 이벤트 리스너가 부착이 되어 있는 #button을 가리킨다. 
// this와 e.currentTarget이 같은 의미가 된다.