`

JS中的继承实现

 
阅读更多
今天学习js中的继承,《JavaScirpt高级程序设计》这本书真不错,学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属性。

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

将对象冒充和原型链法结合起来使用,用对象冒充继承构造函数的属性,用原型链继承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的方法,这样结合了对象冒充方法弥补了原型链法不能使用带参的构造函数的缺陷。

分享到:
评论

相关推荐

    javascript 原生态js类继承实现的方式

    几乎每个开发人员都有面向对象语言(比如C++、C#、Java)的开发经验。...但是在JavaScript的世界中,所有的这一切特性似乎都不存在。 因为JavaScript本身不是面向对象的语言,而是基于对象的语言。

    javascript中如何实现封装,继承和多态

    javascript中如何实现封装,继承和多态

    js继承实现示例代码

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

    js继承的实现

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

    JS继承的实现方式

    下面将详细介绍几种常见的继承实现方式,并探讨它们的特点与应用场景。 #### 一、原型链继承 **核心思想**: 将父类的实例设置为子类的原型。 **实现方式**: ```javascript function Animal(name) { this.name = ...

    JavaScript实现继承的几种方式

    本篇文章将深入探讨JavaScript中实现继承的几种常见方式。 1. 原型链继承 JavaScript的原型(prototype)机制是实现继承的基础。每个函数都有一个prototype属性,这个属性指向一个对象,这个对象的属性和方法可以被...

    java script 继承的实现

    在深入研究 JavaScript 继承时,还需要了解其他相关概念,如 `Object.create()`、`instanceof`、`call()`、`apply()` 和 `bind()` 等方法,它们在继承实现中起到关键作用。同时,ES6 中引入的 `class` 关键字和 `...

    【JavaScript的9种继承实现方式归纳】js实现继承的几种方式.pdf

    本文将介绍 JavaScript 中的 9 种继承实现方式,帮助读者更好地理解 JavaScript 的继承机制。 1. 原型链继承 原型链继承是 JavaScript 中实现继承的默认方式。如果要让子对象继承父对象,可以将子对象构造函数的 ...

    javascript中如何实现封装,继承和多态,并有详细

    javascript中如何实现封装,继承和多态,并有详细,我天天在传谢谢

    详解Javascript继承的实现

    本文从以下四个方面展开话题: ...正因如此,我从没想过下次写继承的时候,我要换一种方式来写,直到今天晚上看了三生石上关于javascript继承系列的文章(出的很早,现在才看,真有点可惜),才发现在js里

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

    在JavaScript中,面向对象编程是实现复杂功能和代码复用的关键。继承是面向对象的核心特性之一,它...文章中的`inheritance.html`和`inheritance.js`文件可能包含示例代码,帮助你直观地了解每种继承方式的实现和使用。

    学习javascript面向对象 javascript实现继承的方式

    在JavaScript中,面向对象编程是通过构造函数、原型链和继承实现的。继承是面向对象编程的核心概念之一,它允许我们创建一个新对象,该对象继承现有对象的属性和方法。在JavaScript中,实现继承有多种方式,每种方式...

    js继承.doc

    本文档将探讨JavaScript中的继承实现方式及其优缺点。 首先,我们需要理解JS中的对象与类的区别。在JS中,对象可以直接通过字面量语法创建,例如`var myObj = {...}`,这种对象不能通过`new`关键字实例化,因此它...

    js 实现类式继承

    在JavaScript中,实现类式继承是面向对象编程中的一个关键概念。JavaScript本身是一种基于原型的动态类型语言,但在ES6引入了`class`语法糖,使得类的概念更加清晰,但其实质仍然是基于原型的继承。下面我们将深入...

    jQuery.js中继承的实现.pdf

    在JavaScript中,实现继承通常需要开发者自定义方法。jQuery.js库提供了一种优雅的解决方案,通过`jQuery.extend()`方法实现了对象的继承功能。这个方法在jQuery中扮演着至关重要的角色,它不仅用于合并对象,还用于...

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

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

    JavaScript 继承详解(六)

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

    js javascript zInherit 对象 继承

    `zInherit`是JavaScript中一种常见的对象继承实现方式。 在JavaScript中,有多种实现继承的方法,包括原型链继承、构造函数继承、组合继承、寄生继承、原型式继承、共享原型等。`zInherit`是其中的一种自定义实现,...

    js实现的七种继承方式.md

    使用js实现继承的七种方式,详细讲解了js中的原型链继承,构造函数继承,组合继承(经典继承),原型式继承,寄生式继承,寄生组合式继承,以及ES6中的继承,描述原理以及实现和要点概述等。

Global site tag (gtag.js) - Google Analytics