This

함수를 호출하는 객체입니다.

this가 존재하는 이유

this를 이용하면 함수를 다른 객체에서도 재사용 할 수 있습니다.

ex1)
const myDish = {
	name: "pizza",
    menu: function(){
    	console.log(`today's menu is ${myDish.name}`)
    }
}

myDish.menu(); // "today's menu is pizza"

위와 같은 객체가 있을 때 menu 함수는 myDish 변수 이름이 수정될 경우나, menu 함수 자체를 다른 객체에서 사용하고 싶은 경우 사용이 불편

ex2)
function menuFnc(){ // 재사용 가능
	console.log(`today's menu is ${this.name}`)
}

const myDish = {
	name: "pizza",
    menu: menuFnc
}
myDish.menu() // "today's menu is pizza"

const myDish = {
	name: "sandwich",
    menu: menuFnc
}
myDish.menu() // "today's menu is sandwich"

this를 제어해 보기

일반적으로 this의 값은 자동으로 할당되지만, 상황에 따라 제어할 수 있어야 합니다.

call([this], ...args)

call 메서드는 this의 값을 바꿀 수 도 있도, 함수를 실행할 때 사용할 인수도 전달할 수 있습니다.

function menuFnc(item){
	console.log(`today's menu is ${item} ${this.name}`)
}

const myDish = {
	name: "pizza"
}

menuFnc.call(myDish, "potato") // "today's meue is potato pizza"

apply([this], [[...args]])

apply 메서드는 함수를 실행할 때 인수를 배열로 묶어 한 번에 전달 합니다.

function menuFnc(...items){
	items.forEach(function(item){
	    console.log(`today's menu is ${item} ${this.name}`)
    },this)
	
}

const myDish = {
	name: "pizza"
}

menuFnc.apply(myDish, ["potato","mushroom"])
//"today's meue is potato pizza"
//"today's meue is mushroom pizza"

bind([this], [...args])

bind 메서드는 es5에서 추가, this 값을 어디서 사용하든 호출 객체가 바뀌지 않게 고정시켜 버릴 수 있습니다.

function menuFnc(item){
	console.log(`today's menu is ${item} ${this.name}`)
}

const myDish = {
	name: "pizza"
}

const yourDish = {
	name: "pizza2"
}

const myDishMenuFnc = menuFnc.bind(myDish) // this 가 myDish로 고정된 함수 생성됨

myDishMenuFnc("potato") // "today's meue is potato pizza"

yourDish.menu = myDishMenuFnc; // yourDish = { name: "pizza2" , menu:myDishMenuFnc}

yourDish.menu("mushroom") // "today's meue is mushroom pizza"

화살표 함수와 this

화살표 함수의 this는 일반적인 this처럼 함수를 호출한 객체를 할당하지 않고, 바로 상위 스코프의 this를 할당 합니다. 실행이 아닌! 생성될 때 this

function menuFnc(...items){
	//여기 환경의 this == myDish
	items.forEach(item => { // 화살표 함수의 상위 스코프의 this는?
	    console.log(`today's menu is ${item} ${this.name}`)
    })
	
}

const myDish = {
	name: "pizza"
}

menuFnc.apply(myDish, ["potato","mushroom"])
//"today's meue is potato pizza"
//"today's meue is mushroom pizza"

정리

• this는 함수를 호출하는 객체를 의미합니다.
• call과 apply는 this에 할당되는 객체를 지정할 수 있습니다.
• bind는 this에 할당되는 객체를 고정! 시키는 새로운 함수를 생성
• 화살표 함수에서 this는 상위 스코프의 객체를 할당 받습니다.