Question

我最近一直在玩骨干视图，我在创建自己的视图子类时遇到了一个非常奇怪的行为：

在我看来，在Backbone.View的子类上调用extend（）会尝试合并超类定义中的对象属性（对于野蛮的措辞而言很抱歉）。

请考虑以下代码：

(function() {
var SomeCustomView = Backbone.View.extend({
    children : {},

    //internal use only
    _children : {},

    counter : 0,

    initialize : function(options){
    },

    render : function(){
        var t = this;
        _.each(this.children, function(child, childId){
            if(_.isFunction(child))child=child.call(this);
            this._children[childId] = child;
            this.counter++;
        },t );

        return this;
    },

});

//register on window object
this.SomeCustomView = SomeCustomView;


}).call(this);

然后创建SomeCustomView的子类：

(function() {

console.error("START STRANGE BUG TEST");

var BetterCustomView = SomeCustomView.extend({
    children : {
        firstChild : { name : 'hi'}
    }
});

var instance1 = new BetterCustomView({ id : 'one' });

console.error("   _____________________________   ");

console.error("instance1.counter before render" + instance1.counter);
instance1.render();
console.error("instance1.counter after render" + instance1.counter);

console.error("instance1 _children");
console.error(instance1._children);

console.error("instance1._children.firstChild");
console.error(instance1._children.firstChild);
console.error("instance1._children.secondChild");
console.error(instance1._children.secondChild);

console.error("   _____________________________   ");



var EvenBetterCustomView = SomeCustomView.extend({
    children : {
        firstChild : { name : 'wuazza', foo : 'bar' },
        secondChild : { name : 'NotSupposedToBeInUltimate'}
    }
});

var instance2 = new EvenBetterCustomView({ id : 'two' });

console.error("   _____________________________   ");

console.error("instance2.counter before render" + instance2.counter);
instance2.render();
console.error("instance2.counter after render" + instance2.counter);

console.error("instance2 _children");
console.error(instance2._children);

console.error("instance2._children.firstChild");
console.error(instance2._children.firstChild);
console.error("instance2._children.secondChild");
console.error(instance2._children.secondChild);

console.error("   _____________________________   ");




var TheUltimateCustomView = SomeCustomView.extend({
    children : {
        firstChild : { name : 'whizzz' }
    }
});

var instance3 = new TheUltimateCustomView({ id : 'three' });

console.error("   _____________________________   ");

console.error("instance3.counter before render" + instance3.counter);
instance3.render();
console.error("instance3.counter after render" + instance3.counter);

console.error("instance3 _children");
console.error(instance3._children);

console.error("instance3._children.firstChild");
console.error(instance3._children.firstChild);
console.error("instance3._children.secondChild");
console.error(instance3._children.secondChild);


console.error("   _____________________________   ");

 }).call(this);

现在控制台输出以下内容：

        START STRANGE BUG TEST test.html:46
       _____________________________    test.html:56
    instance1.counter before render0 test.html:58
    instance1.counter after render1 test.html:60
    instance1 _children test.html:62
    Object {firstChild: Object}
     test.html:63
    instance1._children.firstChild test.html:65
    Object {name: "hi"} test.html:66
    instance1._children.secondChild test.html:67
    undefined test.html:68
       _____________________________    test.html:70
       _____________________________    test.html:83
    instance2.counter before render0 test.html:85
    instance2.counter after render2 test.html:87
    instance2 _children test.html:89
    Object {firstChild: Object, secondChild: Object}
     test.html:90
    instance2._children.firstChild test.html:92
    Object {name: "wuazza", foo: "bar"} test.html:93
    instance2._children.secondChild test.html:94
    Object {name: "NotSupposedToBeInUltimate"} test.html:95
       _____________________________    test.html:97
       _____________________________    test.html:110
    instance3.counter before render0 test.html:112
    instance3.counter after render1 test.html:114
    instance3 _children test.html:116
    Object {firstChild: Object, secondChild: Object}
     test.html:117
    instance3._children.firstChild test.html:119
    Object {name: "whizzz"} test.html:120
    instance3._children.secondChild test.html:121
    Object {name: "NotSupposedToBeInUltimate"} test.html:122
       _____________________________

请注意，每次在实际测试中我都会扩展SomeCustomView。注意如何在第三个子类TheUltimateCustomView中找到在EvenBetterCustomView中声明的'secondChild'，并在调用render（）期间放在_children对象中;

对我来说，至少可以说这是一种非常奇怪的行为。

TheUltimateCustomView不会扩展声明secondChild的EvenBetterCustomView。此外，我们正在测试_children对象，该对象在我们的CustomViewClass的SUBCLASS的INSTANCE上调用render（）时填充。它如何在其他子类CustomViewClass中结束......？

有人可以向我解释一下吗？这是BackBone.View如何执行其.extend方法的错误吗？

我做了一件非常糟糕的事吗？

            <html>

        <head>



            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript" src="underscore.js"></script>
            <script type="text/javascript" src="backbone.js"></script>

            <script type="text/javascript">
        (function() {
            var SomeCustomView = Backbone.View.extend({
                children : {},

                //internal use only
                _children : {},

                counter : 0,

                initialize : function(options){
                },

                render : function(){
                    var t = this;
                    _.each(this.children, function(child, childId){
                        if(_.isFunction(child))child=child.call(this);
                        this._children[childId] = child;
                        this.counter++;
                    },t );

                    return this;
                },

            });

            //register on window object
            this.SomeCustomView = SomeCustomView;


        }).call(this);


        (function() {

            console.error("START STRANGE BUG TEST");

            var BetterCustomView = SomeCustomView.extend({
                children : {
                    firstChild : { name : 'hi'}
                }
            });

            var instance1 = new BetterCustomView({ id : 'one' });

            console.error("   _____________________________   ");

            console.error("instance1.counter before render" + instance1.counter);
            instance1.render();
            console.error("instance1.counter after render" + instance1.counter);

            console.error("instance1 _children");
            console.error(instance1._children);

            console.error("instance1._children.firstChild");
            console.error(instance1._children.firstChild);
            console.error("instance1._children.secondChild");
            console.error(instance1._children.secondChild);

            console.error("   _____________________________   ");



            var EvenBetterCustomView = SomeCustomView.extend({
                children : {
                    firstChild : { name : 'wuazza', foo : 'bar' },
                    secondChild : { name : 'NotSupposedToBeInUltimate'}
                }
            });

            var instance2 = new EvenBetterCustomView({ id : 'two' });

            console.error("   _____________________________   ");

            console.error("instance2.counter before render" + instance2.counter);
            instance2.render();
            console.error("instance2.counter after render" + instance2.counter);

            console.error("instance2 _children");
            console.error(instance2._children);

            console.error("instance2._children.firstChild");
            console.error(instance2._children.firstChild);
            console.error("instance2._children.secondChild");
            console.error(instance2._children.secondChild);

            console.error("   _____________________________   ");




            var TheUltimateCustomView = SomeCustomView.extend({
                children : {
                    firstChild : { name : 'whizzz' }
                }
            });

            var instance3 = new TheUltimateCustomView({ id : 'three' });

            console.error("   _____________________________   ");

            console.error("instance3.counter before render" + instance3.counter);
            instance3.render();
            console.error("instance3.counter after render" + instance3.counter);

            console.error("instance3 _children");
            console.error(instance3._children);

            console.error("instance3._children.firstChild");
            console.error(instance3._children.firstChild);
            console.error("instance3._children.secondChild");
            console.error(instance3._children.secondChild);


            console.error("   _____________________________   ");

        }).call(this);

            </script>



        </head>


        <body>
        coucou

        </body>



        </html>

下面是完整的html页面，您可以在其中测试此行为：

非常感谢你的帮助。

Answer 1

更准确地说，当你这样做时：

(function() {
var SomeCustomView = Backbone.View.extend({
    ...
    //internal use only
    _children : {},

    ...

});

每个实例都有自己的_children字段，但它们都共享相同的初始值{}，因此除非您更改{{}，所有将扩展SomeCustomView的视图将共享相同的值{1}}到另一个值。

尝试这样的事情：

_children

Here is an example

Backbone View扩展了奇怪的行为

1 个答案: