关于function原型对象prototype的思考

本文探讨了Ext.js框架中GridView模板的继承机制及其引发的问题。通过实例展示了当修改Ext.grid.GridView.prototype.templates时,所有GridView实例共享同一套模板导致的错误,并深入分析了JavaScript原型链的工作原理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天在工作中碰到个很奇怪问题。
Ext.grid.GridView.prototype.templates的值一直随着对象改变。


首先是自己在js中对gridview的默认模板进行外部修改
Ext.grid.GridView.prototype.templates.cell=/*code*/ 



而Ext.grid.GridView在initTemplates的时候,首先判断是否存在,不存在则创建空对象
var ts=this.templates||{} 


之后对ts进模板初始化


ts.hcell==...

ts.master=...


造成结果是

var d=new Ext.grid.GridView({})
//d根据参数初始化模板

var e=Ext.grid.GridView({})
//e根据参数初始化模板的时候,由于上述原因,发现模板已经存在,则不创建

//最后d,e两个view配置参数完全不同,却用同一套模板,造成许多错误。


后做几个小试验

//直接对prototype中的value的属性进行操时。


var func_a=function(){};
func_a.prototype.value={x:10,y:20}

var obj_a=new func_a();
var obj_b=new func_a();

obj_a.value.x=100
alert(obj_b.value.x) //结果为100
alert(func_a.prototype.value.x ) //结果也为100


//结论,这种方式去运用prototype中的对象,是直接操作protoype的对象引用,并非每个对象独立对象属性




//不对prototype中的value中的属性直接操作时。



var func_a=function(){};
func_a.prototype.value=10

var obj_a=new func_a();
var obj_b=new func_a();

obj_a.value=100
alert(obj_b.value) //结果仍为10
alert(func_a.prototype.value ) //结果也为10

func_a.prototype.value.x=0;
alert(obj_a.value) //结果仍为100
alert(obj_b.value) //结果为0

//结论,这种方式去运用prototype中的对象,做法比较特别,首先如果对象未更改过基础类型的属性的值,那么仍然与“父类”指向同一个地址,如果“父类”通过“=”赋值,那么修改的是prototype地址中的值,而对象通过“=”赋值,则应为值拷贝。(解释为何obj_b值与func_a相同,而obj_a却不改变),

//再将value换成任何对象,结果一样,prototype.value不管指向任意对象,对应条件的obj_a,obj_b均跟随



再延伸一下,ext中的javascript继承(Ext.extend),也是依靠prototype实现的。
要实现继承,最最基础的两个问题是:
1.父类方法、属性更改,子类所有属性也修改。
2.子类方法、属性更改,父类不更改。

//ext是这样做的
extend:function(subClass,superClass,overrides)
{
var F=function(){};
F.prototype=superClass.prototype;
subClass.prototype=new F();
// 将overrides拷贝到subClass的prototype中
//这样做,根据之前对protoype的研究, “父类”修改,所有“子类”修改,因为 subClass.prototype相当于new superClass(),如果subClass.prototype一经修改,那么就脱离了superClass.prototype对其控制,所以不会影响到“父类”。 如果superClass.prototype进行修改,那么所有此“类”创造的对象,只要没有单独赋值,那么都会跟随“父类”一起更改。

}

ext这几句代码,就是extend实现的精华。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值