一 原理

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

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

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. beego orm操蛋问题:操作都需要主键

    查看bee generate appcode自动生成的代码,会发现orm操作都是以主键为依据的. 如果我不想根据主键怎么操作?用 ORM.Raw(cmd).Exec()吧,cmd=[你的mysql语句 ...

  2. centos7 操作记录

    centos7 firewall 命令查看已经开放的端口firewall-cmd --list-ports查看开放的服务firewall-cmd --list-services开启端口firewall ...

  3. Python中的元类(译)

    add by zhj: 这是大stackoverflow上一位小白提出的问题,好吧,我承认我也是小白,元类这块我也是好多次想搞明白, 但终究因为太难懂而败下阵来.看了这篇文章明白了许多,再加下啄木鸟社 ...

  4. vue:vue页面刷新vuex数据消失问题

    vuex中数据刷新页面消失问题:a页面请求的数据保存在vuex中,只要不刷新,那跳转到b页面里也可以用,但如果b页面刷新,那vuex里的数据就会消失,可以得解决方法:a页面用的数据a页面的生命周期函数 ...

  5. HTTP、TCP、IP协议常见面试题

    前言:在看面试题之前,先了解一下基本定义. HTTP.TCP.IP协议基本定义 HTTP: (HyperText Transport Protocol)是超文本传输协议的缩写,它用于传送WWW方式的数 ...

  6. zabbix server配置文件参数详解

    AlertScriptsPath默认值:/usr/local/share/zabbix/alertscripts说明:告警脚本目录 AllowRoot默认值:0 说明:是否允许使用root启动,0:不 ...

  7. 记一个pg连接数过多的异常

    java中使用数据库连接池,如果在部署的时候,操作不慎,可能出现典型的连接池爆满的问题 org.postgresql.util.PSQLException: FATAL: sorry, too man ...

  8. Pronunciation – The Definitive Guide to the Top 100 Words in American English

    Pronunciation – The Definitive Guide to the Top 100 Words in American English Share Tweet Share Tagg ...

  9. JAVAWEB 一一 userweb1(原生,非servlet版)

    创建数据库和表 首先,创建一个web项目 然后引入jar包 创建jsp页面 创建包 创建接口 实现类 详细内容 首先创建一个登陆页面 login.jsp <%@ page language=&q ...

  10. How to fix the bug “Expected "required", "optional", or "repeated".”?

    参考:https://github.com/tensorflow/models/issues/1834 You need to download protoc version 3.3 (already ...