JavaScript 实现继承的几种方式


Posted in Javascript onFebruary 19, 2021

非ES6代码实现继承的主流方式主要可以分为:
构造继承、原型链继承、构造继承+原型链继承组合继承、以及在组合继承上衍生出的继承方式。

构造继承 (借助call实现)

实现

function Super(age){
 this.age = age;
 this.say = function(){
 console.log(this.age)
 }
}
function Child(name,age){
 Super.call(this,age)
 this.name = name;
}
var child = new Child("min",23)
console.log(child instanceof Super); // false
console.log(child instanceof Child); // true

优点

(1) 可以实现多继承(call多个父类对象)
(2) 构造函数中可向父级传递参数

缺点

(1) 只能继承父类实例的属性和方法,不能继承原型上的属性和方法
(2) 实例并不是父类的实例,只是子类的实例

原型链继承 (借助原型链实现)

实现

function Super(){
 this.getName = function(){
 console.log(this.name)
 }
}
function Child(name){
	this.name = name;
}
Child.prototype = new Super(); // 这里可以传构造参数
Child.prototype.constructor = Child;
var child = new Child("min");
console.log(child instanceof Super); // true
console.log(child instanceof Child); // true
console.log(child.constructor); // Child

优点
(1) 父类原型属性与方法,子类都能访问到
(2) 实例是子类的实例,也是父类的实例

缺点
(1) 无法实现多继承 (2) 创建子类实例时,无法向父类构造函数传参

组合继承 (构造继承+原型链继承)

实现

function Super(age){
 this.age = age;
 this.getAge = function(){
 console.log(this.age);
 }
}
function Child(name,age){
 Super.call(this,age)
 this.name = name;
}
Child.prototype = new Super(1); 
Child.prototype.constructor = Child;
var child = new Child("min",23);
console.log(child instanceof Super); // true
console.log(child instanceof Child); // true
console.log(child.constructor); // Child

优点
(1) 结合了构造+原型链继承的优点

缺点
(1) Child.prototype = new Super(); 多调用了一次,使得原型对象中存在一些不必要属性,如上面例子中age属性

寄生组合继承

实现

function Super(age){
 this.age = age;
 this.getAge = function(){
 console.log(this.age)
 }
}
function Child(name,age){
 Super.call(this,age)
 this.name = name;
}
(function(){
 function Copy(){}
 Copy.prototype = Super.prototype;
 Child.prototype = new Copy();
})()
Child.prototype.constructor = Child;
var child = new Child("min",23);

备注
问:为什么没有直接使用 Child.prototype = Super.prototype;
答:Child.prototype.constructor = Child;关键代码,上面写Super.prototype 也会变(引用类型,指向同一地址)

优点
(1) 这应该是实现继承最完美的方案了,es6的extends关键字,在babel转换后代码也是通过这种方式实现的继承。

额外:借助(Object.create)

实现

function Super(age){
 this.age = age;
 this.getAge = function(){
 console.log(this.age)
 }
}
function Child(name,age){
 Super.call(this,age)
 this.name = name;
}
Child.prototype = Object.create(Super.prototype,{
 constructor:{ // 构造函数修复
 value: Child
 }
})
var child = new Child("min",23);
console.log(child instanceof Super); // true
console.log(child instanceof Child); // true
console.log(child.constructor); // Child

以上就是JavaScript 实现继承的几种方式的详细内容,更多关于JavaScript 实现继承的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
jQueryUI Datepicker组件设置日期高亮
Oct 13 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
Angular实现表单验证功能
Nov 13 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
vuex存值与取值的实例
Nov 06 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
JavaScript 生成唯一ID的几种方式
Feb 19 #Javascript
JavaScript实现打字游戏
Feb 19 #Javascript
JS+CSS实现动态时钟
Feb 19 #Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 #Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 #Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 #Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 #Vue.js
You might like
浅谈php提交form表单
2015/07/01 PHP
注释PHP和html混合代码的小技巧(分享)
2016/11/03 PHP
php use和include区别总结
2019/10/13 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
手把手教你自己写一个js表单验证框架的方法
2010/09/14 Javascript
js将当前时间格式转换成时间搓(自写)
2013/09/26 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
微信小程序 switch组件详解及简单实例
2017/01/10 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
vue中进行微博分享的实例讲解
2019/10/14 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
python 对象和json互相转换方法
2018/03/22 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
Python调用百度根据经纬度查询地址的示例代码
2019/07/07 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
教你一分钟在win10终端成功安装Pytorch的方法步骤
2021/01/28 Python
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
Ray-Ban雷朋奥地利官网:全球领先的太阳眼镜品牌
2020/10/12 全球购物
餐厅销售主管职责范本
2014/02/19 职场文书
办公设备采购方案
2014/03/16 职场文书
公司联欢会策划方案
2014/05/19 职场文书
升学宴学生答谢词
2015/01/05 职场文书
创业计划书之物流运送
2019/09/17 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis
解析redis hash应用场景和常用命令
2021/08/04 Redis
PHP中多字节字符串操作实例详解
2021/08/23 PHP
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android