JavaScript属性的问题？

Question

function CascadeItem(options,cascade)
    {
        //this.ele=$(options['selector']);
        //this.ele.data('cascadeItem_instance',this);
        this.options= $.extend(this.options,options);

        //var container=this.options.container===null?this.options.selector:this.options.container;
        //var $container=this.ele.closest(container);
        //this.container=$container.wrap(this.options.tpl).parent();
        //this.requires=[];
    }

CascadeItem.prototype={
        options:{
            tpl:'<p class="col-block hidden2"></p>',
            container:null
        }
    };

var items= [
        {
            selector: '#sel1',
            selected: '1',
            container:'.form-inline'
        },
        {
            selector: '#sel2',
            requires: ['#sel1'],
            container:'.form-inline'
        },
        {
            selector: '#sel3',
            requires: ['#sel1', '#sel2'],
            container:'.form-inline'
        }
    ];
    var items2=[];
    var $ele=$('#selCon');
    $.each(items,function(index,item)
    {
        
        var o=new CascadeItem(item,$ele);
        items2.push(o);
    });
    console.log(items2);

为何最后创建的CascadeItem对象的options属性都是一样的呢？

this.options= $.extend(this.options,options);

上面的代码不知道有什么问题？

Answer 1

因为这一段代码

CascadeItem.prototype={
    options:{
        tpl:'<p class="col-block hidden2"></p>',
        container:null
    }
};

把这一段去掉就可以了。
原因分析：
一开始CascadeItem的构造函数是指向CascadeItem.prototype的，现在你重写了CascadeItem.prototype也就是改写了CascadeItem的构造函数，所以后面创建的实例的时候

this.options= $.extend(this.options,options);

这一句相当于

CascadeItem.prototype.options = $.extend(CascadeItem.prototype.options,options);

而所有对象实例都是共享一个CascadeItem.prototype的，所以CascadeItem.prototype是最后一次的修改内容。