javascript - 扩展 Backbone.Collection 原型(prototype)

Question

从 this question 开始，我正在尝试使用一些自定义方法来扩充 Backbone.Collection。但是，我在控制台和源代码之间发现了一些不一致的行为。

这是测试的样子

HTML

... 
<script type="text/javascript" src="./libs/underscore.js"></script>
<script type="text/javascript" src="./libs/backbone.js"></script>
<script type="text/javascript" src="./libs/backbone-extend.js"></script>    
<script type="text/javascript" src="./qunit/qunit.js"></script>
<script type="text/javascript" src="./backbone-extend-tests.js"></script>
</body></html>

Backbone 扩展.js

Backbone.Collection.prototype.extract = function() {
    // placeholder to test binding
    return 'foo';
};

backbone-extend-tests.js

test('extending backbone', function () {
    ok(typeof Backbone.Collection.extract == 'function');
    console.log(Backbone.Collection.extract); // undefined
});

有什么我想念的吗？我检查过所有源都在加载

JFTR - 这...

_.extend(Backbone.Collection, {extract:function(){return'foo';});

...有效，只是不使用原型(prototype)扩充方法。我只是不确定为什么一种方法有效而另一种方法无效，因为 Backbone 的文档 recommend原型(prototype)增强(尽管它特别提到了模型)。我想我需要在引擎盖下仔细看看...

更新: 为了后代，将它放在 backbone-extend.js 文件中......

 _.extend(Backbone.Collection.prototype, {
     extract : function (model) {
     var _model = model;
     this.remove(model);
     return _model;
 }
 });

...有效

Answer 1

您混淆了一些关键概念，这就是为什么您没有看到预期行为的原因，这更像是一个基本的 javascript 问题，并不完全与主干相关。

考虑以下构造函数:

var Klass = function() {};

您可以使用 new 关键字调用该构造函数以从该构造函数获取实例。

var klassInstance = new Klass();

现在，假设我想添加一个可用于所有 从该构造函数派生的实例的方法。为此，我可以使用 prototype 对象。

Klass.prototype.instanceMethod = function() { alert('hi'); };

然后我应该能够使用以下方法调用该方法:

klassInstance.instanceMethod();

但是，我还可以向构造函数本身添加一个静态 函数——我在本文中宽松地使用了该术语，它可以在没有实例的情况下被调用。

Klass.staticMethod = function() { alert('yo!'); };

此方法将直接在构造函数之外可用，但不会在实例之外直接可用。

例如:

klassInstance.staticMethod == undefined

所以你的测试真正的问题在于你在 prototype 中添加了一个方法——一个将对那个“类”的所有实例可用的方法——但在你的测试中你正在测试对于直接在“类”本身上的方法。这不是一回事。

---

顺便说一句，虽然相关，但 Backbone.js 提供了一个内置机制来创建其内置类型的“子类”。这是 static .extend() 方法。这为您提供了一种将自己的功能添加到基本 Backbone 类的简单方法。

在你的情况下你会想要做这样的事情:

var MyCollection = Backbone.Collection.extend({
    extract: function() {
        // do whatever
    }
}) 

然后，您可以创建新类的实例，它们将具有 .extract() 方法，方法是:

var coll = new MyCollection();
coll.extract();

---

TL;DR;

最终 – 回到您最初的问题 – 如果您想要一个可用于特定类的所有实例的方法，那么您的测试是不正确的。您要么需要新建一个实例来测试:

test('extending backbone', function () {
    var col = new Backbone.Collection();
    ok(typeof col.extract == 'function');
});

或者直接检查 prototype 中的方法——这有细微的不同，因为 prototype 对象不是 唯一获取方法的对象。

test('extending backbone', function () {
    ok(typeof Backbone.Collection.prototype.extract == 'function');
});