理解 JavaScript 绑定 ()

总结：

       函数绑定可能是你开始使用 JavaScript 时最不关心的问题，但是当你意识到你需要一个解决方案来解决如何在另一个函数中保持this的上下文的问题时，你可能没有意识到你实际上需要的是 Function.prototype.bind()。

我们实际上想要解决什么问题？

 

var myObj = {

    specialFunction: function () {

    },

    anotherSpecialFunction: function () {

    },

    getAsyncData: function (cb) {
        cb();
    },

    render: function () {
        var that = this;
        this.getAsyncData(function () {
            that.specialFunction();
            that.anotherSpecialFunction();
        });
    }
};

myObj.render();

如果我们将函数调用保留为this.specialFunction()，那么我们会收到以下错误：

Uncaught TypeError: Object [object global] has no method 'specialFunction'

我们需要保留myObj调用回调函数时引用的对象的上下文。调用that.specialFunction()使我们能够维护该上下文并正确执行我们的函数。但是，这可以通过使用Function.prototype.bind().

让我们重写我们的例子：

render: function () {

    this.getAsyncData(function () {

        this.specialFunction();

        this.anotherSpecialFunction();

    }.bind(this));

}

 

我们刚刚做了什么？

好吧，.bind()只需创建一个新函数，该函数在调用时将其this关键字设置为提供的值。因此，我们将所需的上下文this（即myObj）传递给.bind()函数。然后，当回调函数被执行时，this引用myObj.

 

如果您有兴趣Function.prototype.bind()了解它的外观及其内部功能，这里有一个非常简单的示例：

Function.prototype.bind = function (scope) {
    var fn = this;
    return function () {
        return fn.apply(scope);
    };
}

这是一个非常简单的用例：

var foo = {
    x: 3
}

var bar = function(){
    console.log(this.x);
}

bar(); // undefined

var boundFunc = bar.bind(foo);

boundFunc(); // 3

我们创建了一个新函数，在执行时将其this设置为foo- 而不是全局范围，如我们调用bar();

浏览器支持

 

 正如您所看到的，不幸的Function.prototype.bind是，Internet Explorer 8 及以下版本不支持它，因此如果您尝试在没有后备的情况下使用它，则会遇到问题。

幸运的是，Mozilla 开发者网络是一个很好的资源，如果浏览器没有实现原生方法，它提供了一个坚如磐石的替代方案.bind()：

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;
  };
}

使用模式 

单击处理程序

一种用途是跟踪可能需要我们将信息存储在对象中的点击（或在点击后执行操作），如下所示：

var logger = {
    x: 0,
    updateCount: function(){
        this.x++;
        console.log(this.x);
    }
}

我们可以像这样分配点击处理程序，然后updateCount()在我们的logger对象中调用：

document.querySelector('button').addEventListener('click', function(){
    logger.updateCount();
});

但是我们不得不创建一个不必要的匿名函数来允许this关键字在updateCount()函数中正确存在。

这可以整理，像这样：

document.querySelector('button').addEventListener('click', logger.updateCount.bind(logger));

我们已经使用巧妙方便的.bind()函数来创建一个新函数，然后设置要绑定到logger对象的作用域。

设置超时

如果您曾经使用过模板引擎（例如 Handlebars），或者尤其是某些 MV* 框架（我只能从经验谈起 Backbone.js），那么您可能会意识到渲染模板时出现的问题，但是想在渲染调用后立即访问新的 DOM 节点。

假设我们尝试实例化一个 jQuery 插件：

var myView = {

    template: '/* a template string containing our <select /> */',

    $el: $('#content'),

    afterRender: function () {
        this.$el.find('select').myPlugin();
    },

    render: function () {
        this.$el.html(this.template());
        this.afterRender();
    }
}

myView.render();

您可能会发现它有效——但并非总是如此。这就是问题所在。这是一场激烈的竞赛：无论发生什么，先到达那里的人都会获胜。有时是渲染，有时是插件的实例化。

现在，有些人不知道，我们可以对setTimeout().

稍微重写一下，一旦 DOM 节点出现，我们就可以安全地实例化我们的 jQuery 插件：

//

    afterRender: function () {
        this.$el.find('select').myPlugin();
    },

    render: function () {
        this.$el.html(this.template());
        setTimeout(this.afterRender, 0);
    }

//

但是，我们将收到.afterRender()无法找到该函数的可信消息。

那么，我们所做的就是将我们.bind()的混合在一起：

//

    afterRender: function () {
        this.$el.find('select').myPlugin();
    },

    render: function () {
        this.$el.html(this.template());
        setTimeout(this.afterRender.bind(this), 0);
    }

//

现在，我们的afterRender()函数将在正确的上下文中执行。

使用 QUERYSELECTORALL 进行更整洁的事件绑定 

该DOM API一旦它包括这样的有用的方法，如显著改善querySelector，querySelectorAll以及classListAPI，仅举几例的很多。

但是，到目前为止，还没有真正的方法可以将事件以本机方式添加到 a NodeList中。所以，我们最终forEach从Array.prototype to 循环中窃取了函数，如下所示：

Array.prototype.forEach.call(document.querySelectorAll('.klasses'), function(el){
    el.addEventListener('click', someFunction);
});

不过，与我们的朋友一起，我们可以做得更好.bind()：

var unboundForEach = Array.prototype.forEach,
    forEach = Function.prototype.call.bind(unboundForEach);

forEach(document.querySelectorAll('.klasses'), function (el) {
    el.addEventListener('click', someFunction);
});

我们现在有一个整洁的方法来循环我们的 DOM 节点。

结论 

如您所见，()可以巧妙地包含javascript 绑定函数用于许多不同的目的，以及整理现有代码。希望本概述为您提供了需要添加.bind()到您自己的代码中的内容（如有必要！）并利用转换this.

 

查看原文