javascript中的call、apply、bind的区别

javascript中的call、apply、bind的区别

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 能够帮助您控制哪个玩具在说话!

转载请说明出处内容投诉
CSS教程网 » javascript中的call、apply、bind的区别

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买