【通俗易懂的案例】带你掌握JavaScript的call()、apply()、bind()三者的区别

某天，你下班回到家里，母亲跑过来对你说：今晚你想吃“红烧肉”、“鱼香茄子”还是“客家酿豆腐”?

var menu = {
	food1: "红烧肉",
	food2: "鱼香茄子",
	food3: "客家酿豆腐"
}
var person = {
	eat: function(name, type) {
		console.log(`指向类型：${type}`)
		console.log(`${name}吃${this}`);
		console.log("this指向 →", this);
	}
}

① 我想到都没有想，立马回答道：当然是红烧肉了。于是母亲立马就给我做了一道红烧肉，这天晚上我吃的津津有味。

person.eat.call(menu.food1, "YBQ", "call");

// 【输出结果】

指向类型：call

YBQ吃红烧肉

this指向 → String {"红烧肉"}

② 家里已经连续3天吃鱼香茄子，母亲都要吃吐了，于是我不好意思的开口道：今晚我还是想吃鱼香茄子。母亲一听无奈的进入厨房给我做了一道鱼香茄子，开心到飞起。

person.eat.apply(menu.food2, ["YBQ", "apply"]);

// 【输出结果】

指向类型：apply

YBQ吃鱼香茄子

this指向 → String {"鱼香茄子"}

③ 你本想开口说客家酿豆腐，但是一想到老妈的厨艺，于是便说：今晚我下厨做客家酿豆腐吧。老妈一听当然很同意，于是坐在沙发上刷起了抖音，而你却苦逼的走进厨房忙碌了起来。

var doing = person.eat.bind(menu.food3, "YBQ", "bind");

doing(); // 执行函数

// 【输出结果】

指向类型：bind

YBQ吃客家酿豆腐

this指向 → String {"客家酿豆腐"}

从上述的三个案例中，我们不难发现：bind、call、apply均可以改变当前作用域的this指向所传递的第一个参数，主要不同之处在于：call和apply绑定是立即执行，但是只能绑定一次。而bind绑定虽然需要手动执行，但是可以重复执行，无需再次绑定。除此之外，剩下的只是一些外表形式上的区别。

需要注意的是：如果第一个参数为null或undefined时，this指向默认全局对象，也就是Window对象。