为什么我需要为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');
  }
});

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

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

Answer 1

这样,this里面的对象就是onVisibilityChange你的视图对象.

如果您不需要,请不要使用_.bind.唯一的问题是,当你改变主意并this在内部使用时,你将不得不非常小心onVisibilityChange:你将很有可能忘记this不引用视图对象,并在你的代码中引入一些有趣的错误.

这是一个有效的例子,有和没有_.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中测试过.