一 原理

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

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

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. 尚硅谷springboot学习1-简介

    以前看过springboot的相关知识,当时偷懒没有做笔记,现在忘得已经差不多了,现在趁着过年有时间,再学习一遍,并做下笔记以备忘. 特性 Spring Boot来简化Spring应用开发,约定大于配 ...

  2. delphi 新版内存表 FDMemTable

    c++builder XE 官方demo最全60多个 http://community.embarcadero.com/blogs?view=entry&id=8761 FireDAC.Com ...

  3. Linux:使用读写锁使线程同步

    基础与控制原语 读写锁 与互斥量类似,但读写锁允许更高的并行性.其特性为:写独占,读共享. 读写锁状态: 一把读写锁具备三种状态:     1. 读模式下加锁状态 (读锁)     2. 写模式下加锁 ...

  4. shell字符串基本操作

    shell脚本中一切变量皆字符串,所以必须掌握字符串的常用处理方法.比如获取字符串长度.获取字符串指定位置字符.替换字符串中的指定字符或者删除某些字符等操作. 1.字符串操作列表 (1)var=val ...

  5. 关于PHP Notice: A non well formed numeric value encountered, 你知道多少

    ---------------------------------------------------------------------------------------------- A non ...

  6. Android DevArt2:Android 5.0下 Dialog&AlertDialog 并不会影响Activity的生命周期

    先给出结论:Dialog和AlertDialog并不会影响到Activity的生命周期,但会影响到Activity的优先级. 核心代码: onCreated中: Resources resources ...

  7. jQuery垂直二级导航菜单代码

    http://www.sucaihuo.com/js/395.html 分享一个简单的垂直二级菜单导航.   HTML <div id="my_menu" class=&qu ...

  8. linux centos 访问根目录 not accessable

    chmod 777 root 即可 或  chmod a+x root https://blog.csdn.net/CSDN_GYG/article/details/73276310

  9. 微擎框架下拉分页(使用js模板引擎)

    1.需要分页的页面,引入一下文件 <script language="javascript" src="\addons\{$_GPC['m']}\template\ ...

  10. shell脚本中比较两个小数的办法

    具体情况#man bc 然而对小数进行比较的相关方法有几个: 1. 自己的解决方法,判断小数点后最多有几位数(N),然后对将要比较的两个数值进行 乘与10的N次方 也就是将小数点去掉来进行比较(小数点 ...