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 相关文章推荐
javascript全局变量封装模块实现代码
Nov 28 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
vue 不使用select实现下拉框功能(推荐)
May 17 Javascript
vue如何进行动画的封装
Sep 26 Javascript
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
使用vue制作滑动标签
Sep 21 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 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
php获取mysql版本的几种方法小结
2008/03/25 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
Codeigniter的一些优秀特性总结
2015/01/21 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
PHP的几个常用加密函数
2016/02/03 PHP
php while循环控制的简单实例
2016/05/30 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
理解Javascript_14_函数形式参数与arguments
2010/10/20 Javascript
Jquery拖拽并简单保存的实现代码
2010/11/28 Javascript
jquery each()源代码
2011/02/14 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
浅谈js内置对象Math的属性和方法(推荐)
2016/09/19 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
2019/09/02 Javascript
Vue v-bind动态绑定class实例方法
2020/01/15 Javascript
JavaScript设计模式之策略模式实现原理详解
2020/05/29 Javascript
浅谈Python爬取网页的编码处理
2016/11/04 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
在数据文件自动增长时,自动增长是否会阻塞对文件的更新
2014/05/01 面试题
物业管理个人自我评价
2013/11/08 职场文书
车间主任岗位职责
2014/03/16 职场文书
研究生给导师的自荐信
2015/03/06 职场文书
正确的理解和使用Django信号(Signals)
2021/04/14 Python
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python
Python自动操作神器PyAutoGUI的使用教程
2022/06/16 Python
SpringBoot Http远程调用的方法
2022/08/14 Java/Android