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 相关文章推荐
JS学习之一个简易的日历控件
Mar 24 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
JavaScript获取flash对象与网上的有所不同
Apr 21 Javascript
简单的jQuery入门指引
Jul 28 Javascript
限制只能输入数字的实现代码
May 16 Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
JavaScript中的"=、==、==="区别讲解
Jan 22 Javascript
layui prompt 设置允许空白提交的方法
Sep 24 Javascript
Vue项目环境搭建详细总结
Sep 26 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
Sep 25 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分页显示制作详细讲解
2008/11/19 PHP
php disk_free_space 返回目录可用空间
2010/05/10 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
Yii 实现数据加密和解密
2021/03/09 PHP
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
用js设置下拉框为只读的小技巧
2014/04/10 Javascript
javascript实现切换td中的值
2014/12/05 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
Bootstrap中datetimepicker使用小结
2016/12/28 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
慕课网题目之js实现抽奖系统功能
2017/09/19 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
微信小程序实现bindtap等事件传参
2019/04/08 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
2019/07/04 jQuery
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
jQuery 图片查看器插件 Viewer.js用法简单示例
2020/04/04 jQuery
一篇超完整的Vue新手入门指导教程
2020/11/18 Vue.js
python用来获得图片exif信息的库实例分析
2015/03/16 Python
Python线程下使用锁的技巧分享
2018/09/13 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
CSS3中的弹性布局em运用入门详解 1em等于多少像素
2021/02/08 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
2012/10/26 HTML / CSS
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
Python如何实现单例模式
2016/06/03 面试题
应届毕业生就业自荐信
2013/10/26 职场文书
给女朋友的道歉信
2014/01/10 职场文书
党性观念心得体会
2014/09/03 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
我的长征观后感
2015/06/09 职场文书
医院病假条范文
2015/08/17 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
Java详细解析==和equals的区别
2022/04/07 Java/Android