说到面向对象这个破玩意,曾经一度我都处于很懵逼的状态,那么面向对象究竟是什么呢?其实说白了,所谓面向对象,就是基于类这个概念,来实现封装、继承和多态的一种编程思想罢了。今天我们就来说一下这其中继承的问题。

  好,先不直接上代码,而是反手来一波文字说明,捋一捋思路。

  曾经一段时间因为javascript关于类实现继承的不规范,导致各种各样实现继承的代码;而实际上不管代码怎么变,继承都基于两种方式:

  1.通过原型链,即子类的原型指向父类的实例从而实现原型共享。
  2.借用构造函数,即通过js的apply、call实现子类调用父类的属性、方法;
  原型链方式可以实现所有属性方法共享,但无法做到属性、方法独享(例如son1指向的是父类实例,son2,son3同样如此,大家都是吃的同一碗饭);

  而借用构造函数除了能独享属性、方法外还能在子类构造函数中传递参数,但代码无法复用。总体而言就是可以实现所有属性方法独享,但无法做到属性、方法共享(例如,son1新增了一个函数,然后想让son2、son3一起用的话就无法实现了,只能son2,son3各自在构造函数中新增)。

  组合继承就是把以上两种继承方式一起使用,把共享的属性、方法用原型链继承实现,独享的属性、方法用借用构造函数实现,所以组合继承几乎完美实现了js的继承;
为什么说是“几乎”?因为后来人们发现组合继承有一个小bug,实现的时候调用了两次父类,性能上不合格啊有木有!怎么解决呢?于是“寄生继承”就出来了。

  寄生继承:
  简单而言,寄生继承就是不用实例化父类了,直接实例化一个临时副本实现了相同的原型链继承。(即子类的原型指向父类原型的副本),如此一来,这个问题就完美解决了。

 
  接下来是代码部分:
  
 
  这里我们通过apply方法给儿子传了私有属性,但是父类原型上的方法是无法调用的。
  然后我们试试通过原型链来实现继承。
  
  这样一来就把父类的全部东西都一股脑继承下来了,而且我这里如果Sons修改了父类的原型,其他跟着用的比如Daughters也要跟着遭殃。
  而组合继承这时候就出来了,组合继承就是把以上两种继承方式一起使用,把共享的属性、方法用原型链继承实现;独享的属性、方法用借用构造函数实现。至于寄生组合继承,它是为了解决组合继承会二次调用父类这个bug出现的优化方法,具体实现如下:
  
  在这一步,无论是儿子还是女儿,都能成功调用父类的公用方法。接着在末尾添加两行代码往下看:
  
   两个say方法虽然同名,却互不影响。最后调用父类的私有属性看看:
  
  只有儿子利用私有属性拿到了secret,而女儿没有拿到,完美解决共享与独享分配的问题!
 

捋一捋js面向对象的继承问题的更多相关文章

  1. js面向对象之继承那点事儿根本就不是事

    继承 说道这个继承,了解object-oriented的朋友都知道,大多oo语言都有两种,一种是接口继承(只继承方法签名):一种是实现继承(继承实际的方法) 奈何js中没有签名,因而只有实现继承,而且 ...

  2. JS面向对象组件 -- 继承的其他方式(类式继承、原型继承)

    继承的其他形式: •类式继承:利用构造函数(类)继承的方式 •原型继承:借助原型来实现对象继承对象   类 : JS是没有类的概念的 , 把JS中的构造函数看做的类 要做属性和方法继承的时候,要分开继 ...

  3. JS——面向对象、继承

    创建对象的方式: 1)单体 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  4. JS 面向对象之继承 -- 原型链

    ECMAScript只支持实现继承,其实现继承主要是靠原型链来实现. 原型链的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法. 简单回顾下构造函数.原型和实例的关系: 每个构造函数都有 ...

  5. js面向对象之继承-原型继承

    //animal 父类 超类 var Animal = function(name) { this.name = name; this.sayhello = function() { alert(&q ...

  6. JS 面向对象之继承---多种组合继承

    1. 组合继承:又叫伪经典继承,是指将原型链和借用构造函数技术组合在一块的一种继承方式. 下面来看一个例子: function SuperType(name) { this.name = name; ...

  7. Js面向对象构造函数继承

    构造函数继承 <!-- 创建构造函数 --> function Animal(){ this.species= '动物'; } function Dog(name,color){ this ...

  8. JS面向对象(封装,继承)

    在六月份找工作中,被问的最多的问题就是: js面向对象,继承,封装,原型链这些,你了解多少? 额,,,我怎么回答呢, 只能说,了解一些,不多不少,哈哈哈哈,当然,这是玩笑话. 不过之前学过java,来 ...

  9. JS面向对象笔记二

    菜单导航,<JS面向对象笔记一>,  参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...

随机推荐

  1. Redis单机版安装

    1.工具简单介绍 1.博主使用的是Xshell工具 ps:需要设置端口和连接名称,端口一般默认为22,需要的童鞋可以自行百度 2.Redis单机版安装 第一步:安装gcc编译环境 yum instal ...

  2. 新版Azure Automation Account 浅析(二) --- 更新Powershell模块和创建Runbook

    前篇我们讲了怎样创建一个自动化账户以及创建时候"Run As Account"选项背后的奥秘.这一篇针对在Azure自动化账户中使用Powershell Runbook的用户讲一下 ...

  3. python正则表达式re模块详细介绍

    转自:http://www.jb51.net/article/50511.htm 本模块提供了和Perl里的正则表达式类似的功能,不关是正则表达式本身还是被搜索的字符串,都可以是Unicode字符,这 ...

  4. intellij springmvc的配置文件报错

    报错: Checks references injected by IntelliLang plugin. Cannot resolve bean  解决: File--Settings[或直接CTR ...

  5. JVM-垃圾收集的过程

    JDK1.7 JVM的垃圾收集算法有 1. 标记-清除算法: 2. 复制算法:在商业虚拟机都是使用这种算法来回收新生代的 3. 标记-整理算法: JDK1.7 JVM的垃圾收集器有 1. Serial ...

  6. Servlet--转发和重定向

    Servlet的跳转有2种,一种是转发,一种是重定向. 重定向: <strong><span style="font-size:14px;"></sp ...

  7. css3 box-shadow让我们实现图层阴影效果

    box-shadow box-shadow: h-shadow v-shadow blur spread color inset;box-shadow:2px 2px 3px rgba(50,50,5 ...

  8. 将excel文件内容存储到数据库,并可以实时在前端查看(不必生成文件)

    版权声明:本文为博主原创文章,未经博主允许不得转载 本文主要讲前端内容,后端涉及较少,可以认为是使用Java. 首先是excel文件上传,这个较为简单,可以html5的数据接口FormData()进行 ...

  9. MonogoDB 查询小结

    MonogoDB是一种NoSQL数据库 优点: 1.数据的存储以json的文档进行存储(面向文档存储) 2.聚合框架查询速度快 3.高效存储二进制大对象 缺点: 1.不支持事务 2.文件存储空间占用过 ...

  10. xBIM WeXplorer

    目录 基础 xBIM WeXplorer 简要介绍 xBIM WeXplorer xViewer 基本应用 xBIM WeXplorer xViewer 浏览器检查 xBIM WeXplorer xV ...