一 原理

组合继承仅仅是同时使用了原型链继承和构造函数继承。

具体做法是,将父类的实例作为子类的构造函数的原型对象,并在子类的构造函数中调用父类的构造函数。

function Fruit(name){
this.name = name;
this.nutrition = ['维生素'];
} Fruit.prototype.eat = function(){
console.log('eat');
} function Mango(name,level){
Fruit.call(this,name); // 第二次调用父类的构造函数
this.level = level;
} let fruit = new Fruit(); // 第一次调用父类的构造函数
Mango.prototype = fruit;
Mango.prototype.constructor = Mango; let mango1 = new Mango('泰国芒果','优');
let mango2 = new Mango('海南芒果','良'); // 子类的实例持有两份继承的属性:一份是共享原型对象中的属性;另一份是自己的私有属性。
mango1.nutrition.push('膳食纤维');
mango2.nutrition.push('柠檬酸');
console.log(mango1.nutrition,mango1.__proto__.nutrition); // ["维生素", "膳食纤维"] ["维生素"]
console.log(mango2.nutrition,mango2.__proto__.nutrition); // ["维生素", "柠檬酸"] ["维生素"]
console.log(mango1.__proto__.nutrition === mango2.__proto__.nutrition); // true // 拼接了原型链,支持instanceof、isPrototypeOf
console.log(mango1 instanceof Fruit); // true
console.log(mango1 instanceof Mango); // true
console.log(Fruit.prototype.isPrototypeOf(mango1)); // true
console.log(fruit.isPrototypeOf(mango1)); // true

二 优点

1 既可以从父类的构造函数的原型对象继承方法,也能从父类的构造函数继承属性。

2 既是父类的实例,也是子类的实例。

3 拼接了原型链,支持instanceof、isPrototypeOf检测。

4 调用父类的构造函数时可以传参数。

5 从父类的构造函数的原型对象继承的方法,可以被复用,被所有子类的实例共享。

三 缺点

父类的构造函数执行了两次,从而父类的实例属性被创建了两次,在子类的原型对象、子类的实例中都存在。父类的实例属性被继承了两次,子类的实例中的属性覆盖了子类的原型对象中的属性。浪费了内存和性能。

JavaScript各种继承方式(三):组合继承(combination inheritance)的更多相关文章

  1. 三张图搞懂JavaScript的原型对象与原型链 / js继承,各种继承的优缺点(原型链继承,组合继承,寄生组合继承)

    摘自:https://www.cnblogs.com/shuiyi/p/5305435.html 对于新人来说,JavaScript的原型是一个很让人头疼的事情,一来prototype容易与__pro ...

  2. javascript学习笔记--经典继承、组合继承、原型式继承、寄生继承以及寄生组合继承

    经典继承 js中实现经典继承的方式是通过构造函数来实现的,即在子类中对父类调用call方法. function Geometric() { this.time = ""; this ...

  3. C++ 继承方式 //语法:class 子类 :继承方式 父类 //继承方式 三种: //1.公共继承 //2.保护继承 //3.私有继承

    1 //继承方式 2 //语法:class 子类 :继承方式 父类 3 //继承方式 三种: 4 //1.公共继承 5 //2.保护继承 6 //3.私有继承 7 8 #include <ios ...

  4. [修]python普通继承方式和super继承方式

    [转]python普通继承方式和super继承方式 原文出自:http://www.360doc.com/content/13/0306/15/9934052_269664772.shtml 原文的错 ...

  5. ECMAScript有6种继承方式(实现继承)

    本人对于ECMAScript继承机制有些见解,如果说的不对,敬请赐教~~~~ 继承是OO语言(面向对象)挺好的概念,许多OO语言都支持两种继承方式(接口只继承方法签名.实际继承则继承实际的方法),但是 ...

  6. C++中的类继承(1) 三种继承方式

    继承是使代码可以复用的重要手段,也是面向对象程序设计的核心思想之一.简单的说,继承是指一个对象直接使用另一对象的属性和方法.继承呈现了 面向对象程序设 计的层次结构, 体现了 由简单到复杂的认知过程. ...

  7. C++继承(一) 三种继承方式

    继承定义 继承是使代码可以复用的重要手段,也是面向对象程序设计的核心思想之一. 继承就是不修改原有的类,直接利用原来的类的属性和方法并进行扩展.原来的类称为基类,继承的类称为派生类,他们的关系就像父子 ...

  8. 【Python】python 普通继承方式和super继承方式

    Python中对象方法的定义很怪异,第一个参数一般都命名为self(相当于其它语言的this),用于传递对象本身,而在调用的时候则不必显式传递,系统会自动传递.举一个很常见的例子:>>&g ...

  9. python 普通继承方式和super继承方式

    Python中对象方法的定义很怪异,第一个参数一般都命名为self(相当于其它语言的this),用于传递对象本身,而在调用的时候则不必显式传递,系统会自动传递. 举一个很常见的例子: >> ...

  10. mfc 类三种继承方式下的访问

    知识点 public private protected 三种继承方式 三种继承方式的区别 public 关键字意味着在其后声明的所有成员及对象都可以访问. private 关键字意味着除了该类型的创 ...

随机推荐

  1. APPium-Xpath,swipe练习

    写自动化测试,实现 滚动到 口碑最佳 部分,并且打印出所有 口碑最佳 部分的5个应用名称 # coding:utf-8from appium import webdriverimport time d ...

  2. UI5-学习篇-14-基于BSP应用部署Fiori Launchpad

    1.UI5应用发布前端服务器 UI5-学习篇-10-本地UI5应用部署到SAP前端服务器 2.登录Fiori https://XXXXXX:50000/sap/bc/ui5_ui5/sap/arsrv ...

  3. 微服务-dubbo学习

    什么是微服务: 由于业务发展迅速,为了减少代码和功能重复,方便扩展,部署,维护等因素,将系统业务组件化和服务化拆分,拆分为一个个独立的服务,由服务治理系统统一管理,每个微服务为一个进程,之间的通讯方式 ...

  4. leetcode ex3 找出穿过最多点的直线 Max Points on a Line

    题目 https://oj.leetcode.com/problems/max-points-on-a-line/ 答案与分析 http://www.aiweibang.com/yuedu/18326 ...

  5. pbft流程深层分析和解释(转)

    <1>pbft五阶段请求解释 Request  pre-prepare   prepare   commit  执行并reply (1)pre-prepare阶段: 主节点收到客户端请求, ...

  6. Java面试题_简答题

    作为一个大三在校生,很快就要去实习了,但总感觉自己连一个刚入门的菜鸟都不如,哎.发现自己连那个程序员的门槛都还没进,有点小伤心,不过伤心没用,努力向前才是我们现在应该做的事情. 下面是我之前在学校所从 ...

  7. Error building Player: Exception: Could not start java

    4.6.1发布Flash版本出错.解决方法:把C:\Windows\System32\java.exe复制到C:\Windows\SysWOW64下即可

  8. java split函数结尾空字符串被丢弃的问题

    参考: http://yinny.iteye.com/blog/1750210 http://www.xuebuyuan.com/1692988.html java中的split函数用于将字符串分割为 ...

  9. 高效Java敏感词、关键词过滤工具包_过滤非法词句

    敏感词.文字过滤是一个网站必不可少的功能,如何设计一个好的.高效的过滤算法是非常有必要的.前段时间我一个朋友(马上毕业,接触编程不久)要我帮他看一个文字过滤的东西,它说检索效率非常慢.我把它程序拿过来 ...

  10. 导入maven框架报错

    原因pom文件第一行报错X org.apache.maven.archiver.mavenarchiver.getmanifest怎么解决 解决: 原因就是你的maven的配置文件不是最新的 1.he ...