자바스크립트 this 키워드

먼저 mdn문서에서 정의를 확인해보자.

 

 

 

JavaScript에서 함수의 this 키워드는 다른 언어와 조금 다르게 동작합니다.
또한 엄격 모드와 비엄격 모드에서도 일부 차이가 있습니다.

대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다.
실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다.
ES5는 함수를 어떻게 호출했는지 상관하지 않고 this 값을 설정할 수 있는 bind 메서드를 도입했고,
ES2015는 스스로의 this 바인딩을 제공하지 않는 화살표 함수를 추가했습니다
(이는 렉시컬 컨텍스트안의 this값을 유지합니다).

 

 

 

---

 

 

 

 

 

대부분 this키워드는 함수를 호출하는 방법에 의해 결정된다. 이 부분이 핵심이다.

 

결국 누가 호출했냐를 알려주는 키워드가 this 이다.

글로벌에서 호출하면, this는 window객체이고, 특정 객체안에서 호출하면, this는 특정 객체이다.

버튼에서 호출한다면??  =>  this는 버튼이다.

 

let someone = {
	name: "김지용",
    function : function (){
    	console.log(this)
    }
 }
 
 
 someone.function();
 // 여기는 someone 객체인 { name: "김지용", function: f} 가 찍힌다.
 
 let global = someone.function;
 global();
 // 여기는 글로벌스코프에서 함수가 실행되었기 때문에, 콘솔에 window객체가 찍힌다.

 

 

 

 

 

그렇다면, bind 메소드는 어떤 역할을 할 수 있을까?

 

let someone = {
	name: "김지용",
    function : function (){
    	console.log(this)
    }
 }

 let global = someone.function;
 global();
 // 여기는 글로벌스코프에서 함수가 실행되었기 때문에, 콘솔에 window객체가 찍힌다.
 
 
 let bindfunction = global.bind(someone)
 bindfunction();
 // 원래라면, window객체가 찍히겠지만 bind 메소드에 someone을 넣었기 때문에 someone이라는 객체가 찍힌다.

this 키워드는 bind 의 첫 번째 매개변수로 고정이 된다.

 

 

하지만, 화살표함수에서는 예외가 존재한다.

 

 

 

화살표함수가 가지는 특징은 아래와 같다.

• 화살표 함수는 익명 함수로만 만들 수 있습니다.
• 화살표 함수는 생성자로 사용할 수 없습니다.
• 화살표 함수는 스스로의 this, argument 를 가지지 않습니다.
• 함수가 정의된 스코프에 존재하는 this 를 가리킵니다.
• 화살표 함수는 생성될 때 this 가 결정됩니다.
• 화살표 함수가 어떻게 사용되건, 호출되건, this 는 바뀌지 않습니다.

 

 

화살표함수에서의 this는 렉시컬 스코프를 가지게 된다.

즉 function 함수와 차이점은 함수를 어디서 호출한 지가 아닌, 어디에서 선언하였는 지에 따라 결정된다는 것이다.

 

 

 

 

 

 

 

아래 예시를 살펴보자. 기존 코드에서 function 함수를 화살표함수로 바꾸었다.

 

 

 

 

화살표 함수는 항상 상위 스코프의 this를 상속받습니다.

let someone = {
	name: "김지용",
    function :  () => {
    	console.log(this)
    }
 }

//window 객체가 찍힌다.  상위스코프의 this를 참조하기 때문에.
someone.function()

 

 

 

 

화살표 함수는 bind(), call()과 같은 메서드로 this를 바인딩 할 수 없습니다.

let someone = {
	name: "김지용",
    function :  () => {
    	console.log(this)
    }
 }

 let global = someone.function;
 global();
 // 여기는 글로벌스코프에서 함수가 실행되었기 때문에, 콘솔에 window객체가 찍힌다.
 
 
 let bindfunction = global.bind(someone)
 bindfunction();
 // 원래라면, bind메소드를 통해 someone 객체가 찍혀야 하지만 화살표함수는 window객체가 찍힌다.

 

 

 

 

 

function 문법에서 this 는 함수가 어떻게 실행되는가에 따라서 동적으로 바뀌게 됩니다.

화살표 함수의 경우, 화살표 함수가 정의된 곳의 문맥에 의해서 this 가 정의됩니다.