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的值，我对这个模式有几个问题。

这是某种设计模式吗？
作者试图通过将大多数方法绑定到this来实现什么？
例如，使用上面的代码片段，作者试图通过将函数与this绑定来实现。（我的猜测是绑定功能类似于jQuerys $ .proxy吗？在新函数定义中维护它的值。）。

Answer 1

在您显示的代码中，如果您删除了.bind(this)调用，则this处理程序中的keyup.jBox-将设置为触发事件的DOM节点。但是，作者显然希望this在创建处理程序本身时等于this（可能是jBox实例？）。

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

我的猜测是绑定功能类似于jQuerys $ .proxy吗？

是的，它非常相似。

快速示例：

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分离为上下文目标（通常在{{1用于调用方法的表示法。）

现在，作为.个实例的使用者，您仍然可以使用.call()或.apply()再次强制Person成为this：

jeremy

......这很好，但不是很优雅。所以，为了让你更容易，我可以改为强制 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); };函数“绑定”到Person实例：

greet()

强迫这与功能绑定

1 个答案: