javascript - this 与函数的强制绑定(bind)

Question

我刚刚浏览了 jBox.js 的代码，发现了以下代码行:

jQuery(document).on('keyup.jBox-' + this.id, function(ev) {
    (ev.keyCode == 37) && this.showImage('prev');
    (ev.keyCode == 39) && this.showImage('next');
}.bind(this));

看看代码 HERE ，这家伙似乎强制将函数与 this 的值绑定(bind)，我对这种模式有一些疑问。

• 这是某种设计模式吗？

• 作者试图通过将大多数方法与 this 绑定(bind)来实现什么目的？

• 例如上面的代码片段，作者试图通过将函数与 this 绑定(bind)来实现什么目的。 (我的猜测是，bind 的功能与 jQuery 的 $.proxy 类似？在新函数定义中维护 this 的值。)。

Answer 1

在您显示的代码中，如果您删除了 .bind(this)调用，然后this keyup.jBox-内处理程序将被设置为触发事件的 DOM 节点。不过，作者显然想要 this等于 this是(可能是 jBox 实例？)在创建处理程序本身的位置。

我不知道我是否会认为这是一种“设计模式”，它只是一种语言功能，允许作者强制执行this正是他们想要的，无论函数本身是如何调用的。

My guess is bind is functioning similar to jQuerys $.proxy here?

是的，非常相似。

快速示例:

function Person(name) {
    this.name = name;
    this.greet = function() {
        console.log('Hello, my name is ' + this.name);
    };
};

var tenali = new Person('Tenali');
tenali.greet();
// > Hello, my name is Tenali

太好了，这有效，因为作为作者，我希望您始终以 <person-instance>.greet() 的形式访问它。 。但是，如果有人打破这个假设会发生什么:

var jeremy = new Person('Jeremy');
var greet = jeremy.greet;
greet();
// > Hello, my name is undefined

显然没有按预期工作，因为现在 greet()被作为普通的 ol' 函数调用，完全独立于 jeremy作为上下文目标(在 JavaScript 中通常通过用于调用方法的 . 符号来推断)。

现在，作为Person的消费者例如，您仍然可以强制 this成为jeremy再次使用 .call() 或 .apply() :

var jeremy = new Person('Jeremy');
var greet = jeremy.greet;
greet.apply(jeremy);
// > Hello, my name is Jeremy

...这很好，但不太优雅。因此，为了让事情变得更轻松，我可以强制 this成为我想要的样子，如下所示:

function Person(name) {
    this.name = name;
    this.greet = function() {
        console.log('Hello, my name is ' + this.name);
    }.bind(this);
};

现在，如果我们回到前面的示例，我们将看到它按预期工作，因为我已经“绑定(bind)”了 greet()已将函数添加到 Person 实例:

var jeremy = new Person('Jeremy');
var greet = jeremy.greet;
greet();
// > Hello, my name is Jeremy