# this

⭐️this keyword는 뜻이 여러개(3~4개) 있다.

1번 의미. 해당 함수를 담고 있는 상위 object

함수와 Object에서 사용할 때

2번 의미. instance

constructor에서 사용할 때

3번 의미. e.CurrentTarget

event listener에서 사용할 때

1. 함수와 Object에서 사용할 때

큰 의미 : 해당 함수를 담고 있는 상위 object

• 아래 1,2번의 의미는 사실상 동일하다.
  
  

1번 의미 ) window

그냥 쓰거나 일반 함수 안에서 쓰면 window를 의미한다.
window : 기본 함수들의 수납공간인 global object.
global object : 전역변수 보관소

ex)

console.log(this)

ex)

function 함수명() {
console.log(this);
}

실행 결과 : window

함수나 변수를 전역공간에서 만들면 window object에 보관한다.

• JS 코드 자체가 큰 object 안에서 작성된다고 봐도 무방함.
• 함수( ) == window.함수( ) => 같은 의미!

💡참고) undefined

strict mode일 때, 일반함수 내에서 쓰면 undefined를 의미한다.
자바스크립트 strict mode : 'use strict'

ex)

function 함수명() {
console.log(this);
}

실행 결과 : undefined

2번 의미 ) 상위 object

object 내 함수(= 메서드) 안에서 쓰면 그 함수를 가진 상위 object를 의미한다.

ex)

var obj = {
	data : "kim",
    func : function(){
    	console.log(this)
    }
}
obj.func();

실행 결과 : {data: "kim", func : f}

⚠️ 유의 : 상위 o, 최상위 x

만약 object1 > object2 > function 일 때, function이 가리키는건 함수 바로 위에 있는 object2이다.

⭐️ 중요) 상위 this 값

object 내 함수를 arrow function으로 작성하면 함수 밖에 있던 this 값을 그대로 쓴다.

ex)

var obj = {
	data : "kim",
    func : () => {
    	console.log(this)
    }
}
obj.func();

실행 결과 : 상위 this가 가지고 있는 this 값. (obj 안나옴)

arrow function 특징

내부의 this 값을 변화시키지 않는다.
외부 this값 그대로 "재사용" 가능!

• 함수 기본 문법 : function( ){ }
• 함수 신 문법(arrow function) : ( ) => { }
  오브젝트 안에 함수 넣을 때 신 문법: key와 function을 생략하고 써도 된다.

var obj = {
	data : "kim",
    함수명(){
    	console.log(this)
    }
}

2. event listener와 constructor에서 사용할 때

3번 의미 ) instance

constructor 안에서 쓰면 instance를 의미한다.
constructor : 오브젝트를 반복해서 생성하는 기계
instance : 새로 생성되는 object

ex)

function constructor() {
	this.key = value // instance
}

참고 ) constructor 에서 오브젝트 생산하는 법

var 생산 = new constructor();

4번 의미) e.currentTarget

event listener 안에서 쓰면 e.currentTarget을 의미한다.
e.currentTarget : 지금 이벤트가 동작하는 곳

HTML

<button id="Btn"></button>

JS

document.getElementById('Btn').addEventListener('click', 
function(e){ 
	this; // == e.currentTarget
})

실행 결과 : <button id="Btn"></button>

📌 Case study

Case study 1) 아래의 this는 어떤 의미인가?

document.getElementById('Btn').addEventListener('click', 
function(e){ 
	var arr = [1,2,3];
    arr.forEach(function(a) {console.log(a)}) // console 창에 1, 2, 3 출력됨.
    arr.forEach(function(a) {console.log(this)})
})

정답 : 1번 의미
forEach 내부 함수가 일반 함수이므로 window 출력됨.

Case study 2) 아래 각각의 this는 어떤 의미인가? (오브젝트 내에서 콜백함수를 쓰는 경우)

var obj = {
	name : ['김', '이', '박'],
	함수 : function(){
    	console.log(this); // Q1
    	obj.name.forEach(function(){
        	console.log(this); // Q2
        })
    }
}
obj.함수();

정답 : Q1은 오브젝트 안의 함수에 this가 있으므로 2번 의미. 즉 obj를 출력한다. Q2는 forEach 내부 함수가 일반 함수이므로 1번 의미. 즉, window를 출력한다.

Case study 3) arrow function 안에서의 this(=Q2)는 어떤 의미인가?

var obj = {
	name : ['김', '이', '박'],
	함수 : function(){
    	console.log(this); // Q1
    	obj.name.forEach(() => 
        	console.log(this); // Q2
        )
    }
}
obj.함수();

정답 : object 안의 함수에 arrow function을 쓰는 경우, 상위 this 값을 그대로 가져온다. 상위 this가 Q1이므로 Q1의 값인 obj를 출력한다.

출처 : 코딩애플 | 매우쉽게 이해하는 JavaScript 객체지향 & ES6 신문법