很多C#或C++开发人员习惯使用继承来开发项目,所以当他们想学习JavaScript语言时,第一个问题一般是:“我怎么在JavaScript中使用继承?”。

实际上JavaScript使用了一种不同于C#或C++的方法来创建面向对象语言。它是基于prototype的语言。原型概念表明行为是可以通过clone已经存在的对象来作为原型复用的。在JavaScript中每个对象都有原型,它定义了一系列对象可以使用的方法和成员。没有class,只有对象。每一个对象可以作为另一个对象的原型。

这个概念是非常灵活的,我们可以用它来模拟OOP继承。

实现继承

让我们想象我们使用JavaScript创建这个层次机构:

首先我们可以简单地创建ClassA。因为没有明确的类,我们只需创建一个函数定义一组行为:

  1. var ClassA = function(){
  2. this.name = "class A";
  3. }

使用new 关键字来实例化这个“类”:

  1. var a = new ClassA();
  2. ClassA.prototype.print = function(){
  3. console.log(this.name);
  4. }

然后使用对象来使用它:

  1. a.print()

很简单,对吧?

完整的样式只用了8行代码:

  1. var ClassA = function() {
  2. this.name = "class A";
  3. }
  4.  
  5. ClassA.prototype.print = function() {
  6. console.log(this.name);
  7. }
  8.  
  9. var a = new ClassA();
  10.  
  11. a.print();

现在让我们来创建类之间的“继承”。这个工具只做一件简单的事:克隆原型:

  1. var inheritsFrom = function(child, parent) {
  2. child.prototype = Object.create(parent,prototype);
  3. };

奇迹发生了!通过clone原型,我们将所有成员和函数传给新类。

所以如果我们想添加第一个类的子类,只需要使用这段代码:

  1. var ClassB = function() {
  2. this.name = "class B";
  3. this.surname = "I'm the child";
  4. }
  5.  
  6. inheritsFrom(ClassB, ClassA);

所以ClassB继承了ClassA的print函数,所以下面代码是有效的:

  1. var b = new ClassB();
  2. b.print();

所以产生以下输出:

  1. class B

我们甚至可以覆盖ClassB的print函数:

  1. ClassB.prototype.print = function(){
  2. ClassA.prototype.print.call(this);
  3. console.log(this.surname);
  4. }

在这种情况下,输出是这样的:

  1. class B
  2. Im the child

这里的技巧是调用ClassA.prototype来获取print函数。由于call函数我们可以对当前对象(this)调用基本函数。

创建ClassC是显而易见的:

  1. var ClassC = function () {
  2. this.name = "class C";
  3. this.surname = "I'm the grandchild";
  4. }
  5.  
  6. inheritsFrom(ClassC, ClassB);
  7.  
  8. ClassC.prototype.foo = function() {
  9. // Do some funky stuff here...
  10. }
  11.  
  12. ClassC.prototype.print = function () {
  13. ClassB.prototype.print.call(this);
  14. console.log("Sounds like this is working!");
  15. }
  16.  
  17. var c = new ClassC();
  18. c.print();

输出:

  1. class C
  2. Im the grandchild
  3. Sounds like this is working!

总结

最后,我想说明JavaScript不是C#或C++。它有自己的哲学。如果你说C++或C#程序员,并且你真的很想了解JavaScript所有精华,我给你最好的提示:不要试图将你的语言复制到JavaScript。没有最好的语言或最差的语言。只是不同的哲学!

链接: http://www.sitepoint.com/simple-inheritance-javascript/

JavaScript简单继承的更多相关文章

  1. 简述一个javascript简单继承工具的实现原理

    背景 由于本人非常希望能够开发自己的游戏,所以业余时间一直在想着能不能自己一些好玩又有趣的东西出来,最近随着steam上众多独立游戏的爆发,感觉自己又燃烧了起来,所以又拾起了很久以前的一个2d引擎,决 ...

  2. 详解Javascript的继承实现(二)

    上文<详解Javascript的继承实现>介绍了一个通用的继承库,基于该库,可以快速构建带继承关系和静态成员的javascript类,好使用也好理解,额外的好处是,如果所有类都用这种库来构 ...

  3. 再谈javascript原型继承

    Javascript原型继承是一个被说烂掉了的话题,但是自己对于这个问题一直没有彻底理解,今天花了点时间又看了一遍<Javascript模式>中关于原型实现继承的几种方法,下面来一一说明下 ...

  4. [转]Javascript原型继承

    真正意义上来说Javascript并不是一门面向对象的语言,没有提供传统的继承方式,但是它提供了一种原型继承的方式,利用自身提供的原型属性来实现继承.Javascript原型继承是一个被说烂掉了的话题 ...

  5. JavaScript 的继承与多态

    本文先对es6发布之前javascript各种继承实现方式进行深入的分析比较,然后再介绍es6中对类继承的支持以及优缺点讨论.最后介绍了javascript面向对象编程中很少被涉及的“多态”,并提供了 ...

  6. javascript的继承模式

    在javascript里面看到javascript的继承模式和传统的继承模式是有区别的,就想查资料看一下到底有区别,就看到了这篇文章,觉得讲得还可以,暂时先放上来,以后有别的东西再补充: http:/ ...

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

    JavaScript面向对象-继承的实现 前言 面向对象的三大特性:封装.继承和多态.上一篇我们简单的了解了封装的过程,也就是把对象的属性和方法封装到一个函数中,这一篇讲一下JavaScript中继承 ...

  8. Javascript模拟继承(赠送.net吐槽一段)

    首先吐槽一句,今年的就业形势很不乐观啊,特别是搞.net的(相对java),特特别是还没出校门没有正式工作经验的,找个实习很难,前些天接了个面试电话,上来就质疑我“你一个在校大学生怎么可能做了那么多项 ...

  9. JavaScript之继承(原型链)

    JavaScript之继承(原型链) 我们知道继承是oo语言中不可缺少的一部分,对于JavaScript也是如此.一般的继承有两种方式:其一,接口继承,只继承方法的签名:其二,实现继承,继承实际的方法 ...

随机推荐

  1. 关于使用mybatis的分页插件问题

    首先我需要导入架包 1.pagehelper 如果你是在mybatis中配置分页‘ 如下代码 <plugins> <plugin interceptor="com.gith ...

  2. Windows及Linux环境搭建Redis集群

    一.Windows环境搭建Redis集群 参考资料:Windows 环境搭建Redis集群 二.Linux环境搭建Redis集群 参考资料:Redis Cluster的搭建与部署,实现redis的分布 ...

  3. SQL 事物回滚

    转自https://www.cnblogs.com/delphinet/archive/2010/08/17/1801424.html 第一种:   declare   @iErrorCount    ...

  4. python爬虫之路——正则表达式初识

    正则表达式:是一个特殊的符号系列,检查字符串是否与指定模式匹配. python中的re模块拥有全部的正则表达式功能. 判断字符: 类型: 数目:有无:   个数:单值     区间      离散 判 ...

  5. 使用ABAP代码提交SAP CRM Survey调查问卷

    Jerry之前曾经写过两篇关于SAP CRM Survey调查问卷的技术文章: SAP CRM Survey调查问卷的模型设计原理解析 如何使用SAP CRM Marketing Survey创建一个 ...

  6. OpenLayers 3 的 图层控制控件

    openlayers3的control中没有提供默认的图层控制控件. 但是git上已经有造好的轮子,直接拿来用就可以了.地址 https://github.com/walkermatt/ol3-lay ...

  7. 2017年团体程序设计天梯赛 - 大区赛 L3-3

    题意:有向图找哈密顿回路 比赛的时候剪枝只剪了vis 状压没剪对 反而只拿17分... 比赛结束后还去看了一发这个NP问题的QB(快速回溯法...但是对于本题好像大材小用...) 上网看了一个神犇的写 ...

  8. Android(java)学习笔记119:BroadcastReceiver之 短信发送的广播接收者

    有时候,我们需要开发出来一个短信监听器,监听用户发送的短信记录,下面就是一个案例,这里同样需要使用广播机制. 下面同样是代码示例,MainActivity.java 和  activity_main. ...

  9. [课堂总结]C++课堂总结(二)

    近期的面向对象程序设计的不容易记忆或者理解的东西进行一个总结,以后忘记了可以常来看下,C++是个很重要的东西,很多领域都用得到,加油,特种兵! 浅拷贝构造.深拷贝构造 浅拷贝构造是系统默认的拷贝构造函 ...

  10. Array - Remove Element

    /** * 无额外空间.顺序可以被改变.不需要修改后面的数字. * @param nums 数组 * @param val 目标值 * @return nums中移除val后的长度 */ public ...