继承

js中同样可以实现类的继承这一面向对象特性,继承父类中的所有成员(变量和属性),同时可扩展自己的成员,下面介绍几种js中实现继承的方式:

1,对象模仿:通过动态的改变 this 指针的指向,实现对父类成员的重复定义,如下:

function ClassA(paramColor) {
    this.color = paramColor;
    this.sayColor = function() {
        alert(this.color);
    }
}

function ClassB(paramColor, name) {
    //冒充并实现classA中的成员
    this.newMethod = ClassA;
    this.newMethod(paramColor);
    //删除掉对ClassA类冒充所使用的函数对象。
    delete this.newMethod;

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

    var ogj = new ClassB("yellow", "apple");

    console.log("实例obj是否是ClassA的对象" + (obj instanceof ClassA));
    console.log("实例obj是否是ClassB的对象" + (obj instanceof ClassB));
}

上例中我们实现了两个类,ClassA和ClassB,在ClassB的实现过程中,定义了一个函数newMethod来引用ClassA的构造函数并执行,这样就等于执行了A的构造函数,只不过此时的this指针指向的是类ClassB,故ClassA构造函数的这个模仿执行过程其实是给ClassB定义了相同的成员,最后删除这个起桥梁性质的冒充函数,执行结果如下:

根据执行结果我们可以看出,子类ClassB定义的对象并不同属其父类的实例,这种方式实现的继承并不是实际意义上的继承, 此外,这种方式只能模仿实现父类构造函数中定义的成员,对于父类中通过prototype定义的成员将不能继承。

2. 利用apply和call方法实现继承:同第一种方式相似,这种方式是通过apply和call方法动态改变this指针的引用实现对父类成员的重复定义,下面对ClassB改写如下:

//call方法
function ClassBEx(paramColor, name) {
    ClassA.call(this, paramColor);

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

 //aply方法
function ClassBEEx(paramColor, name) {
    //如果类A的构造函数与类B的构造函数参数顺序完全相同时可用
    ClassA.apply(this, arguments); 

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

这种方式同上一种的优缺点一样,并不是实际意义上的继承。

3. 共享prototype对象实现继承:子类通过对父类prototype对象进行共享以对父类成员的定义,从而实现继承,下面对ClassA和ClassB进行重新定义:

//类ClassA的定义
function ClassA(paramColor) {
    this.color = paramColor;
}
ClassA.prototype.sayColor = function() {
    console.log("执行ClassA中的成员函数sayColor:" + this.color);
}
//类ClassB的定义
function ClassB(paramColor, name) {
    this.name = name;
}
//类ClassB共享使用类ClassA的prototype对象
ClassB.prototype = ClassA.prototype;
ClassB.prototype.sayName = function() {
    console.log(this.name);
}
//ClassB重写了类ClassA中的函数成员
ClassB.prototype.sayColor = function() {
    console.log(this.color);
}

var objA = new ClassA("yellow");var obj = new ClassB("red","apple");

console.log("实例obj的color属性" + obj.color);
console.log("实例obj是否是ClassA的对象" + (obj instanceof ClassA));
console.log("实例obj是否是ClassB的对象" + (obj instanceof ClassB));
objA.sayColor();

上面阴影部分代码实现子类ClassB对父类ClassA的prototype对象进行共享,执行结果如下:

结果有点点意外,可以总结为以下几点:

1. 共享prototype对象可以实现子类的实例同属于父类的实例,这点可通过 instance of 返回为true看出;

2. 这种方式的继承只能继承父类prototype中的定义的父类成员,对于父类构造函数中的成员则不能继承,如上图:子类实例obj的color属性为undefined。

3. 共享原型(prototype)法,实际上是使父类和子类的都引用同一个prototype对象,js中除了基本数据类型(数值、字符串、布尔类等),所有的赋值都是引用传递,而不是值传递,上述的共享导致ClassA和ClassB的prototype对象始终保持一致,所以当子类ClassB重复定义了父类中的sayColor函数后,父类中的sayColor也同样更新了,故调用父类sayColor后输出的是“red”。

4. 共享原型方法会导致基类和派生类定义自己的成员时互相干扰。

总之,此方法还是不能实现实际意义上的继承。

4. 通过反射机制和prototype实现继承:在共享原型的基础上进行了改进,通过遍历基类的原型对象来给派生类原型对象赋值,以达到继承的目的,具体如下:

//类ClassA的定义
function ClassA(paramColor) {
    this.color = paramColor;
}
ClassA.prototype.sayColor = function() {
    console.log("执行ClassA中的成员函数sayColor:" + this.color);
}
//类ClassB的定义
function ClassB(paramColor, name) {
    this.name = name;
}
//遍历基类的原型对象来给自己的原型赋值
for (var p in ClassA.prototype) {
    ClassB.prototype[p] = ClassA.prototype[p];
}
ClassB.prototype.sayName = function() {
    console.log(this.name);
}
//ClassB重写了类ClassA中的函数成员
ClassB.prototype.sayColor = function() {
    console.log("执行ClassB中的成员函数sayColor:red");
}

var objA = new ClassA("yellow");
var obj = new ClassB("red", "apple");

console.log("实例obj的color属性" + obj.color);
console.log("实例obj是否是ClassA的对象" + (obj instanceof ClassA));
console.log("实例obj是否是ClassB的对象" + (obj instanceof ClassB));
objA.sayColor();
obj.sayColor();

上面阴影部分的代码为遍历基类(ClassA)的prototype对象然后赋值给派生类ClassB的prototype对象,实现对基类的成员进行继承,执行结果如下:

由上图可见,基类和派生类的prototype是独立的,派生类继承了基类prototype定义的成员,并添加和重写了基类的成员函数sayColor,它们的执行结果互不干扰,唯一的缺憾是当前这种方式仍然不能继承基类构造函数中定义的成员,这一点可以通过在派生类的构造函数中添加一行代码实现,改写派生类ClassB的定义如下:

//类ClassB的定义
function ClassB(paramColor, name) {
    ClassA.call(this, paramColor);
    this.name = name;
}

这样将基类的构造函数通过this指针附加到派生类的执行上下文中执行,实现对基类构造函数中定义的成员的继承。

为了提高代码的可读性,我们改进遍历基类prototype的实现过程:

Function.prototype.inherit = function(superClass) {
    for (var p in superClass.prototype) {
        this.prototype[p] = superClass.prototype[p];
    }
}

通过给Function对象添加成员方法,我们给所有的函数类型对象添加了一个静态方法,实现类的继承我们可以通过下面这句代码:

 ClassB.inherit(ClassA);

从继承的角度,上面这种方式更加容易被接受,但是有一点,通过反射(遍历)结合prototype实现继承的派生类,如果需要额外定义自己的成员,则只能通过对ptototype对象定义新的属性(ClassB.prototype.newAttr=?)来实现,而不能通过无类型方式(ClassB.prototype={}),否则会覆盖掉从基类继承下来的成员。

5. 继承的优化:主要对最后一种继承机制进行优化,定义一个Extend函数,实现对从基类继承后的对象的一个扩展,从而使得派生类添加新成员时更加高效,代码实现如下:

/*
*  将对象p中的属性全部添加到o对象中,如果存在重复,则直接覆盖
*/
function extend(o, p) {
    for (prop in p) {
        o[prop] = p[prop];
    }
    return o;
}
/*
 *    创建以o对象为原型的新的对象。
 *  新的对象包含o中所有的成员
 */
function inherit(o) {
    if (o == null) throw TypeError();
    if (Object.create) {
        return Object.create(o);
    }
    var t = typeof p;
    if (t !== "Object" && t !== "function") throw TypeError();
    function f() { }
    f.prototype = o;
    return new f();
}
/*
 *    通过Function给每个函数对象添加一个静态方法
 *  constructor:派生类构造函数
 *  methods:派生类需要新定义的成员方法
 *  statics:派生类需要定义的静态变量或方法的集合
 *  返回派生类构造函数
 */
Function.prototype.extend = function(constructor, methods, statics) {
    return definedSubClass(this, constructor, methods, statics);
}
/*
 *    js类继承的核心方法
 *  superClass:基类的构造函数(extend的执行时this指针,执行函数对象本身)
 *  constructor:派生类构造函数
 *  methods:派生类需要新定义的成员方法
 *  statics:派生类需要定义的静态变量或方法的集合
 *  返回派生类构造函数
 */
function definedSubClass(superClass, constructor, methods, statics) {
    constructor.prototype = inherit(superClass.prototype);
    constructor.prototype.constructor = constructor;
    if (methods) extend(constructor.prototype, methods);
    if (statics) extend(cosntructor, statics);
    return constructor;
}

这些都是实现类继承模板的核心函数,主要是通过Function对象给所有的函数类型的对象添加了一个静态函数,有了上面的函数,实现上面ClassB继承ClassA,我们可以改为成:

//类ClassA的定义
function ClassA(paramColor) {
    this.color = paramColor;
}
ClassA.prototype.sayColor = function() {
    console.log("执行ClassA中的成员函数sayColor:" + this.color);
}

//ClassA作为基类派生出ClassB
var ClassB = ClassA.extend(function(paramColor, name) {
    //构造函数(成员属性由构造函数定义)
    ClassA.call(this, paramColor);
    this.name = name;
}, {
    //新定义或者重新定义的方法
    sayName: function() {
        console.log(this.name);
    },
    sayColor: function() {
        console.log("执行ClassB中的成员函数sayColor:red");
    }
},
{
    //无静态成员
});

var objA = new ClassA("yellow");
var obj = new ClassB("red", "apple");

console.log("实例obj的color属性" + obj.color);
console.log("实例obj是否是ClassA的对象" + (obj instanceof ClassA));
console.log("实例obj是否是ClassB的对象" + (obj instanceof ClassB));
objA.sayColor();
obj.sayColor();

阴影部分,我们通过扩展的extend函数实现了类的继承,简单明了,执行上面的例子,结果如下:

可以看出,优化后的方法完美的实现了js类的继承中遇到的几个问题。

多态

  面向对象编程中的多态主要是通过抽象类和抽象函数实现的,js中也可以从这两个方面实现多态。传统意义上的多态,是通过派生类继承并实现基类中的抽象(虚)函数来实现的,含有抽象函数的类是抽象类,抽象类是不能够实例化的,同时,抽象函数没有函数体,也不能够直接调用,只能有派生类继承并实现。在高级程序语言中,上述这些检测均在程序编译时进行,不符合要求的程序编译将不通过,但是在js中,有了些许变化:

1. js是解释性语言,不需要进行预编译,所以js中抽象类和抽象函数的使用并没有那么严格的要求。

2. js中可以对未定义的方法进行调用,当然这一过程会报错,而检测时在执行调用时进行的。

所以,js中的抽象类可以定义实例,但就其意义而言,我们可以定义一个空的没有成员的类来代替,同样,js中的抽象函数,我们可以不必在基类中声明,直接进行调用,在派生类中实现即可,当然,也可以通过在基类中定义一个空的抽象方法实现,代码如下:

function ClassA() {
    //抽象类,类的实现过程为空
}
ClassA.prototype = {
    sayColor: function() {
        //直接调用抽象方法
        this.initial();
    },
    //定义一个空的抽象方法由派生类去实现,也可以不定义
    initial: function() { }
}

//ClassA作为基类派生出ClassB
var ClassB = ClassA.extend(function(name) {
    this.name = name;
}, {
    //实现基类中的抽象方法
    initial: function() {
        console.log(this.name);
    }
},
{
    //无静态成员
});

这样的实现与真正意义上的多态相差有点大,可能会让人疑惑这种必要性,为了最大程度的满足严格意义上的多态,我们改写上面的代码如下:

//抽象类
function ClassA() { throw new Error("can't instantiate abstract classes."); }
ClassA.prototype = {
    initial: function() { throw new Error("can't call abstract methods."); }
}

//ClassA作为基类派生出ClassB
var ClassB = ClassA.extend(function(name) {
    this.name = name;
}, {
    //实现基类中的抽象方法
    initial: function() {
        console.log(this.name);
    }
},
{
    //无静态成员
});

为了不让抽象类实例化,我们直接在其构造函数中抛出异常,为了不能直接调用抽象方法,我们也直接在其抽象方法中抛出异常,这样我们就满足了抽象类/方法的严格要求。

javascript面向对象:继承、多态的更多相关文章

  1. JavaScript面向对象继承方法

    JavaScript的出现已经将近20多年了,但是对这个预言的褒贬还是众说纷纭.很多人都说JavaScript不能算是面向对象的变成语言.但是JavaScript的类型非常松散,也没有编译器.这样一来 ...

  2. JavaScript 面向对象继承详解

    题记 由于js不像java那样是完全面向对象的语言,js是基于对象的,它没有类的概念.所以,要想实现继承,一般都是基于原型链的方式: 一.继承初探 大多数JavaScript的实现用 __proto_ ...

  3. day25 面向对象继承,多态,

    这两天所学的都是面向对象,后面还有几天也是它,面向对象主要有三个大的模块,封装,继承,多态,(组合),昨天主要讲了面向对象的命名空间,还有组合的用法,今天是讲的继承还有继承里面所包括的钻石继承,以及多 ...

  4. Javascript 面向对象-继承

    JavaScript虽然不是面向对象的语言,但是我们通过构造可以让其支持面向对象,从而实现继承.重写等面向对象的特性.具体代码如下: //创建类Person function Person(age,n ...

  5. javascript面向对象——继承

    javascript和其他语言相比,它没有真正意义上的继承,也不能从一个父类extends,要实现它的继承可以通过其他方式来实现: 步骤:1.继承父类的属性 2.继承父类的原型 下面就以一个拖拽为例子 ...

  6. JavaScript面向对象--继承 (超简单易懂,小白专属)

    一.继承的概念 子类共享父类的数据和方法的行为,就叫继承. 二.E55如何实现继承?探索JavaScript继承的本质 2.1构造函数之间的"复制粘贴" 第一条路是通过构造函数来继 ...

  7. JavaScript 面向对象继承的实现

    <script type="text/javascript"> function Animal () { this.species="Animal" ...

  8. JavaScript 面向对象程序设计(下)&mdash;&mdash;继承与多态 【转】

    JavaScript 面向对象程序设计(下)--继承与多态 前面我们讨论了如何在 JavaScript 语言中实现对私有实例成员.公有实例成员.私有静态成员.公有静态成员和静态类的封装.这次我们来讨论 ...

  9. JavaScript面向对象(三)——继承与闭包、JS实现继承的三种方式

      前  言 JRedu 在之前的两篇博客中,我们详细探讨了JavaScript OOP中的各种知识点(JS OOP基础与JS 中This指向详解 . 成员属性.静态属性.原型属性与JS原型链).今天 ...

  10. Javascript面向对象特性实现封装、继承、接口详细案例——进级高手篇

    Javascript面向对象特性实现(封装.继承.接口) Javascript作为弱类型语言,和Java.php等服务端脚本语言相比,拥有极强的灵活性.对于小型的web需求,在编写javascript ...

随机推荐

  1. 使用uwsgi 部署python web服务

    uwsgi, wsgi协议的一个很好的实现,源码在这里:https://github.com/unbit/uwsgi c语言编写,有兴趣可以研究下. 上DEMO: wsgi_server.py def ...

  2. jQuery Validate 表单验证插件----Validate简介,官方文档,官方下载地址

     一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...

  3. DP入门数塔问题

    在讲述DP算法的时候,一个经典的例子就是数塔问题,它是这样描述的: 有如下所示的数塔,要求从顶层走到底层,若每一步只能走到相邻的结点,则经过的结点的数字之和最大是多少?        已经告诉你了,这 ...

  4. position绝对剧中

    function loginH(){ var loginH = $('.sign-main-bg .sign-main-content'); var h = loginH.height(); logi ...

  5. 史上最全的ASP.NET MVC路由配置,以后RouteConfig再弄不懂神仙都难救你啦~

    继续延续坑爹标题系列.其实只是把apress.pro.asp.net.mvc.4.framework里的CHAPTER 13翻译过来罢了,当做自己总结吧.内容看看就好,排版就不要吐槽了,反正我知道你也 ...

  6. add-apt-repository cloud-archive:liberty

    apt-get update && apt-get upgrade;

  7. 阿里云配置php环境 ubuntu12.04 32 nginx+php5+mysql

    最近几个客户都订购了阿里云服务器,如何配置服务器就比较重要了 比较喜欢ubuntu的系统,这里以12.04 32位来说 服务器配置采用 nginx+php5+mysql 首先是apt-get的更新 a ...

  8. 关于 innodb_stats_on_metadata 的设置问题

    [问题背景] 线上使用osc进行表修改的时候出现SQL执行过长被kill的问题

  9. vmware虚拟机各个版本的安装破解(附安装包和注册机)

    VMware 是平时我们常用的虚拟机软件,特别是我们平时想试试其他的系统,比如说linux系统的时候但是又不想安装双系统,那么这个时候我们就可以试试这款虚拟软 件,如果你的电脑配置(主要是内存)够好的 ...

  10. React Native系列(6) - 编译安卓私有React-Native代码

    为何要自己编译React Native安卓私有代码 我们在开发中遇到一个HTTP2的问题,React Native安卓客户端在和HTTP2支持的服务器通讯的过程中会有crash,见 React-Nat ...