FE/Javascipt

[Javascipt] This

따봉치치 2023. 7. 18. 16:52

 

This


 

일반 함수의 this는 호출 위치에서 정의

화살표 함수의 this는 자신이 선언된 함수 범위에서 정의

즉, 화살표 함수는 자신의 this를 가지고 있지 않고 자신을 감싸고 있는 일반 함수의 this를 가지게 된다.

 

  • 일반함수
const user = {
	firstName : 'Potter',
	lastName : 'Harry',
	age : 18,
	getFullName : Function() {
		return `${this.lastName} ${this.firstName}`
	}
}

console.log(user.getFullname()) // Harry Potter
  • 화살표 함수
function user() {
	this.fisrtName : 'Leo'
	this.lastName : 'D.'

	return {
		firstName : 'Potter',
		lastName : 'Harry',
		age : 18,
		getFullName : () => {
			return `${this.lastName} ${this.firstName}`
		}
	}
}
const u = user();
console.log(u.getFullname()) // D. Leo

해당 화살표 함수의 this 키워드는 현재 함수를 감싸고 있는 외부 함수를 참조함