如果两个实例引用同一个对象,当其中一个实例的属性发生改变时,另一个实例属性也随之改变,只有当两个实例拥有自己的作用域时,才不会相互干扰。
这是因为JavaScript的特性所导致,在component中,data必须以函数的形式存在,不可以是对象。
组建中的data写成一个函数,数据以函数返回值的形式定义,这样每次复用组件的时候,都会返回一份新的data,相当于每个组件实例都有自己私有的数据空间,它们只负责各自维护的数据,不会造成混乱。而单纯的写成对象形式,就是所有的组件实例共用了一个data,这样改一个全都改了。
1 function Box(){ 2 3 } 4 Box.prototype.data={ 5 msg:"aaa" 6 }; 7 var b1=new Box(); 8 var b2=new Box(); 9 b1.data.msg="bbb";//--------------这里修改一个实例的属性,会造成另一个实例的属性也跟着修改了 10 console.log(b1.data.msg);//------bbb 11 console.log(b2.data.msg);//------bbb
1 function Box(){ 2 this.data=this.data(); 3 } 4 Box.prototype.data=function(){ 5 return{ 6 msg:"aaa" 7 } 8 }; 9 var b1=new Box(); 10 var b2=new Box(); 11 b1.data.msg="bbb";//-----------------如果是函数的形式去定义的属性,这样它们有自己的作用域,在修改的时候不会影响到别人 12 console.log(b1.data.msg);//----bbb 13 console.log(b2.data.msg);//----aaa