[JavaScript] Arrow Function and 'this'

const person = {
    firstName : 'Taeny',
    lastName : 'Kim',
    fullName : function(){
        `${this.firstName} ${this.lastName}`
    }
}

여기서 this가 person을 가르키니까 Taeny Kim의 값을 얻을 수 있다.

 

 

const person = {
    firstName : 'Taeny',
    lastName : 'Kim',
    fullName : function() => {
        `${this.firstName} ${this.lastName}`
    }
}

화살표 함수 안에 있는 this 키워드는 함수가 만든 범위를 가리킨다.  즉, 윈도우 객체를 가리킨다.

 

 

const person = {
    firstName : 'Taeny',
    lastName : 'Kim',
    fullName : function() => {
        `${this.firstName} ${this.lastName}`
    }
    shoutName: function(){
        setTimeout(function(){
        	console.log(this.fullName())
        }, 3000
    }
}

결과는 TypeError: this.fullName is not a function 가 뜬다. 

setTimeout은 윈도우 객체의 메서드이다.  윈도우 객체를 내포하고 있어서 보이지 않는다.

 

 

const person = {
    firstName : 'Taeny',
    lastName : 'Kim',
    fullName : function() => {
        `${this.firstName} ${this.lastName}`
    }
    shoutName: function(){
        setTimeout(function() => {
        	console.log(this.fullName())
        }, 3000
    }
}

화살표 함수로 변경시 this키워드가 person 객체를 가리켰다. 이름 전체를 호출했음..

 

화살표 함수 안에 있는 this 키워드는 함수가 만든 범위에 상속되는 this 키워드 값과 같다.

 

일반 함수와 달리 화살표 함수에서 this 키워드는 다르게 작동한다.