"继承是面向对象开发的又一个重要概念,它可以将现实生活的概念对应带程序逻辑中"。“  虽然在JavaScript中没有专门的机制来实现类的继承,但可以通过拷贝一个类的prototype 到另外一个类来实现继承”。我们看到这里继承的概念是多么的直白,“拷贝一个类的prototype 到另外一个类”,好,Code is cheap,看代码:

Code
function class1() { }
function class2() { }
class2.prototype = class1.prototype;
class2.moreProperty1 = "class 2 additional string";
class2.moreMethod1 = function() { alert("class 2 additional method"); }
/*
 这样,首先是class2具有了和class1 一样的prototype,不考虑构造函数,两个类是等价的。
 随后,又通过prototype给class2赋予了两个额外的方法。所以class2是在class1的基础上
 增加了属性和方法,这就实现了类的继承。
*/

function test() {
    var obj = new class2();
    // JavaScript提供了instanceof 操作符来判断一个对象是否是某个类的实例
    alert(obj instanceof class2); // true
    alert(obj instanceof class1); // ?
}

运行代码,结果是不是在我们的意料之中?表面上看,上面的实现完全可行,js也可以正确的理解和实现这种继承关系,obj同时是class1和class2的实例,但实质上则不然(我们学习的目的是要知其然更要知其所以然)。js的这种理解实际上是基于一种很简单的策略,看下面的代码,先使用prototype让class2 继承于class1,再在class2 中重复定义method 方法:

Code
//定义class1 
function class1() {
    //构造函数 
}
//定义class1 的成员 
class1.prototype = {
    m1: function() { // 方法1
        alert("class1 method1");
    }
}
//定义class2 
function class2() {
    //构造函数 
}
//让class2 继承于class1
class2.prototype = class1.prototype;

//给class2 重复定义方法method 
class2.prototype.method = function() {
    alert("whose method2? class1 or class2");
}
//创建两个类的实例
var obj1 = new class1();
var obj2 = new class2();

function test() {
    //分别调用两个对象的method 方法 
    obj1.method();
    obj2.method();
}

从代码执行结果看,method方法在class1,2中运行的结果是相同的。

由此可见,当对class2 进行prototype  的改变时,class1的prototype也随之改变,即使对class2  的prototype  增减一些成员,class1的成员也随之改变。所以class1 和class2 仅仅是构造函数不同的两个类,它们保持着相同的成员定义。说到这里,相信读者已经发现了其中的奥妙:class1 和class2 的prototype 是完全相同的,是对同一个对象的引用。其实从这条赋值语句就可以看出来: 
 //让class2 继承于class1 
 class2.prototype=class1.prototype;
   在js中,除了基本的数据类型(数字、字符串、布尔类型等),所有的赋值以及函 数参数都是引用传递,而不是值传递。所以上面的语句仅仅是让class2 的prototype 对象引用class1 的prototype,造成了类成员定义始终保持一致的效果。从这里也看到了instanceof 操作符的执行机制,它就是判断一个对象是否是一个prototype 的实例,因为这里的obj1 和obj2  都是对应于同一个prototype,所以它们instanceof 的结果都是相同的。由此可见,使用prototype  引用拷贝实现继承不是一种正确的办法。但在要求不严格的情况下,却也是一种合理的方法,唯一的约束是不允许类成员的覆盖定义(这里其实也是js的灵活性的体现)。其实,我们完全可以利用反射机制和prototype 来实现js正确的类继承:

Code
function class1() {
    //构造函数 
}
class1.prototype = {
    method: function() {
        alert("method1");
    },
    method2: function() {
        alert("method2");
    }
}
function class2() {
    //构造函数
}

//让class2 继承于class1 
for (var p in class1.prototype) {
    class2.prototype[p] = class1.prototype[p]; // 利用反射机制和prototype实现继承
}

//覆盖定义class1中的method 方法 
class2.prototype.method = function() {
    alert("class2 new method1");
}

//创建两个类的实例
var obj1 = new class1();
var obj2 = new class2();

function test() {
    //分别调用两个对象的method 方法 
    obj1.method();
    obj2.method();
    //分别调用两个对象的method2 方法
    obj1.method2();
    obj2.method2();
}

从运行结果可见,obj2中重复定义的method 已经覆盖了继承的method方法,同时method2 方法未受影响。而且obj1中的method 方法仍然保持了原有的定义。这样,就实现了正确意义的类的继承。为了方便开发,可以为每个类添加一个共有的方法,用以实现类的继承:

Code
//为类添加静态方法inherit表示继承于某类 
Function.prototype.inherit = function(baseClass) {
    for (var p in baseClass.prototype) {
        this.prototype[p] = baseClass.prototype[p];
    }
}

function class1() {
    //构造函数 
}
class1.prototype = {
    method: function() {
        alert("method1");
    },
    method2: function() {
        alert("method2");
    }
}
function class2() {
    //构造函数
}

//让class2 继承于class1 
//for (var p in class1.prototype) {
//    class2.prototype[p] = class1.prototype[p]; // 利用反射机制和prototype实现继承
//}

class2.inherit(class1); // 等价于上面注释掉的那一个for循环

//覆盖定义class1中的method 方法 
class2.prototype.method = function() {
    alert("class2 new method1");
}

//创建两个类的实例
var obj1 = new class1();
var obj2 = new class2();

function test() {
    //分别调用两个对象的method 方法 
    obj1.method();
    obj2.method();
    //分别调用两个对象的method2 方法
    obj1.method2();
    obj2.method2();
}

上面的代码使逻辑变的更加清楚,也更容易理解。通过这种方法实现的继承,有一个缺点,就是在class2 中添加类成员定义时,不能给prototype 直接赋值,而只能对其属性进行赋值,例如不能为:
class2.prototype={
                           //成员定义
                      } 
 而只能为:               
    class2.prototype.propertyName=someValue; 
    class2.prototype.methodName=function(){ 
                         //语句
                      }

由此可见,这样实现继承仍然要以牺牲一定的代码可读性为代价。有没有“不仅基类可以用对象直接赋值给property,而且在派生类中也可以同样实现,使代码逻辑更加清晰,也更能体现面向对象的语言特点”的js继承方式?引号里的说法是多么的诱人啊,继续学习去了。

javascript:面向对象编程基础:继承相关推荐

  1. javascript:面向对象编程基础:多态

    js的重载和重写(覆写): 重载的意思是,"同一个名字的函数(注意这里包括函数)或方法可以有多个实现,它们依靠参数的类型和(或)参数的个数来区分识别". 而重写(覆盖)的意思是,& ...

  2. JavaScript 面向对象编程(二) —— 构造函数 / 原型 / 继承 / ES5 新增方法

    本篇为 JavaScript 进阶 ES6 系列笔记第二篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 : Javascript 继承机制的 ...

  3. (二)Javascript面向对象编程:构造函数的继承

    Javascript面向对象编程:构造函数的继承 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承&q ...

  4. javascript面向对象编程实现[定义(静态)属性方法--继承]

    javascript面向对象编程实现:             1.类的声明:                 function test1(){                     this.p ...

  5. 在JavaScript面向对象编程中使用继承(5)

    明天就要回老家去过年了,关于这个"在JavaScript面向对象编程中使用继承"的话题居然还没有说完.如果不完成,留下来一拖就拖到明年去了.所以还是抽空把它写完,今年的事情今年做, ...

  6. javascript 面向对象编程(封装、继承)

    在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法. Javascript语言不支持"类",但是可 ...

  7. JavaScript面向对象编程深入分析

    JavaScript面向对象编程深入分析 一. Javascript 面向对象编程:封装 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又 ...

  8. JavaScript 面向对象编程(四) —— 正则表达式

    本篇为 JavaScript 进阶 ES6 系列笔记第四篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 : 系列笔记: JavaScript 面向对象编程(一) -- 面向对 ...

  9. JavaScript 面向对象编程(三) —— 函数进阶 / 严格模式 / 高阶函数 / 闭包 / 浅拷贝和深拷贝

    本篇为 JavaScript 进阶 ES6 系列笔记第三篇,将陆续更新后续内容.参考:JavaScript 进阶面向对象 ES6 :ECMAScript 6 入门 系列笔记: JavaScript 面 ...

最新文章

  1. 引入yml依赖包_手把手教你发布 Python 项目开源包
  2. HashSet中的add()方法( 三 )(详尽版)
  3. 使用OpenCV进行图像全景拼接
  4. SDN控制器构建原理方法—Vecloud
  5. Linux下CMake简明教程(二)同一目录下多个源文件
  6. 理解Vue 2.5的Diff算法
  7. hdu 2686 Matrix 最大费用最大流
  8. html:(2):制作第一个网页和html和css的关系
  9. NLP-BERT 谷歌自然语言处理模型:BERT-基于pytorch
  10. 【Flume】Flume简单介绍
  11. 【我看Spring】从一个简单的AOP示例看切面编程
  12. JSP学生日常记账系统综合课程设计报告
  13. 2011年电子科技大学博士生招生参考书目
  14. Matlab的循环语法
  15. dwg格式的计算机图,dwg是什么文件 怎么打开【图文】
  16. java实现pdf转图片
  17. IP-Guard使用中63个常见问题
  18. android7.0官方高清壁纸,抢鲜体验!安卓7.0自带原生壁纸打包下载
  19. 【C语言】calloc函数
  20. 一张纸对折多少次后能达到珠穆朗玛峰的高度

热门文章

  1. android rfid 数据解析_手持机是什么?RFID手持机是什么?
  2. cdecl、stdcall、fastcall函数调用约定区别
  3. 2017年如何成为全栈工程师,这些技能是你必须具备的!
  4. 函数onsize()与onsizing()区别
  5. 损失函数|交叉熵损失函数
  6. 计算机二级asscii的知识点,计算机二级试题及答案
  7. 用python做逻辑回归梯度上升_机器学习实例---4.1、Logistic回归基础篇之梯度上升算法...
  8. visual basic.net 2019-当前内存状态、字符串内插、操作系统系统信息
  9. 【数据竞赛】这篇文章送给想要学习特征交叉的朋友。
  10. 【Python基础】分享5 款超牛逼的 Jupyter Notebook 插件!