`
hduyou
  • 浏览: 23894 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
最近访客 更多访客>>
社区版块
存档分类
最新评论

js 的prototype相关知识(转载)

阅读更多
最基本的用法 把ClassA的一个实例赋值给ClassB,
ClassB就继承了ClassA的所有属性。
代码入下:

 
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+"
");  



从原型继承理论的角度去考虑,
js的原型继承是引用原型,不是复制原型,
所以,修改原型会导致所有B的实例的变化。
代码如下:

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);  




然而 子类对象的写操作只访问子类对象中成员,
它们之间不会互相影响,因此,
写是写子类 读是读原型(如果子类中没有的话)。


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);  





每个子类对象都执有同一个原型的引用,
所以子类对象中的原型成员实际是同一个。



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);  




构造子类时 原型的构造函数不会被执行


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();  




接下来是致命的,在子类对象中访问原型的成员对象:

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成员全都变了!!


所以 在prototype继承中 原型类中不能有成员对象! 所有成员必须是值类型数据(string也可以)
用prototype继承有执行效率高,不会浪费内存,为父类动态添置方法后子类中马上可见等的优点。

prototype继承是通过把子类的原型对象(prototype)设置成父类的一个实例来进行继承的。

prototype继承也有四个比较明显的缺点:
  缺点一:父类的构造函数不是像JAVA中那样在给子类进行实例化时执行的,而是在设置继承的时候执行的,并且只执行一次。这往往不是我们希望的,特别是父类的构造函数中有一些特殊操作的情况下。
  缺点二:由于父类的构造函数不是在子类进行实例化时执行,在父类的构造函数中设置的成员变量到了子类中就成了所有实例对象公有的公共变量。由于JavaScript中继承只发生在“获取”属性的值时,对于属性的值是String,Number和Boolean这些数据本身不能被修改的类型时没有什么影响。但是Array和Object类型就会有问题。
  缺点三:如果父类的构造函数需要参数,我们就没有办法了。
  缺点四:子类原本的原型对象被替换了,子类本身的constructor属性就没有了。在类的实例取它的constructor属性时,取得的是从父类中继承的constructor属性,从而constructor的值是父类而不是子类。

可以针对prototype的缺点进行改造
比如把它写成Function对象的一个方法,这样用的时候方便。

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;
}



//针对第3,6个
<script> 
function ClassA() 
{ 
    this.a=[] 
    this.aa=100; 
} 


function ClassB() 
{ 
    this.b=function(){return "classbb"}; 
} 




ClassB.prototype=new ClassA(); 



var objB1=new ClassB(); 
var objB2=new ClassB(); 



objB1.a.push(1,2,3); 
objB1.aa=10100 
alert(objB2.a); 
alert(objB2.aa); 
</script>

分享到:
评论

相关推荐

    javascript类库prototype.js

    Prototype.js 是一个强大的JavaScript类库,它为开发者提供了丰富的功能,使得创建具有高度互动性和Web2.0特性的富客户端页面变得更为简单。这个库的设计理念是扩展JavaScript的基础对象,提供一套统一且易于使用的...

    prototype.js javaScript插件

    "Prototype.js"是一个针对JavaScript的开源库,旨在增强和扩展JavaScript的基本功能,尤其在处理DOM(文档对象模型)操作、事件处理以及Ajax交互时提供了极大的便利。 ### 1. Prototype.js核心概念 - **原型链**:...

    prototype_1.7.3.js 最新版本

    《prototype_1.7.3.js:JavaScript框架的里程碑》 在JavaScript的世界里,Prototype库是一个不可或缺的重要组成部分,尤其在Web开发领域,它为开发者提供了强大的功能和便利性。Prototype_1.7.3.js是这个库的一个...

    prototype js脚本库

    prototype js脚本库prototype js脚本库prototype js脚本库prototype js脚本库

    JS中的prototype

    通过理解`prototype`以及与之相关的概念,如原型链、方法重写和`call()`,开发者可以更有效地利用JavaScript的面向对象特性,实现复杂的继承和扩展。在实际开发中,熟练掌握这些知识对于编写可维护和高效的代码至关...

    prototype_PrototypeJS1.6_

    **PrototypeJS 1.6的关键知识点** 1. **对象扩展与原型链**:PrototypeJS的核心之一是增强JavaScript的面向对象特性。它通过扩展JavaScript的`Object.prototype`,使得所有JavaScript对象都能直接使用一些方法,如`...

    prototype的JS文件prototype的JS文件

    prototype的JS文件prototype的JS文件prototype的JS文件prototype的JS文件

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

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

    prototype.js简介

    **描述:** prototype.js 是一个JavaScript库,主要目的是为了简化JavaScript的开发,提升开发效率。它通过扩展JavaScript的基本对象和类型,提供了丰富的功能,包括类式继承、面向对象编程的支持以及一些实用的DOM...

    prototype.js中文手册

    **《prototype.js中文手册》详解** Prototype.js 是一个开源JavaScript...《prototype.js中文手册》是深入理解并掌握这个库的宝贵资源,涵盖了从基础到高级的各种知识点,对于前端开发者来说是一本不可多得的参考书。

    JavaScript的prototype

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

    prototypejs 1.7.3

    PrototypeJS,简称为Prototype,是一个广泛用于JavaScript编程的开源库,它为JavaScript语言引入了许多实用的类和方法,极大地提高了开发效率。版本1.7.3是这个库的一个稳定版本,其中包含了丰富的功能和优化。...

    prototype.js 1.6

    《Prototype.js 1.6:JavaScript 动态对象增强库的深度解析》 Prototype.js 是一个广泛使用的 JavaScript 库,它为浏览器环境提供了许多实用的功能,尤其是在对象操作和事件处理方面。1.6 版本是该库的一个重要里程...

    prototype.js 说明文档.doc

    《prototype.js 说明文档》是关于JavaScript库prototype.js的详细指南,主要涵盖了其核心概念、通用方法以及Ajax对象的使用等内容。Prototype是一个由Sam Stephenson编写的JavaScript库,旨在简化和增强JavaScript...

    JS:prototype用法

    ### JS:prototype用法详解 #### 一、概念解析与基本使用 `prototype`是JavaScript中一个非常重要的概念,尤其自IE4及其后续版本引入以来,成为开发人员扩展内置对象功能的强大工具。`prototype`主要服务于面向...

    prototypeJS脚本的讲解+实例

    PrototypeJS 是一个JavaScript库,由Sam Stephenson 创建,它的设计目标是增强JavaScript语言的功能,提供更方便的对象扩展和面向对象编程。PrototypeJS 提供了一系列实用的函数,使得开发者在JavaScript中进行DOM...

    prototype.js

    《prototype.js:JavaScript框架的核心与应用》 在Web开发领域,JavaScript库和框架极大地提高了开发效率,其中Prototype.js就是一款非常流行的开源JavaScript框架。本文将深入探讨Prototype.js的核心概念、功能...

    prototype.js 实例

    在JavaScript的世界里,Prototype.js是一个著名的库,它扩展了JavaScript的内置对象,为开发者提供了更加便利的编程体验。本实例将深入探讨如何利用Prototype.js来实现弹出窗口和移动窗口的功能,这对于创建交互性强...

    prototype.js 1.4-1.6[全]

    学习Prototype.js不仅能够提升JavaScript编程的效率,还能深入理解JavaScript的原型机制,这对于从事前端开发的工程师来说是必不可少的知识。通过这个压缩包,我们可以研究每个版本的变化,理解其设计理念,为自己的...

    prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版

    Prototype JavaScript 框架是Web开发中的一个关键工具,它为JavaScript编程提供了许多实用的类库函数和设计模式。这个“Prototype 1.6中文手册 chm+prototype 1.6.js源码 最新版”正是面向希望深入学习和掌握...

Global site tag (gtag.js) - Google Analytics