js中实现继承的五种方法


Posted in Javascript onJanuary 25, 2021

借用构造函数

这种技术的基本思想很简单,就是在子类型构造函数的内部调用超类型的构造函数。另外,函数只不过是在特定环境中执行代码的对象,因此通过使用apply()和call()方法也可以在新创建的对象上执行构造函数。

function Box(name){
 this.name = name
}
Box.prototype.age = 18

function Desk(name){
 Box.call(this, name) // 对象冒充,对象冒充只能继承构造里的信息
}

var desk = new Desk('ccc')
console.log(desk.name)   // --> ccc
console.log(desk.age)    // --> undefined

从中可以看到,继承来的只有实例属性,而原型上的属性是访问不到的。这种模式解决了两个问题,就是可以传参,可以继承,但是没有原型,就没有办法复用。

组合继承

function Box(name){
 this.name = name
}
Box.prototype.run = function (){
 console.log(this.name + '正在运行...')
}

function Desk(name){
 Box.call(this, name) // 对象冒充
}

Desk.prototype = new Box() // 原型链

var desk = new Desk('ccc')
console.log(desk.name)   // --> ccc
desk.run()         // --> ccc正在运行...

这种继承方式的思路是:用使用原型链的方式来实现对原型属性和方法的继承,而通过借用构造函数来实现对实例属性的继承。

原型式继承

原型式继承:是借助原型可以基于已有的对象创建新对象,同时还不必因此创建自定义类型。讲到这里必须得提到一个人,道格拉斯·克罗克福德在2006年写的一篇文章《Prototype inheritance in Javascript》(Javascript中的原型式继承)中给出了一个方法:

function object(o) {   //传递一个字面量函数
 function F(){}     //创建一个构造函数
 F.prototype = o;    //把字面量函数赋值给构造函数的原型
 return new F()     //最终返回出实例化的构造函数
}

看如下的例子:

function obj(o) {
 function F (){}
 F.prototype = o;
 return new F()
}

var box = {
 name: 'ccc',
 age: 18,
 family: ['哥哥','姐姐']
}

var box1 = obj(box)
console.log(box1.name)   // --> ccc
box1.family.push('妹妹')
console.log(box1.family)  // --> ["哥哥", "姐姐", "妹妹"]

var box2 = obj(box)
console.log(box2.family)  // --> ["哥哥", "姐姐", "妹妹"]

因为上述的代码的实现逻辑跟原型链继承很类似,所以里面的引用数组,即family属性被共享了。

寄生式继承

function obj(o) {
 function F (){}
 F.prototype = o;
 return new F()
}
function create(o){
 var clone = obj(o)   // 通过调用函数创建一个新对象
 clone.sayName = function(){   // 以某种方式来增强这个对象
  console.log('hi')
 }
 return clone   // 返回这个对象
}

var person = {
 name: 'ccc',
 friends: ['aa','bb']
}

var anotherPerson = create(person)
anotherPerson.sayName()   // --> hi

这个例子中的代码基于person返回一个新对象————anotherPerson。新对象不仅具有person的所有属性和方法,而且还有自己的sayHi()方法。在主要考虑对象而不是自定义类型和构造函数的情况下,寄生式继承也是一种有用的模式。使用寄生式继承来为对象添加函数,会由于不能做到函数复用而降低效率,这一点与构造函数模式类似。

寄生组合式继承

前面说过,组合继承是Javascript最常用的继承模式,不过,它也有自己的不足。组合继承最大的问题就是无论什么情况下,都会调用过两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。没错,子类型最终会包含超类型对象的全部实例属性,但我们不得不在调用子类型构造函数时重写这些属性,再来看一下下面的例子:

function SuperType(name){
 this.name = name;
 this.colors = ['red','black']
}
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
SubType.prototype.constructor = SubType
SubType.prototype.sayAge = function (){
 console.log(this.age)
}

第一次调用SuperType构造函数时,SubType.prototype会得到两个属性:name和colors。他们都是SuperType的实例属性,只不过现在位于SubType的原型中。当调用SubType构造函数时,又会调用一次SuperType构造函数,这个一次又在新对象上创建了实例属性name和colors。于是,这两个属性就屏蔽了原型中的两个同名属性。即有两组name和colors属性:一组在实例上,一组在原型上。这就是调用两次SuperType构造函数的结果。解决这个问题的方法就是————寄生组合式继承。
所谓寄生组合式继承,即通过借用构造函数来继承属性,通过原型链的混成形式来继承方法。其背后的基本思路是:不必为了制定子类型的原型而调用超类型的构造函数,我们所需要的无非就是超类型原型的一个副本而已。本质上,就是使用寄生式继承来继承超类型的原型,然后再将结果指定给子类型的原型。寄生组合式继承的基本模式如下:

function object(o) {
 function F (){}
 F.prototype = o;
 return new F()
}
function inheritPtototype(subType, superType){
 var prototype = object(superType.prototype) // 创建对象
 prototype.constructor = subType       // 增强对象
 subType.prototype = prototype        // 指定对象
}

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

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

function SubType(name,age){
 SuperType.call(this,name)
 this.age = age
}

inheritPtototype(SubType, SuperType)

SubType.prototype.sayAge = function(){
 console.log(this.age)
}

var instance = new SubType('ccc', 18)

instance.sayName()   // --> ccc
instance.sayAge()    // --> 18
console.log(instance)

控制台打印出的结构:

js中实现继承的五种方法

详细的图解:

js中实现继承的五种方法

这个例子的高效率提现在它值调用了一次SuperType构造函数,并且因此避免了在SubType.prototype上面创建不必要的、多余的属性。与此同时,原型链还能保持不变;因此,还能够正常使用instanceof和isPrototypeOf()。这也是很多大厂用的继承方式。

以上就是js中实现继承的五种方法的详细内容,更多关于js 实现继承的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
JTrackBar水平拖动效果
Jul 15 Javascript
javascript 拖放效果实现代码
Jan 22 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
Vue列表如何实现滚动到指定位置样式改变效果
May 09 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 Javascript
JavaScript圣杯布局与双飞翼布局实现案例详解
Aug 05 Javascript
Vue中的nextTick作用和几个简单的使用场景
Jan 25 #Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 #Vue.js
javascript实现点击产生随机图形
Jan 25 #Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 #Vue.js
json.stringify()与json.parse()的区别以及用处
Jan 25 #Javascript
使用vue3重构拼图游戏的实现示例
Jan 25 #Vue.js
ReactRouter的实现方法
Jan 25 #Javascript
You might like
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
如何去掉文章里的 html 语法
2006/10/09 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
浅析echo(),print(),print_r(),return之间的区别
2013/11/27 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
thinkPHP+LayUI 流加载实现功能
2019/09/27 PHP
网站被黑的假象--ARP欺骗之页面中加入一段js
2007/05/16 Javascript
DWR Ext 加载数据
2009/03/22 Javascript
javascript中传统事件与现代事件
2015/06/23 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
解决linux下node.js全局模块找不到的问题
2018/05/15 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
python统计日志ip访问数的方法
2015/07/06 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
Python内置函数reversed()用法分析
2018/03/20 Python
python实现扫描ip地址的小程序
2019/04/16 Python
Python socket模块ftp传输文件过程解析
2019/11/05 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
个性大学生自我评价
2013/12/04 职场文书
语文教学随笔感言
2014/02/18 职场文书
移交协议书
2014/08/19 职场文书
股指期货心得体会
2014/09/10 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
安全承诺书格式范本
2015/04/28 职场文书
离婚上诉状范文
2015/05/23 职场文书
主婚人致辞精选
2015/07/28 职场文书
外出培训学习心得体会
2016/01/18 职场文书