call
为何使用 call? 当我们期望从一个对象借用某个函数,并将其运用到另一个对象上时,就会用到 call 。
call 是什么? call 是一种能让不同对象使用某个函数的手段,就好像该对象原本就具备这个函数。
call 怎样运作? 从一个对象获取一个函数,然后用另一个对象去调用它,并向函数表示:“嘿,把这个其他对象当作你的 this 。”
示例: 设想您有两个朋友,小敏和小刚。小敏清楚如何进行自我介绍,但小刚不了解。您能够借助小敏的方式来协助小刚。
const alice = {
name: 'Alice',
introduce: function(greeting) {
console.log(`${greeting}, my name is ${this.name}`);
}
};
const bob = { name: 'Bob' };
alice.introduce.call(bob, 'Hello'); // 输出: Hello, my name is Bob
apply
为何使用 apply? 我们使用 apply 的原因和 call 相同,只不过是在想要以数组形式传递参数的时候。
apply 是什么? apply 与 call 相似,但它接收的是数组形式的参数,而非单个的参数。
apply 怎样运作? 从一个对象获取一个函数,然后用另一个对象去调用它,并把参数以数组的形式给出。
示例: 设想您想要介绍小刚,但这次您想要同时说“Hello”和“Nice to meet you”。
alice.introduce.apply(bob, ['Hello', 'Nice to meet you']); // 输出: Hello, my name is Bob
bind
为何使用 bind? 当我们想要创建一个始终以特定对象作为 this 的新函数时,就会用到 bind 。
bind 是什么? bind 会创建一个新的函数,这个函数在被调用时会记住哪个对象应当是 this 。
bind 怎样运作? 您创建一个函数的新版本,这个版本始终使用相同的 this 值。
示例: 设想您想要稍后协助小刚进行自我介绍,并且期望保证他每次都能以正确的方式进行。
const bobIntroduce = alice.introduce.bind(bob);
bobIntroduce('Hi'); // 输出: Hi, my name is Bob
bobIntroduce('Hey there'); // 输出: Hey there, my name is Bob
用一个简单的故事总结 想象您有一个叫做玩偶的会说话的玩具,它能够说话。玩偶属于小敏,并且它能够说出小敏的名字。您还有另一个属于小刚的玩具,但它不知道如何说话。
call :您告诉玩偶,“用您的声音说出小刚的名字”,然后它说:“Hello, my name is Bob.”
apply :您告诉玩偶,“用您的声音说出小刚的名字以及 'Nice to meet you' ”,然后它说:“Hello, my name is Bob. Nice to meet you.”
bind :您创建一个新的玩偶版本,它始终清楚自己在谈论小刚。每当您让这个新玩具说话时,它都会说:“Hi, my name is Bob.” 这些神奇的会说话的玩具就如同 JavaScript 中的函数,而 call 、apply 和 bind 能够帮助您控制哪个玩具在说话!