一 原理

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

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

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. Map 接口

    1.键值对存储一组对象 2.key值不能重复,value可以重复 3.具体的实现类,HashMap,treeMap,HashTable,LinkedHashMap ------------------ ...

  2. VSFTP 服务器配置

    解决root用户无法登陆ftp传输文件的问题 配置vsftpd用户,启用root用户.  #cd /etc/vsftpd #vi ftpusers  注释掉root  修改user_list文件  # ...

  3. 尚硅谷springboot学习6-eclipse创建springboot项目的三种方法(转)

    方法一 安装STS插件 安装插件导向窗口完成后,在eclipse右下角将会出现安装插件的进度,等插件安装完成后重启eclipse生效 新建spring boot项目 项目启动 方法二 1.创建Mave ...

  4. Unable to connect to zookeeper server within timeout: 5000

    错误 严重: StandardWrapper.Throwable org.springframework.beans.factory.BeanCreationException: Error crea ...

  5. linux 2.6.32文件系统的inode

    接上文: crash> struct -xo dentry.d_inode ffff8818118002c0 struct dentry { [ffff8818118002d0] struct ...

  6. foreman自动化工具安装使用

    简单的安装指导在官网上 官网地址为:https://theforeman.org/ 点击get started 找到 Installation 选择直接的发行版按照步骤一个一个来 需要注意的是,主机名 ...

  7. LeetCode OJ 24. Swap Nodes in Pairs

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...

  8. 2008-03-18 22:58 oracle基础知识小结

    oracle 数据类型: 字段类型                 中文说明                                                  限制条件         ...

  9. Android通过adb命令Debug调试

    Android Debug后IDE执行的命令: / ::: Launching module_app $ adb push C:\fastwork\Projects\project\CJPT\modu ...

  10. Celery 图,[转]

    https://www.cnblogs.com/forward-wang/p/5970806.html