JS中的继承(下)
JS中的继承(下)
在上一篇 JS中的继承(上) 我们介绍了3种比较常用的js继承方法,如果你没看过,那么建议你先看一下,因为接下来要写的内容, 是建立在此基础上的.另外本文作为我个人的读书笔记,才疏学浅,如有错误,敬请指正.
接下来我们要介绍另外3种相对比较奇葩的继承
一. 原型式继承
function clone (proto) {
function F () {}
F.prototype = proto
return new F()
}
clone 内部首先是创建了一个空的构造函数F,然后把F的prototype指向参数proto,最后返回一个F的实例对象,完成继承. 原型式继承看起来跟原型继承很像,事实上,两者因为都是基于prototype继承的,所以也有一些相同的特性,比如引用属性共享问题, 那原型式继承跟原型继承有什么区别呢? 一个比较明显的区别就是clone函数接收的参数不一定要是构造函数,也可以是其他任何对象, 这样我们就相当于是浅复制了一个对象.
es5的Object.create()函数,就是基于原型式继承的
原型式继承是道格拉斯-克罗克福德 2006 年在 Prototypal Inheritance in JavaScript一文中提出的
二. 寄生式继承
寄生式继承其实就是在原型式继承的基础上,做了一些增强.
function cloneAndStrengthen(proto){
function F () {}
F.prototype = proto
let f = new F()
f.say = function() {
console.log('I am a person')
}
return f
}
我们看到上面的代码,跟原型式继承比,差别就是:在实例对象f返回之前,给f添加了一个say函数. 但是这样在实例对象上添加的引用属性(比如函数),跟构造函数模式一样, 实例对象的引用类型属性无法共享,尽管这既是缺点也是优点.
三. 寄生组合式继承
上一篇我们提到的组合继承其实也有个缺点,就是父类构造函数里面的代码会执行2遍,第一遍是在原型继承的时候实例化父类, 第二遍是在子类的构造函数里面借用父类的构造函数,我们可以用寄生组合式继承来解决这个问题
function inherit(sub, super){
let prototype = clone(super.prototype)
prototype.constructor = sub
sub.prototype = prototype
}
这样我们就实现了一个寄生组合式继承的函数inherit,接下来我们来使用一下:
function Person(name){}
function Student(){
SuperType.call(this)
}
inherit(Student, Student)
我们用 inherit 函数替换了 Student.prototype = new Person(),从而避免了执行 new Person().
书上说: 寄生组合式继承是引用类型最理想的继承范式.
最新文章
- Visual C++ 6.0使用教程
- service postgresql initdb [FAILED]
- C#MVC使用二进制流显示图片
- 360随身WiFi驱动下载
- php日期处理 -- 获取本周和上周的开始日期和结束日期(备忘)
- [Cocos2d-x For WP8]基础知识
- [bzoj1051] [HAOI2006]受欢迎的牛 (Tarjan+缩点)
- Oracle 学习笔记(二)
- 【windows核心编程】一个API拦截的例子
- Hdu 1042 N! (高精度数)
- 文件正在上传的转圈圈gif图片引出的fixed定位和absolute定位
- Centos7下安装numpy+matplotlib+scipy
- SQL SERVER大话存储结构(4)_复合索引与包含索引
- CF226D The table
- ES6-你不知道的箭头函数
- 3proxy.cfg 配置文件解析
- 网站加入QQ在线客服
- Forward团队-爬虫豆瓣top250项目-模块测试
- Spring Boot初识(4)- Spring Boot整合JWT
- Kotlin入门(4)声明与操作数组
热门文章
- MySQL_8.0与5.7区别之账户与安全
- MySQL_(Java)使用JDBC向数据库中修改(update)数据
- python-线性回归预测
- [心得]暑假DAY1 | 7-7考试总结
- python3笔记二十:时间操作time
- maven 安装后变成 mvn 不是内部命令解决方法
- mysql解决删除数据后,主键不连续问题
- oracle imp 工具可能出现的问题
- 阶段3 3.SpringMVC·_05.文件上传_3 文件上传之Springmvc方式上传原理分析
- zabbix(1)基础知识