JS原型继承，盗用构造函数，组合继承，原型式继承
继承
ECMA-262 把原型链定义为 ECMAScript 的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。
原型链
重温一下构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型有一个constructor 属性指回构造函数，而实例有一个内部指针指向原型。如果原型是另一个类型的实例呢？那就意味着这个原型本身有一个内部指针指向另一个原型，相应地另一个原型也有一个指针指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。
function Animal() {this.eat = true;
}Animal.prototype.getAnimalProp = function () {return this.eat;
}function Person() {this.talk = true;
}// 继承Animal
// Person函数的原型指向 Animal的实例对象
// 重写了Person的原型
Person.prototype = new Animal();
const jiaqi = new Person();
console.log(jiaqi.getAnimalProp()); //true
这个例子中实现继承的关键，是 Person 没有使用默认原型，而是将其替换成了一个新的对象，这个对象恰巧是 Animal 的实例。
缺点：
- 含引用类型的原型属性会被所有实例属性共享，容易造成属性的修改混乱。
- 子类型在实例化时不能给父类型的构造函数传参。
盗用构造函数
基本思路很简单：在子类 构造函数中调用父类构造函数。因为毕竟函数就是在特定上下文中执行代码的简单对象，所以可以使用 apply()和 call()方法以新创建的对象为上下文执行构造函数。
这样就能解决原型包含引用值导致的继承问题。
function SuperType() {this.colors = ['red', 'blue', 'green'];
}function SubType() {//继承superTypeSuperType.call(this); //盗用构造函数
}let obj1 = new SuperType();
obj1.colors.push('black');
console.log(obj1.colors); //[ 'red', 'blue', 'green', 'black' ] let obj2 = new SubType();
console.log(obj2.colors); //[ 'red', 'blue', 'green' ]
通过使用 call()（或 apply()）方法，SuperType 构造函数在为SubType 的实例创建的新对象的上下文中执行了。这相当于新的 SubType 对象上运行了 SuperType()函数中的所有初始化代码。结果就是每个实例都会有自己的 colors 属性。
不仅可以解决原型包含引用值的问题，还能给父类构造函数传递参数。
function Person(name) {this.name = name;
}function PersonInfo(name,age) {// 继承父类并传参Person.call(this, name);this.age = age;
}const jiaqi = new PersonInfo('jiaqi', 22);
console.log(jiaqi.age,jiaqi.name); //22 jiaqi
优点：解决原型包含引用值导致的继承问题，还能给父类构造函数传递参数。
缺点： 子类不能访问父类原型上定义的方法，因此所有类型只能使用构造函数模 式。由于存在这些问题，盗用构造函数基本上也不能单独使用。
组合继承
组合继承综合了原型链和盗用构造函数，将两者的优点集中了起来。基本的思路是使用原型链继承原型上的属性和方法，而通过盗用构造函数继承实例属性。这样既可以把方法定义在原型上以实现重用，又可以让每个实例都有自己的属性。
function Animal(type) {this.type = type;this.actions = ['eat', 'move'];
}Animal.prototype.printType = function () {console.log(this.type);
}function People(name, age) {// 继承属性Animal.call(this, '人类');this.name = name;this.age = age;
}// 继承方法
People.prototype = new Animal();People.prototype.sayHi = function () {console.log(`Hi, my name is ${this.name}, I'm ${this.age}.`);
}
测试一下：
const dog = new Animal('
JS原型继承，盗用构造函数，组合继承，原型式继承相关推荐
- 初学JavaScript：原型继承/盗用构造函数继承/组合继承/寄生式继承/原型式继承/寄生组合式继承
文章目录 继承 简介 1.原型链继承 默认原型 判断原型与实例间是否为继承关系 原型继承中的方法 原型链的破坏 原型继承的问题 2.盗用构造函数继承 简介 盗用构造函数继承的问题 3.组合继承 简介 ...
- JavaScript继承（四）——原型式继承
2019独角兽企业重金招聘Python工程师标准>>> 道格拉斯·克罗克福特在2006年提出了原型式继承,他的想法是基于已有的对象借助原型创建新对象,同时还不必因此创建一个自定义类型 ...
- JavaScript中实现继承的方法（深入学习原型链、盗用构造函数、组合继承、原型式继承、寄生式继承、寄生式组合继承）
一.原型链 原型链的基本思想就是通过原型继承多个引用类型的属性和方法. 构造函数.原型和实例的关系:每个构造函数都有一个原型对象,原型有一个属性指回构造函数,而实例有一个内部指针指向原型. 若原型是另 ...
- JS面向对象——原型式继承函数、寄生式继承函数、寄生组合式继承
一.原型式继承函数 回顾一下JavaScript想实现继承的目的:重复利用另外一个对象的属性和方法. 最终的目的:student对象的原型指向了person对象: 二.寄生式继承函数 寄生式(Para ...
- 设计模式：javascript原型式继承
道格拉斯丶克罗克福德有一个观点是:借助原型prototype可以根据已有的对象创建一个新的对象,同时不必创建新的自定义对象类型.代码如下: //原型式继承 function inheritObject ...
- JavaScript简餐——原型式继承
文章目录 前言 一.什么是原型式继承? 二.ECMAScript5中的原型式继承 三.总结 前言 写本<JavaScript简餐>系列文章的目的是记录在阅读学习<JavaScript ...
- Javascript继承4：洁净的继承者----原型式继承
//原型式继承 function inheritObj(obj){//声明一个过渡函数对象function F(){}//过渡对象的原型继承父对象F.prototype = obj;//返回过渡对象的 ...
- android studio 导入模块SDK 以及该模块中继承application的类与原工程继承application的类存在冲突 解决方法
android studio 导入模块SDK 以及该模块中继承application的类与原工程继承application的类存在冲突 解决方法 导入某修改后的海康视频SDK(老师给的),并修改相关文 ...
- Th3.15：继承的构造函数、多重继承、虚继承之详述
本博客将记录:新经典课程知识点的第15节的笔记! 本小节的知识点分别是继承的构造函数.多重继承.虚继承. 今天总结的知识分为以下5个点: (1)继承的构造函数 (2)多重继承 (2.1)多重 ...
最新文章
- 2020年最具潜力44个顶级开源项目，涵盖11类 AI 学习框架、平台
- php 与时间有关的函数,php中与时间相关的常用函数有哪些
- 8 个你必须要掌握的 GitHub 实用技巧！
- 创新式开发探索（一） —— 开篇
- 原始jdbc操作的分析
- Jquery——hover与toggle
- -----------简单排序-------------
- mysql事物介绍_MySQL--事务介绍
- 使用JavaScript在Canvas上画出一片星空
- dm9000驱动分析
- 2022-2027年中国小麦加工行业市场深度分析及投资战略规划报告
- SQL学习笔记——数据更新update语句的使用
- Elasticsearch之静态模板
- pta 7-29 螺旋矩阵
- Python与医疗图像3
- Open vSwitch ETHERNET相关字段详解(eth_src/dl_src、eth_dst/dl_dst、eth_type/dl_type)
- 【Java面试题】之内存泄漏
- Capstone/CS5266 TYPEC拓展坞带PD快充芯片 CS5266应用说明
- 腾讯云优惠券-腾讯云优惠券领取
- android背景气泡,android之View跟LinearLayout的重写（实现背景气泡和波纹效果）
热门文章