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 相关文章推荐
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
May 07 Javascript
js跟随滚动条滚动浮动代码
Dec 31 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
比例尺、缩略图、平移缩放之百度地图添加控件方法
Aug 03 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
js实现倒计时关键代码
May 05 Javascript
koa+jwt实现token验证与刷新功能
May 30 Javascript
JavaScript内置对象math,global功能与用法实例分析
Jun 10 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 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
第三节 定义一个类 [3]
2006/10/09 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
PHP操作MongoDB实现增删改查功能【附php7操作MongoDB方法】
2018/04/24 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
laravel框架使用阿里云短信发送消息操作示例
2020/02/15 PHP
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
jQuery 常见开发使用技巧总结
2009/12/26 Javascript
jQuery AjaxQueue改进步骤
2011/10/06 Javascript
javascript文本模板用法实例
2015/07/31 Javascript
jQuery实现选项卡切换效果简单演示
2015/12/09 Javascript
JavaScript知识点总结(十)之this关键字
2016/05/31 Javascript
artDialog+plupload实现多文件上传
2016/07/19 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
2016/12/17 Javascript
微信小程序 增、删、改、查操作实例详解
2017/01/13 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
2017/01/23 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
jQuery实现的五星点评功能【案例】
2019/02/18 jQuery
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
layUI的验证码功能及校验实例
2019/10/25 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
Python格式化压缩后的JS文件的方法
2015/03/05 Python
在dataframe两列日期相减并且得到具体的月数实例
2018/07/03 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
音乐学个人的自荐书范文
2013/11/26 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
货物运输服务质量承诺书
2014/05/29 职场文书
事业单位聘任报告
2015/03/02 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
java后台调用接口及处理跨域问题的解决
2022/03/24 Java/Android