Javascript组合继承方法代码实例解析


Posted in Javascript onApril 02, 2020

Javascript组合继承方法代码实例解析

组合继承

组合继承,指将原型链和借用构造函数的技术组合到一块,从而发挥二者之长的一种继承模式。其背后思路使用用原型链实现对原型属性和方法的继承,而通过构造函数来实现对实例属性的继承。这样,即通过在原型上定义方法实现了函数复用,又能够保证每个实例都有它自己的属性。

下面来看一个例子

function SuperType(name) {
  this.name = name;
  this.color = ['red', 'blue', 'green'];
};
//
SuperType.prototype.sayName = function() {
  console.log(this.name);
};
//
function SubType(name, age) {
  //继承属性
  SuperType.call(this, name);		// 第二次调用SuperType
//
  this.age = age;
};
//继承方法
SubType.prototype = new SuperType();	// 第一次调用SuperType
console.log(SubType.prototype.constructor); //输出SuperType函数的源码,即此时SubType.prototype.constructor指向SuperType函数
SubType.prototype.constructor = SubType; //将SubType.prototype.constructor指针指回SubType函数
SubType.prototype.sayAge = function() {
  console.log(this.age);
};
//
var instance1 = new SubType('Jake', 20)
instance1.color.push('black');
console.log(instance1.color); //'red,blue,green,black'
instance1.sayName(); //'Jake'
instance1.sayAge(); //20
//
var instance2 = new SubType('Greg', 21);
console.log(instance2.color); //'red,blue,green'
instance2.sayName(); //'Greg';
instance2.sayAge(); //21

观察输出结果,便可以发现:两个SubType实例(instance1和instance2)既分别有自己的属性,又可以使用相同的方法。

优点

组合继承避免了原型链和借用构造函数的缺陷,融合了它们的优点,所以是JS中最常用的继承模式。而且,instanceof和isPrototypeOf()也能够用于识别基于组合继承创建的对象。

缺点

调用两次SuperType构造函数

在SubType.prototype上创建了不必要的属性

寄生组合继承

function SuperType (name) {
 this.name = name
 this.colors = ['red', 'blue', 'yellow']
}

SuperType.prototype.sayName = function () {
 console.log(this.name)
}

function SubType (name, age) {
 SuperType.call(this, name) // 通过构造函数继承实例属性
 this.age = age
}

SubType.prototype = Object.create(SuperType.prototype)	//继承父类共享方法
SubType.prototype.constructor = SubType	//将SubType.prototype.constructor指针指回SubType函数
SubType.prototype.sayAge = function () {
 console.log(this.age)
}

let obj = new SubType('jake', 22)
obj.sayName()	// jake
obj.sayAge()	// 22
console.log(obj instanceof SubType)	// true
console.log(obj instanceof SuperType)	// true

优点

寄生组合继承只调用了一次SuperType,所以更高效

避免了在SubType.prototype上创建了不必要的属性

下面说说原型链和构造函数的缺点

原型链

缺点:当原型链中包含引用类型值时,原型属性会被所有实例共享;

下面看一个例子

function SuperType() {
  this.color = ['red', 'blue', 'green'];
}
//
function SubType() {};
//
SubType.prototype = new SuperType(); //继承了SuperType
//
var instance1 = new SubType();
instance1.color.push('black');
console.log(instance1.color);  //'red,blue,green,black'
//
var instance2 = new SubType();
console.log(instance2.color);  //'red,blue,green,black'

借用构造函数

缺点:如果仅仅使用构造函数,方法都在构造函数中定义,因此函数就无法实现复用了。而且,在超类型的原型中定义的方法,对于子类型而言也是不可见的。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
Sep 21 Javascript
seajs学习教程之基础篇
Oct 20 Javascript
原生js实现打字动画游戏
Feb 04 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
Javascript异步编程async实现过程详解
Apr 02 #Javascript
JS实现图片懒加载(lazyload)过程详解
Apr 02 #Javascript
JavaScript运动原理基础知识详解
Apr 02 #Javascript
基于js实现逐步显示文字输出代码实例
Apr 02 #Javascript
webpack3.0升级4.0的方法步骤
Apr 02 #Javascript
Javascript模块化机制实现原理详解
Apr 02 #Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 #Javascript
You might like
搜索引擎技术核心揭密
2006/10/09 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
2012年开发人员的16款新鲜的jquery插件体验分享
2012/12/28 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
jQuery基础语法实例入门
2014/12/23 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
jQuery.trim() 函数及trim()用法详解
2015/10/26 Javascript
js操作table元素实现表格行列新增、删除技巧总结
2015/11/18 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
AngularJS基础 ng-open 指令简单实例
2016/08/02 Javascript
jQuery实现checkbox列表的全选、反选功能
2016/11/24 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
OpenCV图像颜色反转算法详解
2019/05/13 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
django框架ModelForm组件用法详解
2019/12/11 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
Python+PyQt5+MySQL实现天气管理系统
2020/06/16 Python
python实现自动清理重复文件
2020/08/24 Python
纯CSS3单页切换导航菜单界面设计的简单实现
2016/08/16 HTML / CSS
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
100%法国制造的游戏和玩具:Les Jouets Français
2021/03/02 全球购物
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
内衣营销方案
2014/03/15 职场文书
4S店售后客服自我评价
2014/04/09 职场文书
淮阳太昊陵导游词
2015/02/10 职场文书
普通员工辞职信范文
2015/05/12 职场文书
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫