self.el对this.el

Question

我正在跟踪一个backbone.js教程，并遇到了两个函数initialize()和render()。initialize()在附加一些html时使用$(self.el).append()，而render()使用$(this.el).append()。我对不同之处感到困惑，会感激你的解释，谢谢！

JS代码

// Views
window.WineListView = Backbone.View.extend({

    tagName:'ul',

    initialize:function () {
        this.model.bind("reset", this.render, this);
        var self = this;
        this.model.bind("add", function (wine) {
            $(self.el).append(new WineListItemView({model:wine}).render().el);
        });
    },

    render:function (eventName) {
        _.each(this.model.models, function (wine) {
            $(this.el).append(new WineListItemView({model:wine}).render().el);
        }, this);
        return this;
    }
});

Answer 1

第一种方法是在事件触发时范围发生变化时使用self来保持对this的引用。在匿名函数中(对于事件处理程序)，this将引用触发事件的元素，而不是骨干控制器。

在第二种情况下，不需要引用。

Answer 2

原因是JavaScript如何处理范围。

在初始化函数中，它们执行

var self = this;

因此，当它们将引用绑定到初始化的WineListView实例时，

this.model.bind("add", function (wine) {
    $(self.el).append(new WineListItemView({model:wine}).render().el);
 });

但是，如果将"this“作为第三个参数发送，则可以不使用self变量。第三个参数应该指示应该调用回调的作用域

this.model.bind("add", function (wine) {
    $(this.el).append(new WineListItemView({model:wine}).render().el);
 }, this);

如果您查看那里的呈现是绑定，它还使用第三个参数

this.model.bind("reset", this.render, this);

我还没有试过这些代码，但这是从读取主干http://backbonejs.org/#FAQ-this上的文档中得到的