bind方法

bind() 方法返回一个新函数并允许传入一个 this 数组和任意数量的参数。

let p1 = {
  firstName: 'John',
  lastName: 'Smith'
};
let p2 = {
  firstName: 'Ann',
  lastName: 'Brown'
};
function sayWelcome() {
  console.log('Welcome ' + this.firstName + ' ' + this.lastName);
}
let sayWelcomeJohn = sayWelcome.bind(p1);
let sayWelcomeAnn = sayWelcome.bind(p2);
sayWelcomeJohn(); //Welcome John Smith
sayWelcomeAnn(); //Welcome Ann Brown

在上述三种方法中, bind() 的工作方式略有不同。
与立即执行当前函数的 call() 和 apply() 不同,bind() 返回一个新函数。
我们可以将 bind() 用于诸如 onClick 之类的事件,我们不知道它们何时会被触发,但我们知道所需的上下文。

JavaScript:bind() vs apply() 和 call()比较

this 所指的对象可以根据是否是全局对象、对象以及三种函数原型方法(即 bind、call 和 apply)的用法而有所不同。

call 方法

call() 方法使用给定的 this 值调用函数,并允许传入参数一个一个,用逗号分隔它们:

let p1 = {
  firstName: 'John',
  lastName: 'Smith'
};
let p2 = {
  firstName: 'Ann',
  lastName: 'Brown'
};
function sayWelcome(greeting) {
  console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}
sayWelcome.call(p1, 'Welcome'); //Welcome John Smith
sayWelcome.call(p2, 'Welcome'); //Welcome Ann Brown

apply方法

apply() 方法使用给定的 this 值调用函数,并允许将参数作为数组(或者类似数组的对象)传递。

let p1 = {
  firstName: 'John',
  lastName: 'Smith'
};
let p2 = {
  firstName: 'Ann',
  lastName: 'Brown'
};
function sayWelcome(greeting) {
  console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}
sayWelcome.apply(p1, ['Welcome']); //Welcome John Smith
sayWelcome.apply(p2, ['Welcome']); //Welcome Ann Brown

当第一个参数未定义或者为空时,使用数组展开语法可以获得类似的结果。

call() 和 apply() 方法是可以互换的。
在这两者之间进行选择取决于具体情况。
如果在数组中更容易发送,我们可以使用 apply() 或者 call() 作为逗号分隔的参数列表。

日期:2020-06-02 22:16:27 来源:oir作者:oir