backbone.js - 为什么我需要对 Backbone.js 自定义事件使用 Underscore.js _.bind 方法？

Question

var DocumentEventsView = Backbone.View.extend({
  initialize : function () {
    $(document).on('visibilitychange', _.bind(this.onVisibilityChange, this));
  },  
  onVisibilityChange : function () {
    console.log('inside onVisibilityChange');
  }
});

那么为什么我不能只做 $(document).on('visibilitychange', 'onVisibilityChange' 呢？

我知道 bind 方法是保持和传递方法的上下文，但我不关心上下文，我从来没有在 onVisibilityChange 中使用它。为什么 $(document).on('visibilitychange', 'onVisibilityChange' 不起作用？

Answer 1

这样 this 中的 onVisibilityChange 对象将成为您的 View 对象。

如果你不需要这个，那么不要使用 _.bind 。唯一的问题是你以后必须非常小心，当你改变主意并在 this 中使用 onVisibilityChange 时:你很有可能忘记 this 不引用 View 对象，并在你的代码中引入一些有趣的错误代码。

Here 是一个工作示例，有和没有 _.bind :

var  MyView1 = Backbone.View.extend({
        initialize: function () {
            $(document).on('click', _.bind(this.onClick, this));
        },
        onClick: function () {
            console.log('inside onClick, "this" is ' + this.toString());
        },
        toString: function () {
            return "[object MyView1]";
        }
    }),
    myView1 = new MyView1(),
    MyView2 = Backbone.View.extend({
        initialize: function () {
            $(document).on('dblclick', this.onDblClick);
        },
        onDblClick: function () {
            console.log('inside onDblClick, "this" is ' + this.toString());
        },
        toString: function () {
            return "[object MyView2]";
        }
    }),
    myView2 = new MyView2();

console.clear();
$(document).click();
$(document).dblclick();

输出:

inside onClick, "this" is [object MyView1]
inside onDblClick, "this" is [object HTMLDocument]

为了简单起见，我使用了 click 和 dblclick 事件。输出写入控制台，按 F12。在最新的 Chrome 中测试。