자바스크립트 - this

this

어떠한 object를 가리키는 키워드

(java에서 this, python에서 self는 인스턴스 자기자신을 가리킨다.)

 

JavaScript의 함수는 호출도리 때 this를 암묵적으로 전달받는다.

JavaScript에서의 this는 일반적인 프로그래밍 언어에서의 this와 조금 다르게 동작한다. 

JavaScript는 같은 함수이더라도 해당 함수 호출 방식에 따라 this에 바인딩 되는 객체가 달라진다

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

 

 

1. 전역 문맥에서의 this

console.log(this) //window

전역 객체는 모든 객체의 유일한 최상위 객체 window를 가리킨다.

 

 

 

2. 함수 문맥에서의 this

함수의 this는 함수를 호출한 방법에 의해 결정된다.

 

- 단순 호출

const myfunc = function() {
	console.log(this)
    }
    
//브라우저
myfunc() //window

//Node.js
myfunc() //global

함수의 단순호출은 전역 객체를 가리킨다.

전역은 브라우저에서 window, Node.js는 global을 의미한다.

 

 

- Method (객체의 메서드로서)

const myobj = {
	data :1,
    myfunc(){
    	console.log(this) //myobj
        console.log(this.data) //1
    }
}

myobj.myfunc() //myobj

메서드로 선언하고 호출한다면, 객체의 메서드이므로 해당 객체가 바인딩된다.

 

 

- Nested (Function 키워드)

nested: 중첩

const myobj = {
	data :[1],
    myfunc(){
    	console.log(this) //myobj
        this.numbers.forEach(function (number){
        	console.log(number) //1
            console.log(this) //window
    	})
    }
}

myobj.myfunc() //myobj

forEach의 콜백함수에서의 this가 메서드를 가리키지 못하고 전역객체 window를 가리킨다.

단순호출 방식이기 때문이다.

이것을 해결하기 위해 화살표 함수 방식을 사용한다.

 

 

const myobj = {
	data :[1],
    myfunc(){
    	console.log(this) //myobj
        this.numbers.forEach((number) => {
        	console.log(number) //1
            console.log(this) //myobj
    	})
    }
}

myobj.myfunc() //myobj

메서드 안의 콜백함수는 화살표함수를 사용한다.

이전에 일반 function키워드와 달리 메서드의 객체를 잘 가리킨다.

화살표 함수에서 this는 자신을 감싼 정적범위로 자동으로 한단계 상위의 scope의 context를 바인딩한다.

화살표 함수는 호출의 위치와 관계없이 상위 스코프를 가리킨다.

함수 내의 함수 상황에서는 화살표 함수를 사용하는 것이 권장된다.

 

 

Lexial scope (Static scope)

함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정

대부분의 프로그래밍 언어에서 따르는 방식

 

 

function 키워드 / 화살표 함수 비교

 

 

 

 

addEventListner 와 this

const btn = document.querySelector('#btn')
btn.addEventListener('click',function(event){
	console.log(this) //<button id="btn"></button>
   	})
btn.addEventListener('click',event => {
	console.log(this) //window
   	})

addEventListener에서 콜백함수는 함수 안의 함수이지만 function 키워드 경우 호출한 대상(event.target)을 뜻한다. 

반면, 화살표 함수의 경우 상위 스코프를 지칭하기 때문에 this는 window객체가 바인딩 된다.

=> addEventListener의 콜백 함수는 function 키워드 사용하기!!