`
123003473
  • 浏览: 1073705 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

javascript的prototype继承[转载]

阅读更多
在prototype继承中 原型类中不能有成员对象! 所有成员必须是值类型数据(string也可以)用prototype继承有执行效率高,不会浪费内存,为父类动态添置方法后子类中马上可见等的优点。我就非常喜欢用prototype继承。prototype继承是通过把子类的原型对象(prototype)设置成父类的一个实例来进行继承的。只简单的这样设置继承的确如楼主所说,有不少缺点。总的来说有四个缺点:

缺点一:父类的构造函数不是像JAVA中那样在给子类进行实例化时执行的,而是在设置继承的时候执行的,并且只执行一次。这往往不是我们希望的,特别是父类的构造函数中有一些特殊操作的情况下。

缺点二:由于父类的构造函数不是在子类进行实例化时执行,在父类的构造函数中设置的成员变量到了子类中就成了所有实例对象公有的公共变量。由于JavaScript中继承只发生在“获取”属性的值时,对于属性的值是String,Number和Boolean这些数据本身不能被修改的类型时没有什么影响。但是Array和Object类型就会有问题。

缺点三:如果父类的构造函数需要参数,我们就没有办法了。

缺点四:子类原本的原型对象被替换了,子类本身的constructor属性就没有了。在类的实例取它的constructor属性时,取得的是从父类中继承的constructor属性,从而constructor的值是父类而不是子类。
我也曾经为了这四个缺点头疼过,于是对prototype继承进行改造。
我试了几种方法,下面是我觉得最好的一种。我把它写成Function对象的一个方法,这样用的时候方便。方法如下:

JavaScript代码
//类的继承-海浪版   
Function.prototype.Extends = function (parentClass)   
{   
  var Bs = new Function();   
  Bs.prototype = parentClass.prototype;   
  this.prototype = new Bs();   
  this.prototype.Super = parentClass;   
  this.prototype.constructor = this;   
}   
 
下面的内容是一些基本说明
基本的用法 把ClassA的一个实例赋值给ClassB ClassB就继承了ClassA的所有属性
JavaScript代码
function ClassA()   
{   
    this.a=‘a’;   
}   
function ClassB()   
{   
    this.b=‘b’;   
}   
ClassB.prototype=new ClassA();   
var objB=new ClassB();   
for(var p in objB)document.write(p+“<br>“);   
从原型继承理论的角度去考虑 js的原型继承是引用原型 不是复制原型
所以 修改原型会导致所有B的实例的变化
JavaScript代码
function ClassA()   
{   
    this.a=‘a’;   
}   
function ClassB()   
{   
    this.b=‘b’;   
}   
ClassB.prototype=new ClassA();   
var objB=new ClassB();   
alert(objB.a);   
ClassB.prototype.a=‘changed!!’;   
alert(objB.a);   
 
然而 子类对象的写操作只访问子类对象中成员 它们之间不会互相影响
因此 写是写子类 读是读原型(如果子类中没有的话)
JavaScript代码
function ClassA()   
{   
    this.a=‘a’;   
}   
function ClassB()   
{   
    this.b=‘b’;   
}   
ClassB.prototype=new ClassA();   
var objB1=new ClassB();   
var objB2=new ClassB();   
objB1.a=‘!!!’;   
alert(objB1.a);   
alert(objB2.a);   
 
每个子类对象都执有同一个原型的引用 所以子类对象中的原型成员实际是同一个
JavaScript代码
function ClassA()   
{   
    this.a=function(){alert();};   
}   
function ClassB()   
{   
    this.b=function(){alert();};   
}   
ClassB.prototype=new ClassA();   
var objB1=new ClassB();   
var objB2=new ClassB();   
alert(objB1.a==objB2.a);   
alert(objB1.b==objB2.b);   
构造子类时 原型的构造函数不会被执行
JavaScript代码
function ClassA()   
{   
    alert(“a”);   
    this.a=function(){alert();};   
}   
function ClassB()   
{   
    alert(“b”);   
    this.b=function(){alert();};   
}   
ClassB.prototype=new ClassA();   
var objB1=new ClassB();   
var objB2=new ClassB();   
 
接下来是致命的,在子类对象中访问原型的成员对象:
<script>
function ClassA()
{
    this.a=[];
}
function ClassB()
{
    this.b=function(){alert();};
}
ClassB.prototype=new ClassA();
var objB1=new ClassB();
var objB2=new ClassB();
objB1.a.push(1,2,3);
alert(objB2.a);
//所有b的实例中的a成员全都变了!!
</script>
 
再看一个例子:
首先我们创建一个animal类
 
JavaScript代码
var animal = function(){  //这就是constructor function 了     
   this.name = ‘pipi’;        
   this.age = 10;          
   this.height = 0;          
}   
到这里我们知道如何在js中定义一个类了,接下来我们展示如何写一个cat
JavaScript代码
var cat = function(){        
    this.play = function(){         
        alert(‘cat play’)        
    }        
}        
cat .prototype = new animal ();        
 //prototype 属性指向一个对象     
var c1 = new cat();   
alert(c1.name);  
到这里,cat就继承了animal 对象,类cat的一个实例对象c1拥有属性name,age,height,和方法play了。
那么prototype起到了一个什么样的作用呢?
prototype就好比一个指针,它指向一个object,这个object就称为子类对象的原型。当cat的对象被创建的时候,由于cat的构造函数拥有prototype属性,那么cat的实例就会间接指向这个原型对象了(说成间接的是因为每个object都有一个constructor 属性指向它的构造函数)。
那么问题来了,“当我们修改对象 c1 的name属性的时候,会不会修改它prototype的name属性值呢?”,答案是否定的。
接下来详细解析:
1.访问name属性: 首先当我们第一次访问c1.name的属性的时候,我们会得到值“pipi”,这个和我们预料中的一样。但是计算过程你未必知道。
它计算的过程是这样的:第一步:检查c1对象中是否有name属性,找到的话就返回值,没有就跳到第二步,显然没有找到,因为cat的构造函数中没有定义。第二步:当第一步没有找时,去间接访问prototype对象所指向的object,如果在prototype对象中找到的name属性的话,就返回找到的属性值。如果还是没有找到的话,再去递归地寻找prototype对象的prototype对象(去找它的爷爷),一直到找到name属性或者没有prototype对象为止。如果到最后还是没有找到name属性的话就返回undefined。
2.设定name属性:当我们设定c1对象的name属性时,及调用 c1.name= ‘ new name’;  这个过程就简单多了。首先检查是否对象已有该属性,若已存在则修改当前值,若不存在则为该对象新增一个属性并设定当前值。值得一提的是,在设定值的过程中没有去访问prototype属性。
为了加深理解,我们再看一个 read-write-read 的过程,第一次read的时候,由于自己的对象没有name属性,那么就会返回的原型对象的name属性的值。第二步,写入name的值,同样没发现本身对象有name属性,那么就在本身对象上新建一个name属性,然后赋值。第三步,再次读取name属性,由于在第二步中已经新建了name属性,此时就返回在第二步中设定的值。值得一提的是,在这三步中没有改变原型对象的值。
好了,到此详细分析了 javascript对象是如果实现继承的,其实和其他的面向对象语言不一样的是,javascript的继承机制是对象的原型继承而不是类型继承。


【转载】http://www.css88.com/archives/451


通过这种方式:
function ClassA()  
{  
    this.a=[];  
}  
function ClassB()  
{  
   this.b=function(){alert();};  
   ClassA.call(this);
}  
ClassB.prototype=new ClassA();  
var objB1=new ClassB();  
var objB2=new ClassB();  
objB1.a.push(1,2,3);  
alert(objB2.a);
alert(objB1.a);
可以解决以上问题。
分享到:
评论

相关推荐

    JavaScript的prototype

    JavaScript中的`prototype`是一个核心概念,它涉及到对象继承和函数原型。在JavaScript中,每创建一个函数,该函数就会自动获得一个名为`prototype`的属性,这个属性是一个对象,用于实现对象间的继承。同时,每个...

    javascript中类和继承(代码示例+prototype.js)

    本文将深入探讨JavaScript中的类和继承,并结合`prototype.js`文件中的示例进行解析。 ### 类的概念与模拟 在JavaScript中,我们通常使用函数来模拟类的行为。一个函数可以看作是一个类的定义,通过`new`关键字来...

    JavaScript使用prototype属性实现继承操作示例

    主要介绍了JavaScript使用prototype属性实现继承操作,结合实例形式详细分析了JavaScript使用prototype属性实现继承的相关原理、实现方法与操作注意事项,需要的朋友可以参考下

    JavaScript实现继承的几种方式

    JavaScript的原型(prototype)机制是实现继承的基础。每个函数都有一个prototype属性,这个属性指向一个对象,这个对象的属性和方法可以被实例共享。通过将一个对象设置为另一个对象的原型,我们可以实现继承。 ``...

    javascript prototype文档.rar

    JavaScript中的原型(Prototype)是理解JavaScript继承机制的关键概念。它是一种对象属性,允许一个对象访问并继承另一个对象的属性和方法。在这个“javascript prototype文档”中,我们可以期待深入学习JavaScript...

    JavaScript继承

    原型(Prototype)是JavaScript实现继承的基础,每个对象都有一个`__proto__`属性,指向创建它的构造函数的原型对象。通过原型,子类可以共享父类的属性和方法,减少了代码的重复。此外,JavaScript的灵活性允许...

    JavaScript学习之三 — JavaScript实现继承的7种方式

    本篇文章将深入探讨JavaScript实现继承的七种常见方式,帮助你更好地理解和运用这一概念。 1. 原型链继承(Prototype Chain Inheritance) 原型链是JavaScript实现继承的基础。每个函数都有一个`prototype`属性,这...

    javascript控件开发之继承关系

    在JavaScript中,继承是基于原型(prototype)的机制。每个JavaScript对象都有一个内部[[Prototype]]链接到另一个对象,这通常是其构造函数的prototype属性。通过这种方式,一个对象可以“继承”另一个对象的属性和...

    详解JavaScript中基于原型prototype的继承特性_.docx

    JavaScript中的原型(prototype)机制是实现继承的一种核心方式。由于JavaScript是一种基于原型的面向对象语言,它不支持传统的类(class)概念,因此其继承机制显得与众不同。在JavaScript中,对象可以直接从另一个...

    javascript类库prototype.js

    6. **Class与Object继承**:Prototype.js 引入了面向对象的概念,实现了类(Class)和对象继承,使得JavaScript具备了更接近传统面向对象语言的编程模式。 7. **JSON支持**:随着JSON成为数据交换的主流格式,...

    js遍历属性 以及 js prototype 和继承

    在JavaScript中,遍历属性、理解`prototype`和掌握继承机制是编程中不可或缺的基本技能。本文将深入探讨这些概念,并通过实例来加深理解。 首先,让我们来看如何遍历JavaScript对象的属性。JavaScript提供了多种...

    JavaScript 继承详解(六)

    在本章中,我们将分析Prototypejs中关于JavaScript继承的实现。 Prototypejs是最早的JavaScript类库,可以说是JavaScript类库的鼻祖。 我在几年前接触的第一个JavaScript类库就是这位,因此Prototypejs有着广泛的...

    JavaScript继承机制探讨及其应用.pdf

    2. 构造函数继承(Constructor Inheritance):这是 JavaScript中另一种常用的继承机制,通过将一个构造函数的 prototype 属性设置为另一个构造函数的实例,从而实现继承。 3. 混合继承(Mixins Inheritance):这是...

    浅析Javascript原型继承 推荐第1/2页

    在深入探讨JavaScript的原型继承之前,首先要明确的是JavaScript中并没有类似其他编程语言中的类继承的概念。虽然有传言JavaScript 2.0将加入类继承机制,但考虑到要让所有浏览器支持新特性可能需要很长时间,因此...

    JavaScript继承与多继承实例分析.docx

    - **原理**:JavaScript的继承主要是通过原型链(prototype chain)来实现的。每个JavaScript对象都有一个内部属性[[Prototype]],通常可以通过`__proto__`访问,或通过`Object.getPrototypeOf()`方法获取。当尝试...

    Prototype_1.6 JavaScript代码和中文帮助手册

     prototype.js是一个非常优雅的javascript基础类库,对javascript做了大量的扩展,而且很好的支持Ajax,国外有多个基于此类库实现的效果库,也做得很棒。  prototype.js不仅是一个有很大实用价值的js库,而且有很...

    JavaScript中继承原理与用法实例入门

    JavaScript中的继承机制是其面向对象特性的重要组成部分。与其他支持继承的语言不同,JavaScript并没有内置的`extend`等方法,而是依赖于构造函数和原型链的概念来实现继承。在JavaScript中,一个对象的属性和方法...

    prototype.js javaScript插件

    **JavaScript原型(Prototype)库详解** JavaScript是一种动态类型的编程语言,其灵活性和强大的对象操作能力使其在Web开发中占据重要地位。"Prototype.js"是一个针对JavaScript的开源库,旨在增强和扩展JavaScript的...

    JavaScript继承的特性与实践应用深入详解

    JavaScript 继承是编程中一个重要的概念,它允许对象间共享和重用代码。JavaScript 作为基于原型的语言,其继承机制与其他面向对象语言有所不同。在JavaScript中,对象可以从其他对象直接继承,而不是通过类的概念。...

Global site tag (gtag.js) - Google Analytics