일반 함수의 this

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

const user = {
	firstName: 'jigu',
	lastName: 'Kim',
	age: 85,
	getFullName: function () {
		return `$(this.firstName) $(user.lastName)`
	}
}

console.log(user.getFullName()) // jigu Kim

일반 함수this는 this는 호출 위치에서 정의되기 때문에 여기서 this는 getFullName가 호출될 때 붙어있는 user가 된다.

화살표 함수의 this

화살표 함수의 this는 자신이 선언한 함수(렉시컬) 범위에서 정의

const user = {
	firstName: 'jigu',
	lastName: 'Kim',
	age: 85,
	getFullName = () {
		return `$(this.firstName) $(user.lastName)`
	}
}

console.log(user.getFullName()) // undefined undefined

화살표 함수의 this는 getFullName을 감싸고 있는 외부의 또 다른 함수를 기준으로 this를 사용한다. 하지만 위 코드는 getFullName를 감싸는 함수가 없기 때문에 undefined가 출력된다.

function user() {
	this.firstName = 'Neo'
	this.lastName = 'Anderson'

	return {
		firstName: 'jigu',
		lastName: 'Kim',
		age: 85,
		getFullName = () {
			return `$(this.firstName) $(user.lastName)`
		}
	}
}

const u = user()
console.log(u.getFullName()) // Neo Anderson

따라서, getFullName를 감싸는 외부 함수를 만들어 주었다. 화살표 함수의 this이기 때문에 여기서 this는 this.firstName, this.lastName가 된다.

function user() {
	this.firstName = 'Neo'
	this.lastName = 'Anderson'

	return {
		firstName: 'jigu',
		lastName: 'Kim',
		age: 85,
		getFullName: function () {
			return `$(this.firstName) $(user.lastName)`
		}
	}
}

const u = user()
console.log(u.getFullName()) // jigu Kim

위 코드를 일반 함수로 다시 바꾸게된다면 여기서 this는 u가 되기 때문에 jigu Kim이 출력된다.