JS实现继承的几种方式
JS继承的实现方式 堪称最全最详细
前沿看js继承这块时我看的几个教程都是说的很简单或者是没有说全就自行百度看了好多总结了下有:
1.构造函数继承 2.原型链继承 3.组合继承 4.class继承 5.实例继承 6 拷贝继承 7.寄生组合继承
下面我们就按照顺序来实现
实现继承前我们先构建一个父类代码如下:
function Animal (name) {this.name = name || 'Animal';this.sleep = function(){console.log(this.name + '正在睡觉!');}
}
Animal.prototype.eat = function(food) { // 原型方法console.log(this.name + '正在吃:' + food);
};
instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
propotype的:使你有能力向对象添加属性和方法
new Animal()和Object.create(Animal.prototype)的区别:Object的话比new少了Animal本身属性的复制
一般的继承的话,除了继承原型属性/方法,实例的属性/方法也是需要继承的,主要是看应用场景
1.构造函数继承
核心:使用父类的构造函数来增强子类实例,等于是复制父类的实例属性给子类(没用到原型)
function Cat(){Animal.call(this);this.name ='Tom';
}var cat = new Cat();
console.log(cat,new Animal());
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
我们这里就看下console.log(new Cat(),new Animal());的打印结果,其余大家自己查看
这里调用了父级Animal函数,然后让父级函数本身的this指向变成了子级Cat的实例对象,相当于父级的所有的属性和方法在子级Cat函数里再次声明了一次。但是这种方式也有弊端
可以发现,当我们在原型链上添加属性和方法时,子级并没有继承父级的属性和方法总结如下:
特点:
- 解决了子类实例共享父类引用属性的问题
- 创建子类实例时,可以向父类传递参数
- 可以实现多继承(call多个父类对象)
缺点:
- 实例并不是父类的实例,只是子类的实例
- 只能继承父类在构造函数里声明的属性和方法,不能继承父级原型链上的属性和方法
- 无法实现函数复用,每个子类都有父类实例函数的副本,影响性能
推荐指数:★★(缺点3)
2.原型链继承
核心: 将父类的实例作为子类的原型
Animal.prototype.body = ['head','arm'];function Cat() {this.name = 'Tom';}Animal.prototype.eat = function () {console.log('i can eat')}Cat.prototype = new Animal();var cat = new Cat();console.log(cat ,new Animal());console.log(cat instanceof Animal); //true console.log(cat instanceof Cat); //truevar cat1 = new Cat();var cat2 = new Cat();cat1.body.push('foot')console.log(cat1,cat2);
这种方式可以继承原型链上的属性,但是同样有弊端
我new了两个cat1,cat2实例对象后,改变其中一个对象的属性,另外一个对象也会受到影响:总结
特点:
- 非常纯粹的继承关系,实例是子类的实例,也是父类的实例
- 父类新增原型方法/原型属性,子类都能访问到
- 简单,易于实现
缺点:
- 可以在Cat构造函数中,为Cat实例增加实例属性。但要新增原型属性和方法,则必须放在new Animal()这样的语句之后执行
- 无法实现多继承
- 来自原型对象的所有属性被所有实例共享
- 创建子类实例时,无法向父类构造函数传参
推荐指数:★★(3、4两大致命缺陷)
3.组合继承
核心:通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父类实例作为子类原型,实现函数复用
function Cat() {Animal.call(this);instance.name = 'Tom';}Animal.prototype.eat = function () {console.log('i can eat');}Cat.prototype = Object.create(Animal.prototype); //组合继承也是需要修复构造函数指向的Cat.prototype.constructor = Cat;var cat1 = new Cat();var cat2 = new Cat();cat1.body.push('foot')console.log(cat1,cat2)
组合方式排除了构造函数继承和原型链继承的弊端,是JS中最常用的继承模式了 总结:
特点:
- 弥补了方式2的缺陷,可以继承实例属性/方法,也可以继承原型属性/方法
- 既是子类的实例, 也是父类的实例
- 不存在引用属性共享问题
- 可传参
- 函数可复用
缺点:
- 调用了两次父类构造函数,生成了两份实例(子类实例将子类原型上的那份屏蔽了)
推荐指数:★★★★(仅仅多消耗了一点内存)
4.class继承
核心:class 是ES6新增的语法 直接class 创建一个类,使用extends来继承。具体看廖学峰大神的讲解
class Animal{constructor() {this.name = 'Tom';}play() {console.log('animal')}}class Cat extends Animal{constructor(type) {super(type);this.type ='cat'}}var cat = new Cat();
总结:最方便快捷的继承方式,但是仅支持ES6及以上版本,所以要考虑兼容性问题,
5.实例继承
核心:为父类实例添加新特性,作为子类实例返回
function Cat(){var instance = new Animal();instance.name = 'Tom';return instance;
}
var cat = new Cat();
console.log(cat );
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); // false
总结:
特点:
- 不限制调用方式,不管是new 子类()还是子类(),返回的对象具有相同的效果
缺点:
- 实例是父类的实例,不是子类的实例
- 不支持多继承
推荐指数:★★
6 拷贝继承
核心:循环父级
function Cat(){var animal = new Animal();for(var p in animal){Cat.prototype[p] = animal[p];}Cat.prototype.name = 'Tom';
}
var cat = new Cat();
console.log(cat);
console.log(cat instanceof Animal); // false
console.log(cat instanceof Cat); // true
特点:
- 支持多继承
缺点:
- 效率较低,内存占用高(因为要拷贝父类的属性)
- 无法获取父类不可枚举的方法(不可枚举方法,不能使用for in 访问到)
推荐指数:★(缺点1)
7.寄生组合继承
核心:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点
function Cat(name){Animal.call(this);this.name = name || 'Tom';
}
(function(){// 创建一个没有实例方法的类var Super = function(){};Super.prototype = Animal.prototype;Cat.prototype = new Super();Cat.prototype.constructor = Cat;
})();
var cat = new Cat();
console.log(cat);
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
特点:
- 堪称完美
缺点:
- 实现较为复杂
推荐指数:★★★★(实现复杂,扣掉一颗星)
JS实现继承的几种方式相关推荐
- (转)js实现继承的5种方式
js是门灵活的语言,实现一种功能往往有多种做法,ECMAScript没有明确的继承机制,而是通过模仿实现的,根据js语言的本身的特性,js实现继承有以下通用的几种方式 1.使用对象冒充实现继承(该种实 ...
- JavaScript(js)实现继承的几种方式
1.原型链继承 核心:将父类的实例做为子类的原型对象 //动物类function Animal(name,sex) {this.name = name || 'Animal';this.sex = s ...
- JS 实现继承的 5 种方式
文章目录 继承 原型链继承 原型链继承的优缺点 构造继承 构造继承的优缺点 复制继承 复制继承的优缺点 组合继承 组合继承的优缺点 寄生组合继承 参考 继承 继承作为面向对象语言的三大特性之一(继承. ...
- 面试--js实现继承的几种方式
基于原型的继承 function father() {this.faName = 'father';this.names=['11','22']}father.prototype.getfaName ...
- JS 总结之原型继承的几种方式
在之前的总结中,我们详细分析了原型<JS 总结之原型>,原型很大作用用于模拟继承,这一次,我们来聊原型继承的几种方式. function Person (age) {this.age = ...
- js中继承的几种用法总结(apply,call,prototype)
本篇文章主要介绍了js中继承的几种用法总结(apply,call,prototype) 需要的朋友可以过来参考下,希望对大家有所帮助 一,js中对象继承 js中有三种继承方式 1.js原型(proto ...
- 继承有几种方式,分别是什么,想要实现继承可以使用哪些方法
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [继承有几种方式 ...
- 可以实现继承的几种方式
继承的几种方式 说起继承,又是一个老生常谈的问题了.今天来讲讲继承的几种方法以及他们的优缺点吧. 源码地址:点击这里 一.原型链继承 原型链继承:通过原型将一个引用类型继承另一个引用类型的属性和方法. ...
- JS数组遍历的几种方式
JS数组遍历的几种方式 JS数组遍历,基本就是for,forin,foreach,forof,map等等一些方法,以下介绍几种本文分析用到的数组遍历方式以及进行性能分析对比 第一种:普通for循环 代 ...
- Django中Model继承的三种方式
Django中Model继承的三种方式 Django中Model的继承有三种: 1.抽象继承 2.多表继承 3.proxy model(代理model) 1.抽象继承 第一种抽象继承,创建一个通用父类 ...
最新文章
- 判断有向图g中顶点i到顶点j是否有路径_[源码和文档分享]基于Dijkstra算法的最短路径问题求解...
- Fedora 31 没被砍掉,或将在2020年11月底发布
- sqlserver查找存储过程关键字方法之三
- Nginx--虚拟主机
- linux中内部命令有哪些,linux内部命令有哪些
- c++ stl队列初始化_创建一个向量,并将其像C ++ STL中的数组一样初始化
- Properties的使用
- linux block挂io,linux:在qemu中运行自编译内核:VFS:无法在未知的wn-block(0,0)上挂载root fs...
- 【06年博文搬家】一个修改时间的批处理程序
- 佳能80d有人脸识别吗_2020单反/微单相机推荐,单反和微单(无反)选购攻略,佳能、尼康、索尼、富士、松下相机...
- 栈Stack的相关操作(java)
- 使用highcharts绘制图表,如何在tooltip里显示服务器端的其他数据
- 为什么家里pm25比外面高_夫妻感情很好,男人为什么还会找情人?这是我听过最好的答案...
- VBoxGuestAdditions.iso无法在virtualbox中正确安装
- python怎么开发服务器_Python服务器开发(1)
- 一款基于Zigbee技术的智慧鱼塘系统研究与设计
- 从苏宁电器到卡巴斯基第22篇:单证这一年(下)
- 猿创征文|走技术创新路,展时代宏图梦
- UESTC 1903 铁路
- 英语--日常生活名词收集 Daily Life Nouns Collection