为什么bind（）或apply（）在这里不起作用，而call（）起作用？

Question

拿我正在试验的这个非常简单的框架来说（这样我就可以更深入地学习JavaScript的函数原型。）

(function(){
var app = {
    ui: {
        app: document.querySelector('.app'),
        settings: document.querySelector('.settings'),
    },
    actions: 'click settings openSidebar'
    ,
    functions: {
        openSidebar: function(e){
            console.log(this); // <- expected value of this is 'app.ui'
        }
    },
    run: function(){
        var a1 = this.actions.split("\n");
        var a2 = this.actions.split(" ");

        var self = this;
        this.ui[a2[1]].addEventListener(a2[0], function(e){
            app.functions.openSidebar.call(self.ui,e);
        });
    }
};
app.run();
})();

这工作很棒。控制台的输出是：

对象{ui：对象，操作："单击设置openSidebar"，函数：对象，运行：函数}

但是，当我尝试这样做时：

var self = this;
this.ui[a2[1]].addEventListener(a2[0], function(e){
    app.functions.openSidebar(e);
}.bind(this));

在openSidebar（）中的this的上下文是openSidebar（又名bind没有效果）。控制台输出：

对象{openSidebar:function}

但是，当我尝试使用apply函数时，如下所示：

app.functions.openSidebar.apply(self.ui,e);

除了参数（e）没有通过之外，它工作正常（openSidebar中的这个是app.ui），因此e==未定义的。

下面是：

1.为什么在第一个示例中不绑定工作（根本不）？

2.为什么应用程序在不传递参数的情况下工作（e（事件））？

对于添加的布朗尼点数：

3.为什么电话会像预期的那样工作？

Answer 1

>

你需要这样做：

this.ui[a2[1]]. addEventListener（a2[0]，app.functions.openSidebar.bind（this））；

Bind返回一个新函数，其中包含手动设置的传递内容。因为您没有在右边的函数上使用bind，所以您在调用函数的左边使用app.functions调用函数，从今以后在调用函数中称为this！

>

Apply将参数作为数组，而不是命名参数。。。

我不能解释第三个，除非说电话就是这样工作的！

Answer 2

在第一个示例中，为什么不绑定工作？

它“有效”，只是没有达到你的期望。

在anon函数中，这实际上是bind设置的值。但是，当您随后调用也是对象属性的函数（functions.openSidebar）时，对于该调用，此自动绑定到函数内部的该对象（即此===函数）。来自父上下文的this的值永远不会在调用链中“继承”。

为什么应用程序在不传递参数的情况下工作（e（事件））？

因为apply试图通过将调用作为数组来从它自己的第二个参数e中取出调用的参数。这意味着首先检查其length属性；您的事件对象没有长度，因此apply获取生成的undefined值，并有效地表现为在空数组中传递。有关详细信息，请参见带注释的ES5参考。

为什么电话会像预期的那样工作？

这是一个奇怪的问题。为什么它不起作用？你在使用它，就像它应该被使用一样。