`
ghyghoo8
  • 浏览: 192789 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

js 的 继承

    博客分类:
  • js
阅读更多
在JavaScript中,继承可以用四种方式实现,

1、对象冒充
感觉这种方式利用了js中类和函数的模糊性,同是function关键字申明方法,既可以说他是函数,也可以说他是类,js太灵活了,下面的例子说明下:

function ClassA(sColor){
     this.color=sColor;
     this.sayColor=function(){
       alert(this.color);
     }
}
function ClassB(sColor){
     this.newMethod=ClassA;//把ClassA方法赋给newMethod.
     this.newMethod();//调用newMethod.
     delete  this.newMethod;}


ClassB执行ClassA方法便相当于继承了ClassA,在调用完毕后要删除newMethod,因为后续添加的属性和方法如果和超类同名,就会覆盖超类的相关属性和方法。

利用这种继承方式可以实现多重继承,如:

多重继承
     function ClassD(sColor){
     this.newMethod=ClassA;//把ClassA方法赋给newMethod,
     this.newMethod();//调用newMethod
     delete  this.newMethod;
    
     this.newMethod=ClassB;
     this.newMethod();
     delete  this.newMethod;}

利用这种多重继承方法有个弊端,如果ClassA和ClassB具有相同的属性和方法,ClassB有较高的优先级。

2、call方法和apply方法
由于第一种方法很流行,所以ECMAScript便function对象加入两个新方法,call()和apply(),这两中方法很相似,只有在传参方面有所不同,

call()方法的第一个参数用作this的对象,例如:

Call方法
    function ClassB(sColor,sName){
    ClassA.call(this,sColor);

    this.name=sName;
    this.sayName=function(){
        alert(this.name);

    }

}

call方法还是调用了ClassA()方法,利用this传递进去ClassB,为ClassB初始化,他仅仅是调用了ClassA()方法而已,如果你在ClassA之外为ClassA添加了方法(例如利用原型法),是不能继承到ClassB的。

call()方法的第一个参数必须是this,可以有第二个,第三个,第四个....参数。

apply()方法与call()方法不同的是,将二个,第三个,第四个....参数用一个数组传递。例如:

    function ClassB(sColor,sName,sSex){
    var arr=new Arry(sColor,sName,sSex);
    ClassA.apply(this,arr);//传递数组

    this.name=sName;
    this.sayName=function(){
        alert(this.name);
    }

}
可以将arguments作为参数传递给apply,但是ClassB的参数顺序必须和ClassA一致。

3.原型链
利用prototype实现继承,prototype对象是个模板,要实例的对象都是以这个模板为基础,它的任何属性和方法都被传递给那个类的所有实例,原型链利用这种功能来实现继承机制。

如果利用原型方式实现继承,实例如下:


原型链
    function ClassA(){
    }
    ClassA.prototype.color="red";
    ClassA.prototype.sayColor=function(){
       alert(this.color);
    }
    function ClassB(){
    }
    ClassB.prototype=newClassA();


通过原型链,ClassA的所有属性和方法传递给了ClassB,用prototype的确是方便很多。

注意的是调用ClassA的构造函数是,没有给它传递参数,这是在原型链中的标准做法。要确保构造函数没有任何参数。如果构造函数中有参数的话会怎样呢?那样便不能完全的继承,只能继承父类通过prototype初始的属性和方法,在构造函数中初始的属性和方法便不会继承。

与对象冒充相似,子类的所有属性和方法都必须出现在prototype属性被赋值之后,因为在它之前赋值的所有方法都会被删除。为什么呢?因为prototype属性被替换成了新的对象,原始对象的prototype属性以不复存在了,例如:

Code
    function ClassB(){
    }
    ClassB.prototype=new ClassA();
    ClassB.prototype.name="";
    ClassB.prototype.sayName=function(){
       alert(this.name);

}

原型链的弊端是不支持多重继承,需要记住的是,原型链会用另一个类型的对象重写类的prototype属性。

4.混合方式
使用原型链方法实现继承非常的方便,问题是不能够使用带参数的构造函数,通常使用构造函数来定义属性是最常见而且是最好的方式,要怎么做才可以好呢?

将对象冒充和原型链法结合起来使用,用对象冒充继承构造函数的属性,用原型链继承prototype对象的方法,用这种方式重写前面的例子,代码如下:

    function ClassA(sColor){
       this.color=sColor;
    }
    ClassA.prototype.sayColor=function(){
       alert(this.color);
    };
    function ClassB(sColor,sName){
       ClassA.call(this,sColor);
       this.name=sName;
    }
    ClassB.prototype=new ClassA(); 
    ClassB.prototype.sayName=function(){
       alert(this.name);
    };
    function show()
    {
        var a=new ClassA("red");
        var b=new ClassB("blue","lhy");
        a.sayColor();//输出red
        b.sayColor();//输出blue
        b.sayName();//输出lhy
    }
在此例子中,继承由两种方式实现,既使用了call方法,又使用了原型链,在构造函数中,用对象冒充继承ClassA类的sColor属性,在接下来的代码中利用原型链继承ClassA的方法,这样结合了对象冒充方法弥补了原型链法不能使用带参的构造函数的缺陷。

分享到:
评论

相关推荐

    js继承的用法

    根据提供的文件信息,我们可以分析并总结出关于JavaScript继承的一些关键知识点。尽管提供的代码示例主要关注于使用jQuery插件初始化一个表格(grid),但这里我们将重点放在如何在JavaScript中实现继承这一主题上。...

    js继承实现示例代码

    ### JavaScript继承实现示例 #### 知识点概述 在JavaScript中,继承是一种常见的对象间关系,它允许一个对象(子类)继承另一个对象(父类或超类)的属性和方法。通过继承,可以复用代码、提高程序的可维护性,并...

    JS继承笔记.7z

    JavaScript是Web开发中的核心语言,尤其在前端领域,它的作用不可或缺。其中,对象的继承机制是JavaScript..."JS继承笔记.md"文档可能对这些概念进行了详细解释,包括示例和最佳实践,是学习JavaScript继承的好资料。

    js继承.doc

    JavaScript,作为一种基于原型的面向对象语言,其继承机制与传统的类继承有所不同。在JS中,对象可以直接通过原型链实现继承,而无需像Java那样使用`extends`关键字。本文档将探讨JavaScript中的继承实现方式及其优...

    JS继承的实现方式

    ### JS继承的实现方式 JavaScript作为一种灵活且功能强大的编程语言,支持多种继承模式。下面将详细介绍几种常见的继承实现方式,并探讨它们的特点与应用场景。 #### 一、原型链继承 **核心思想**: 将父类的实例...

    javascript继承实例

    本篇文章将深入探讨JavaScript继承的实例,以及如何通过继承来提高代码的可维护性和效率。 首先,我们需要了解JavaScript中的原型(prototype)机制。每个JavaScript对象都有一个内部属性[[Prototype]],通常通过`_...

    JavaScript 继承详解(六)

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

    JavaScript继承

    除了传统的原型链继承,JavaScript还支持其他继承模式,如组合继承(组合使用构造函数和原型链)、寄生继承(通过创建父类副本改进继承)、原型式继承(使用`Object.create()`)、寄生组合式继承(被认为是最有效的...

    详解Javascript继承的实现

    本文将深入探讨JavaScript继承的实现方式,以及其中的问题和解决方案。 首先,我们来看混合方式的实现,这种方式结合了原型链和对象冒充。在JavaScript中,构造函数是用于创建特定类型对象的函数。例如,`Employee`...

    JavaScript继承机制研究.pdf

    JavaScript继承机制研究 在本文中,我们将深入探讨JavaScript继承机制的实现方式,并对基于原型的继承、构造函数方式继承、组合继承、寄生式继承等继承机制进行了总结归纳和分析。 基于原型的继承 JavaScript是...

    js继承的实现

    js没有特别明确的实现如何继承,但是能够通过特殊手段实现继承的,有四种方法

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

    这里我们将深入探讨JavaScript继承的特性以及实践应用。 首先,JavaScript的继承基于原型链。每个对象都有一个`__proto__`属性,指向创建它的构造函数的原型对象。当试图访问对象的一个属性时,JavaScript会沿着...

    javascript继承之为什么要继承.docx

    JavaScript 继承之为什么要继承 JavaScript 中的继承机制是指子类继承父类的属性和方法,使得子类可以拥有父类的所有特征。继承是面向对象编程的基本机制之一,它可以实现代码复用、提高编程效率和增强代码的可维护...

    关于js继承笔记.doc

    这里我们主要探讨三种实现JavaScript继承的方式:原型链继承、构造函数继承和组合继承。 首先,原型链继承是JavaScript最常用的继承方式。在JavaScript中,每个函数都有一个prototype属性,这个属性是一个对象,它...

    史上最为详细的javascript继承(推荐)

    JavaScript 继承是面向对象编程中的关键概念,它允许创建基于现有对象的新对象,从而能够复用和扩展已有功能。本文将深入探讨JavaScript中的几种继承方式,包括它们的基本原理、优缺点以及适用场景。 首先,原型链...

    javascript继承的六大模式小结

    本文将深入探讨JavaScript继承的六大模式:原型链、借用构造函数、组合继承、原型式继承、寄生式继承以及寄生组合式继承。 1. **原型链** 原型链是JavaScript中最基础的继承方式,通过原型对象的引用实现。每个...

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

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

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

    JavaScript继承机制探讨及其应用 JavaScript是一门弱类型语言,具有函数式编程和面向对象编程的特点。随着近几年JavaScript生态圈的发展和成熟,项目的编码量和复杂度也在呈几何级数增长。JavaScript面向对象编程中...

Global site tag (gtag.js) - Google Analytics