何时在JS中使用.bind()

Question

有一个关于如何使用博客吨和职位bind()以及它是如何不同于call()和apply(),但目前还非常小的例子,当或为什么我应该使用bind()

我发现给出的许多例子非常罕见,例如:

"use strict";

function Person(firstName, lastName){
  this.firstName = firstName
  this.lastName = lastName
}

Person.prototype.say = function(message){
  return '[' + this + ']: ' + this.firstName + ' ' + this.lastName + ' said: "' + message + '"'
}

Person.prototype.toString = function(){
  return '[Person]'
}

moe = new Person("Mo", "El")


func = moe.say.bind(moe)

console.log(func("asdasda"))

我不知道什么时候我想让函数等于某个其他变量并使用该变量而不是原始函数,更不用说该变量等于Person对象实例的绑定.

有什么好例子吗？

Answer 1

简而言之,.bind()返回一个新函数,该函数在调用时将使用特定this值调用原始函数,并且(可选)将某些新参数预先填充到参数列表中.

.bind()在需要传递回调时使用(例如某种函数引用),但是您希望调用者使用特定this值调用函数.当您的函数实际上是一个方法并且您希望将this值设置为特定对象时,这是最常见的,因此该方法将对该特定对象进行操作.如果您不在.bind()这些情况下使用,那么该this值将由调用者(而不是您)确定,如果调用者没有专门设置它,它将最终成为全局对象或(在严格模式下)undefined.如果您传递的是一个依赖于特定值的方法this来完成其工作,那么它将无法正确使用错误的this值.

因此,如果要控制this调用回调的值,可以使用.bind().在内部,.bind()只需创建一个小的存根函数,只需记住this传递它的值,并调用函数.apply()来设置this值. .bind()这不是魔术,因为它也可以手动完成.

.bind()还可以向函数添加额外的参数,因此,如果要添加超出回调的普通调用者使用的参数,您也可以指定那些参数.bind().它创建一个存根函数,它将添加这些额外的参数并设置this值.

假设您有自己的Person对象,并且想要将按钮挂钩到.say()特定Person对象的方法.

<button id="talk">Talk</button>

而且,如果你试过这个javascript:

"use strict";
var bob = new Person("Bob", "Smith");
document.getElementById("talk").addEventListener("click", bob.say);

你会发现这个say()方法被调用了,但它会遗漏两件事.它将缺少正确的this引用(将被设置为button对象,因为这是addEventListener调用其回调的方式)并且它将缺少say(message)期望的参数.

因此,您可以使用自己的存根函数自行解决此问题,该函数bob.say()使用所有正确的参数进行调用:

"use strict";
var bob = new Person("Bob", "Smith");
document.getElementById("talk").addEventListener("click", function(e) {
    bob.say("Hello");
});

或者,您可以使用.bind():

"use strict";
var bob = new Person("Bob", "Smith");
document.getElementById("talk").addEventListener("click", bob.say.bind(bob, "Hello"));

没有魔法.bind().它可以在javascript中完全模拟.事实上,这是来自MDN的polyfill:

if (!Function.prototype.bind) {
  Function.prototype.bind = function(oThis) {
    if (typeof this !== 'function') {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
    }

    var aArgs   = Array.prototype.slice.call(arguments, 1),
        fToBind = this,
        fNOP    = function() {},
        fBound  = function() {
          return fToBind.apply(this instanceof fNOP && oThis
                 ? this
                 : oThis,
                 aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}

由于所有错误检查,这可能看起来比它更复杂,但它实际上只返回一个新函数,它结合了两组参数,然后用特定this值调用原始函数.

Answer 2

这可能是从实际意义上解释它的最简单的方法。由于大多数答案都给出了理论定义和解释，我将展示一个简单的用例。当您希望被调用的函数具有与默认值不同的 this 值时，您可以使用绑定。

var NS = {
  user     : "self",
  getUser  : function() { return this.user; }
};

var CLOSURE = NS.getUser;

// error user is undefined, "this" in that context refers to the global object, "window"
console.log(CLOSURE());

// Bind the function call to NS object
console.log(CLOSURE.bind(NS)());

http://jsfiddle.net/ev3z3td3/2/