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

JS高级编程——继承

阅读更多
1.最基本的用法 把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);  



2.从原型继承理论的角度去考虑,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);  



3.然而 子类对象的写操作只访问子类对象中成员,它们之间不会互相影响,因此,写是写子类 读是读原型(如果子类中没有的话)。
代码如下:
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);  



4.每个子类对象都执有同一个原型的引用,所以子类对象中的原型成员实际是同一个。
代码如下:
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);  



5.构造子类时 原型的构造函数不会被执行
代码如下:
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();  



6.接下来是致命的,在子类对象中访问原型的成员对象。
代码如下:
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成员全都变了!!  



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


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


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


10.可以针对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; 
} 



Array.prototype 就不能继承 ClassA,ClassB
function ClassA()  
{  
    this.a=[]  
    this.aa=100;  
}  
function ClassB()  
{  
    this.b=function(){return "classbb"};  
}  
ClassB.prototype=new ClassA();  
Array.prototype= new ClassB();  
var _array= new Array();
alert(_array.b());


带参数的继承问题
function ClassB()  
{  
    this.b=function(){return "classbb"};  
}  

function ClassC(R){  
    el=document.getElementById(R);
    return el;
}  

ClassB.prototype=new ClassC();
var st=new ClassB();
alert(st("a").innerHTML);



希望各位 js 高手能把更好的方式介绍给大家
分享到:
评论

相关推荐

    javascript高级编程(第2版)pdf.part2

    根据提供的标题、描述、标签及部分内容,我们可以推测这本书——《JavaScript高级编程(第2版)》第二部分的主要内容涉及到了JavaScript的高级应用和技术细节。尽管给出的部分内容并未包含实际的文字内容,但从书名...

    JavaScript实战手册——第七版代码

    《JavaScript实战手册——第七版代码》是一本专为JavaScript开发者准备的实践指南,它涵盖了从基础到高级的各种JavaScript编程技术。这本书的代码示例旨在帮助读者深入理解语言机制,并提升在实际项目中的应用能力。...

    JavaScript网页开发——体验式学习教程.pdf

    此外,教程还会涉及JavaScript的面向对象编程,包括构造函数、原型链、继承和封装。这些概念对于构建大型、复杂的Web应用至关重要。 ES6(ECMAScript 2015)是JavaScript的一个重要版本,引入了许多新特性,如箭头...

    JS面向对象编程——ES6 中class的继承用法详解

    ES6的`class`和`extends`提供了更加符合面向对象编程习惯的语法,让JavaScript的继承更加清晰和易于理解。`super`关键字在子类的构造函数和方法中扮演着关键角色,它允许子类访问和调用父类的方法和属性。理解和掌握...

    javaScript全面分析——中文版

    JavaScript全面分析——中文版是为想要快速理解和掌握JavaScript编程语言的学者精心编写的教程。JavaScript是一种广泛应用于Web开发的脚本语言,它在浏览器端运行,为网页添加交互性,使得用户界面更加生动活泼。本...

    Qcon2011 JS is JS ——编写JS独有风格的JS代码(程劭非)

    ### QCon 2011: JS is JS —— 编写JS独有风格的JS代码 #### 关键知识点概述: 本次演讲的核心在于探讨如何利用JavaScript的独特性来编写高质量的代码。通过不同的编程范式(如面向对象、过程式、函数式等),演讲...

    JS技巧——日常常用JAVASCRIPT脚本

    JavaScript,也被称为JS,是一种广泛应用于网页和网络应用的编程语言,主要负责客户端的动态交互。作为前端开发的重要工具,JavaScript具有轻量级、解释型和面向对象的特点,使得它在网页开发中不可或缺。本文将深入...

    13、JavaScript继承实现(二) —— zInherit、xbObjects

    JavaScript是面向对象的编程语言,但其继承机制与传统的类继承有所不同。在JavaScript中,对象是基于原型(prototype)的,而不是基于类。本篇主要探讨两种非经典的继承实现方式:zInherit和xbObjects。 1. **...

    JavaScript编程精解 (第一版 带书签) 中文PDF扫描版

    《JavaScript编程精解 (第一版 带书签) 中文PDF扫描版》是一本专注于JavaScript(通常简称为JS)编程语言的书籍,涵盖了ES5(ECMAScript 2016标准)的编程技术。这本书适合那些希望提升前端开发技能的读者,特别是...

    [JavaScript网页编程从入门到精通].庞永庆等.扫描版

    5. **JavaScript面向对象编程**:包括类的概念、构造函数、原型链、继承、封装和多态等,这些都是编写可维护和可扩展代码的关键。 6. **JavaScript闭包**:一个高级话题,闭包允许函数访问和修改外部作用域的变量,...

    《突破JavaScript编程实例五十讲》

    《突破JavaScript编程实例五十讲》是一本专注于JavaScript编程实践的教程,旨在帮助读者通过实例学习和掌握这门广泛应用于Web开发的重要语言。本书的核心理念是将理论与实践相结合,通过五十个精心设计的实例,逐步...

    JS进阶——让你对JS理解更为透彻

    JavaScript(简称JS)是一种广泛使用的轻量级编程语言,尤其在网络开发中占据着核心地位。在进阶学习JS时,理解和掌握面向对象编程(Object-Oriented Programming, OOP)是非常重要的一步。OOP允许我们将复杂的程序...

    javascript高级教程 pdf,学javascript必读

    在高级教程中,这些基础知识会得到深化,例如,你会学习到闭包——这是JavaScript中的一个强大特性,它允许函数访问并操作外部作用域的变量,即使在函数执行完毕后仍能保持对这些变量的引用。 此外,教程还涵盖了...

    精通JavaScript动态网页编程.rar

    总之,"精通JavaScript动态网页编程"这本书会覆盖上述所有内容,并可能深入探讨更多的高级主题,如Promise和async/await用于异步控制流,以及ES新特性的使用。通过学习这本书,读者将能够全面了解JavaScript动态网页...

    JavaScript中的继承之类继承_.docx

    ### JavaScript中的继承——类继承 #### 一、引言 JavaScript是一种动态的、弱类型的编程语言,它支持面向对象编程模式。与传统的面向对象语言如Java或C#不同,JavaScript的继承模型基于原型,这使得它的继承机制...

    JavaScript面向对象编程指南.pdf

    JavaScript作为一种广泛使用的脚本语言,不仅在浏览器环境中发挥着重要作用,在服务器端开发(如Node.js)及桌面应用程序开发等领域也有广泛应用。面向对象编程作为一种重要的编程范式,能够帮助开发者更好地组织...

    精通JavaScript ——动态网页(实例版)详尽实例

    JavaScript还支持面向对象编程,包括构造函数、原型链、继承等机制。书中会通过实例讲解如何创建和操作自定义对象,以及如何利用这些机制实现复用和扩展代码。 在实际应用中,DOM(文档对象模型)操作是JavaScript...

    JavaScript编程精解

    综上所述,“JavaScript编程精解”这本书或材料应该会涵盖以上提到的所有知识点以及其他更多高级主题,旨在帮助读者深入了解JavaScript的各种特性和应用场景,从而更好地利用这门强大的编程语言进行开发工作。

    轻轻松松学用javascript编程 、悟透JavaScript

    总之,"轻轻松松学用javascript编程" 和 "悟透JavaScript" 涵盖了从基础知识到高级特性的全面学习路径。通过阅读提供的PDF文档,可以从理论到实践,逐步精通这门强大的编程语言,无论是前端开发还是全栈开发,...

Global site tag (gtag.js) - Google Analytics