`
夜枫舞影
  • 浏览: 50485 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

关于function原型对象prototype的思考

阅读更多
今天在工作中碰到个很奇怪问题。
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实现的精华。
分享到:
评论

相关推荐

    Javascript中获取对象的原型对象的方法小结

    在Javascript中,如果我们有一个对象但是又不知道它的构造函数时,如何获取它的原型对象呢? 在Chrome中或是FireFox浏览器中,我们可以直接使用对象的__proto__属性获取它的原型对象。 代码如下: <!– lang: js ...

    js 原型对象和原型链理解

    一个例子让你彻底明白原型对象和原型链 开篇 之前对js中的原型链和原型对象有所了解,每当别人问我什么是原型链和原型对象时,我总是用很官方(其实自己不懂)的解释去描述。有一句话说的好:如果你不能把一个很复杂...

    详解js中的原型,原型对象,原型链.docx

    在JavaScript中,每个函数都有一个特殊的属性`prototype`,这是一个指针,指向一个对象,称为原型对象。这个对象用于存储可以被该函数创建的所有实例共享的属性和方法。 **举例说明:** ```javascript function ...

    构造函数 原型对象 实例、图解

    原型对象是通过构造函数创建的,在构造函数中,我们可以使用 `prototype` 属性来访问原型对象。 实例 实例是指通过构造函数创建的对象。实例继承了原型对象的属性和行为,并可以拥有自己的属性和方法。 构造函数...

    原生JS原型对象练习

    在JavaScript的世界里,原型对象(Prototype)是理解对象继承机制的关键。这个练习旨在帮助学习者深入理解原型链的概念,这是JavaScript实现面向对象编程的核心部分。原生JS,即不依赖于像jQuery这样的库,让我们...

    function foo的原型与prototype属性解惑

    在JavaScript中,函数(Function)是一种特殊的对象,每个函数都具有一个prototype属性,这个属性是指向一个对象的引用,被称为原型对象。原型对象可以包含共享的方法和属性,使得由该函数创建的所有实例对象(即...

    [js高手之路]图解javascript的原型(prototype)对象,原型链实例

    JavaScript中的原型(Prototype)是语言的核心特性之一,它在实现对象继承和共享方法时起着至关重要的作用。本文将深入探讨原型对象、原型链的概念,并通过实例解析它们的工作原理。 首先,每个函数都有一个名为`...

    JavaScript prototype(原型对象)

    JavaScript prototype(原型对象) 所有的 JavaScript 对象都会从一个 prototype(原型对象)中继承属性和方法。 在前面的章节中我们学会了如何使用对象的构造器(constructor): 实例 function Person(first, ...

    js原型链详解

    JavaScript会查找该实例的__proto__,也就是其构造函数的prototype所指向的原型对象,若仍未找到,则会继续往上查找,直到到达原型链的末端(通常是指向Object.prototype的原型对象)。 #### 原型链 原型链是...

    js使用原型对象(prototype)需要注意的地方

    我们先来一个简单的构造函数+原型对象的小程序 function CreateObj( uName, uAge ) { this.userName = uName; this.userAge = uAge; } CreateObj.prototype.showUserName = function () { return this....

    小码哥原型对象使用的注意点共4页.pdf.zip

    构造函数(如`function Person() {}`)用于创建对象,`Person.prototype`是它的原型,实例(如`var p = new Person();`)的`__proto__`指向`Person.prototype`。 3. **`prototype`属性**: 当我们为构造函数添加...

    JavaScript中的prototype原型学习指南

    Function 类型有一个属性 prototype,直接翻译过来就是原型。这个属性就是一个指针,指向一个对象,这个对象包含一些属性和方法,这些属性和方法会被当前函数生成的所有实例(对象)所共享。 这句话根据前面所说的,...

    JavaScript中的prototype(原型)属性研究

    在JavaScript中,每个函数都有一个prototype属性,这个属性指向一个对象,这个对象就是所谓的原型对象。当我们创建一个函数实例时,实例会自动获取一个内部属性[[Prototype]],这个属性通常通过`__proto__`或者`...

    举例说明JavaScript中的实例对象与原型对象_.docx

    在这个顺序下,`person`的`[[Prototype]]`链指向的是包含`sayName`方法的新原型对象,因此能正确执行`sayName`。 此外,`Person.prototype`可以看作是构造函数`Person`的静态部分,而`person`的属性和方法是实例的...

    javascript prototype原型操作笔记.docx

    每个 JavaScript 对象都有一个内部属性 `[[Prototype]]`,它链接到另一个对象,即原型对象。当我们尝试访问一个对象的属性或者方法时,如果该对象自身不包含此属性或方法,则会沿着原型链向上查找,直到找到该属性或...

    JavaScript程序设计课件:原型与继承.pptx

    Student函数的prototype属性指向的对象,就是Student的原型对象。 在利用构造函数创建对象时,每个对象都默认与这个原型对象连接,连接后就可以访问到原型对象中的属性和方法 6.6.1 原型 2、作用 利用原型对象可以...

    javascript中的原型对象(prototype)和隐式原型(__proto__)

    每一个函数(除箭头函数外)天生自带一个prototype属性,该属性称之为原型对象(原型),是一个引用类型数据。 作用:保存将来使用该构造函数构造出来的属性和方法,构造出来的属性和方法可以被共享。 注意:在...

    JavaScript中的原型prototype完全解析

    JavaScript中的原型和prototype是理解该语言面向对象机制的核心概念之一,它支撑着JavaScript的“一切皆对象”的编程范式。接下来,我们将详细解析JavaScript中的原型和prototype,以及与之密切相关的__proto__属性...

Global site tag (gtag.js) - Google Analytics