ES5 寄生式继承
2024-09-03 07:09:51
3 寄生式继承
- 组合继承存在调用两次父类构造的问题
- 原型继承存在不能实例化对象不能传参的问题
- 组合继承和原型继承都存在子类原有原型属性被覆盖的问题
- 因此推荐使用寄生式继承
/*
寄生式继承:
1 解决子类原型对象属性被覆盖的问题:
设置F.property接收父类原型属性,将子类原型属性复制到F.property
再将复制了子类原型属性的F.peoperty设置给子类原型完成属性的覆盖
2 解决调用父类构造问题:
将父类当成属性设置到子类的原型上,子类实例对象就可以在原型链上找到父类构造函数,
子类可以通过this调用自身方法实现实例化,不通过调用外面父类的构造函数传参
这样即实现了功能,又避免了组合继承调用父类构造次数过多和原型继承实例化无法通过构造传参的问题
*/
function Box(_r) {
//设置Box类实例化对象的属性
this.r = _r;
console.log("constructor run");
}
Box.a = 3;
Box.run = function () {
console.log(Box.a);
}
Box.prototype = {
b: 10,
play: function () { }
} function Ball(_r) {
this.supClass.apply(this, arguments);
}
Ball.prototype.walk = function () {
console.log("walk");
}
extend(Ball, Box);
Ball.prototype.play = function () {
this.supClass.prototype.play.apply(this.arguments);
console.log("finish method");
}
var b = new Ball(10);//print constructor run
b.play(); // print finish method
console.log(b); function extend(subClass, supClass) {
function F() { }
//将子类原型属性覆盖掉父类原型相同的属性,再设置给子类
F.prototype = supClass.prototype;
//复制原来原型下的内容
if (Object.assign) {
//Objec.asssign不兼容IE
Object.assign(F.prototype, subClass.prototype);
} else {
if (Object.getOwnPropertyNames) {
var names = Object.getOwnPropertyNames(subClass.prototype);
for (var i = 0; i < names.length; i++) {
Object.defineProperty(F.prototype, name[i], Object.getOwnPropertyDescriptor(names[i]));
}
}
else {
for (var prop in subClass.prototype) {
F.prototype[prop] = subClass.prototype[prop];
}
}
}
//完成属性覆盖
subClass.prototype = new F();
//将子类构造设置为自身,不调用外面父类的构造
subClass.prototype.constructor = subClass;
//父类设置到子类原型上去以供this调用
subClass.prototype.supClass = supClass;
if (supClass.prototype.constructor === Object) {
supClass.prototype.constructor = supClass;
}
}
执行结果:
最新文章
- 【笔记】JS基础一
- RadGrid使用技巧:从RadGrid获取绑定的值
- GJM : 用Unity模仿CSGO里的火焰效果 [转载]
- easyUI学习笔记之tab组件的鼠标事件
- 1106 c程序的推导过程
- CodeForces 688B-Lovely Palindromes
- RESTful Api 身份认证中的安全性设计探讨
- 如何退出Flex手机项目?
- j2ee项目后置类代码实现跳出iframe页面跳转
- Codeforces 380 简要题解
- [oc] instancetype vs id for Objective-C 【转】
- NHibernate教程(18)--对象状态
- windows防火墙实验-命令行设置远程桌面连接以及禁止浏览器上网
- Linux下安装Python3.6
- TP5手动引入PHPEXCEL的方法
- Poj3253 Fence Repair (优先队列)
- mysql——创建索引、修改索引、删除索引的命令语句
- [深入Maven源代码]maven绑定命令行参数到具体插件
- 4-51单片机ESP8266学习-AT指令(测试TCP服务器--使用串口调试助手--不连接路由器)
- Gym 100463A Crossings (树状数组 逆序对)
热门文章
- LaTeX技巧007:每一章开始的header引用名言应该怎么做?
- Microsoft Visual Studio 显示行号
- Wannafly Camp 2020 Day 2K 破忒头的匿名信 - AC自动机,dp
- Wannafly Camp 2020 Day 1H 最大公约数 - 质因数分解,高精度
- Wannafly Camp 2020 Day 1A 期望逆序对 - 概率期望
- 任务调度问题(贪心) hdu4864
- ECMAScript基本语法——③数据类型
- 【Python】循环的拓展
- [P3806] 【模板】点分治 - 点分治
- Linux oracle安装 内核参数讲解