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 UI 应用不同Theme的办法
Sep 12 Javascript
基于jQuery的前端数据通用验证库
Aug 08 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
Jan 13 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
微信小程序 密码输入(源码下载)
Jun 27 Javascript
JavaScript实现QQ列表展开收缩扩展功能
Oct 30 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
May 30 Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 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简单的伪原创程序,配合商城采集用的
2010/10/12 PHP
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
php+ajax实现无刷新动态加载数据技术
2015/04/28 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
2007/04/20 Javascript
ASP SQL防注入的方法
2008/12/25 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
jquery弹出框的用法示例(一)
2013/08/26 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
深入探秘jquery瀑布流的实现
2016/01/30 Javascript
Markdown+Bootstrap图片自适应属性详解
2016/05/21 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
利用python操作SQLite数据库及文件操作详解
2017/09/22 Python
python利用微信公众号实现报警功能
2018/06/10 Python
Pandas Shift函数的基础入门学习笔记
2018/11/16 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
Python中remove漏删和索引越界问题的解决
2020/03/18 Python
python 使用建议与技巧分享(四)
2020/08/18 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
检测浏览器是否支持html5视频的代码
2013/03/28 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
教师查摆问题及整改措施
2014/10/11 职场文书
初中毕业生自我评价
2015/03/02 职场文书
2015年技术员工作总结
2015/04/10 职场文书
客户付款通知书
2015/04/23 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
python基于scrapy爬取京东笔记本电脑数据并进行简单处理和分析
2021/04/14 Python
python数据分析之用sklearn预测糖尿病
2021/04/22 Python