我已经知道apply和call是类似的函数,它们设置this(函数的上下文)。

区别在于我们发送参数的方式(manual vs array)

问题:

但是什么时候应该使用bind()方法呢?

var obj = {
  x: 81,
  getX: function() {
    return this.x;
  }
};

alert(obj.getX.bind(obj)());
alert(obj.getX.call(obj));
alert(obj.getX.apply(obj));

jsbin


当前回答

当我们想要分配一个具有特定上下文的函数时,应该使用Bind函数。

var demo = {
           getValue : function(){ 
             console.log('demo object get value       function') 
            }
           setValue : function(){  
              setTimeout(this.getValue.bind(this),1000)           
           }
 }

在上面的例子中,如果我们调用demo.setValue()函数并传递这个。getValue函数,那么它不会调用demo。setValue函数,因为setTimeout中的this指向窗口对象,所以我们需要将演示对象context传递给this。getValue函数使用bind。这意味着我们只是将demo对象的上下文传递给function,而不是实际调用function。

希望你能理解。

更多信息请参考 Javascript绑定函数详细了解

其他回答

我之前创建了函数对象、函数调用、call/apply和bind之间的比较:

.bind允许您现在设置this值,同时允许您在将来执行该函数,因为它返回一个新的函数对象。

最简单形式的答案

调用函数并允许您逐个传入参数 一个。 Apply调用函数并允许传入参数 作为一个数组。 Bind返回一个新函数,允许传入 此数组和任意数量的参数。


应用、调用和绑定示例

Call

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

say.call(person1, 'Hello'); // Hello Jon Kuperman
say.call(person2, 'Hello'); // Hello Kelly King

应用

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say(greeting) {
    console.log(greeting + ' ' + this.firstName + ' ' + this.lastName);
}

say.apply(person1, ['Hello']); // Hello Jon Kuperman
say.apply(person2, ['Hello']); // Hello Kelly King

Bind

var person1 = {firstName: 'Jon', lastName: 'Kuperman'};
var person2 = {firstName: 'Kelly', lastName: 'King'};

function say() {
    console.log('Hello ' + this.firstName + ' ' + this.lastName);
}

var sayHelloJon = say.bind(person1);
var sayHelloKelly = say.bind(person2);

sayHelloJon(); // Hello Jon Kuperman
sayHelloKelly(); // Hello Kelly King

什么时候使用

Call和apply是可以互换的。只需要决定发送一个数组还是一个以逗号分隔的参数列表更容易。

我总是记住哪个是哪个,记住Call是为逗号(分隔列表)和Apply是为数组。

Bind有点不同。它返回一个新函数。Call和Apply立即执行当前函数。

Bind对很多事情都很有用。我们可以像上面的例子一样使用它来curry函数。我们可以使用一个简单的hello函数,并将其转换为helloJon或helloKelly。我们也可以将它用于像onClick这样的事件,我们不知道它们什么时候会被触发,但我们知道我们想让它们拥有什么上下文。

参考:codeplanet.io

当我们想要分配一个具有特定上下文的函数时,应该使用Bind函数。

var demo = {
           getValue : function(){ 
             console.log('demo object get value       function') 
            }
           setValue : function(){  
              setTimeout(this.getValue.bind(this),1000)           
           }
 }

在上面的例子中,如果我们调用demo.setValue()函数并传递这个。getValue函数,那么它不会调用demo。setValue函数,因为setTimeout中的this指向窗口对象,所以我们需要将演示对象context传递给this。getValue函数使用bind。这意味着我们只是将demo对象的上下文传递给function,而不是实际调用function。

希望你能理解。

更多信息请参考 Javascript绑定函数详细了解

在以后调用该函数时使用bind。apply和call都调用函数。

Bind()还允许将附加的参数挂在args数组上。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

bind:它将函数与所提供的值和上下文绑定,但不执行函数。要执行函数,需要调用函数。

调用:它使用提供的上下文和参数执行函数。

apply:它使用提供的上下文和执行函数 参数作为数组。