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"

これを制御しようとする

通常、この値は自動的に割り当てられますが、制御できる必要があります.

call([this], ...args)

callメソッドでは、この値を変更したり、関数を実行するときに使用するパラメータを渡したりできます.

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メソッドはes 5に追加でき、この値をどこで使用しても変更せずに呼び出しオブジェクトを固定できます.

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のように呼び出し関数のオブジェクトを指定するのではなく、親のscopeに直接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"

整理する

は呼び出し関数のオブジェクトを表す.

呼び出しおよびアプリケーションは、この操作に割り当てられたオブジェクトを指定することができる.

bindは、割り当てられたオブジェクトをロックします!新しい関数の作成

矢印関数では、親ミラーにオブジェクトが割り当てられます.