ES5 寄生式继承
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;
}
}
执行结果:
ES5 寄生式继承的更多相关文章
- JavaScript ES5类 原型 原型链 组合、原型、寄生式继承
ES5类 原型 原型链 继承 JavaScript中,原型是相对于构造函数(类)的叫法(或者说概念),原型链是相对于构造函数(类)的实例对象的叫法. 对于JavaScript对象,如果在对象自身上找 ...
- [js高手之路]原型式继承与寄生式继承
一.原型式继承本质其实就是个浅拷贝,以一个对象为模板复制出新的对象 function object( o ){ var G = function(){}; G.prototype = o; retur ...
- JavaScript ----------------- 寄生式继承
寄生式继承 寄生式继承是于原型式继承紧密相关的一种思路.寄生式基础的思路与寄生构造函数和工厂模式类似,既创建一个仅用于封装继承过程的函数,该函数内部以某种方式来增强对象,最后再像真地是它做了所有工作一 ...
- JavaScript继承基础讲解,原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承
说好的讲解JavaScript继承,可是迟迟到现在讲解.废话不多说,直接进入正题. 既然你想了解继承,证明你对JavaScript面向对象已经有一定的了解,如还有什么不理解的可以参考<面向对象J ...
- Javascript继承5:如虎添翼----寄生式继承
/* * 寄生式继承 * 其实就是对原型继承的第二次封装,在封装过程中对继承的对象进行了扩展. * 也存在原型继承的缺点!! * 这种思想的作用也是为了寄生组合式继承模式的实现. */ //声明基对象 ...
- JavaScript之面向对象学九(原型式继承和寄生式继承)
一.原型式继承 该继承模式是由道格拉斯*克罗克福德在2006年提出的实现继承的方法. 模式的基本思路:借助原型可以基于已有的对象创建新的对象,同时还不必因此创建自定义类型. 代码如下: functio ...
- JavaScript各种继承方式(五):寄生式继承(parasitic)
一 原理 与原型式继承完全相同,只是对父类的实例(也当作子类的实例使用)进行了增强. function create(obj){ let mango = Object.create(obj); man ...
- 一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extends
说实在话,以前我只需要知道"寄生组合继承"是最好的,有个祖传代码模版用就行.最近因为一些事情,几个星期以来一直心心念念想整理出来.本文以<JavaScript高级程序设计&g ...
- JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)
JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script t ...
随机推荐
- tcolorbox 宏包简明教程
嗯,我消失好几天了.那么,我都在做什么呢?没错,就是写这篇文章了.这篇文章写起来着实有些费神了.于是,如果你觉得这篇文章对你有帮助,不妨扫描文末的二维码,适量赞助一下哦~! tcolorbox 宏包是 ...
- 题解【AcWing279】自然数拆分
题面 因为题目中说参与加法运算的数可以重复,由此可以想到完全背包计数问题. 完全背包计数问题与 \(01\) 背包计数问题只有一个不同: \(01\) 背包计数问题的第二维循环是倒叙循环,而完全背包计 ...
- C语言-浮点数的秘密
一.浮点数的秘密 1.内存中的浮点数 浮点数在内存中的存储方式为:符号位.指数.尾数 十进制浮点数的内存表示: 实例分析: #include <stdio.h> //打印十进制的内存表示 ...
- Python爬虫连载8-JS加密(一)
一.JS加密 1.有的反爬虫策略采用js对需要传输的数据进行加密处理. 2.经过加密,传输的就是密文 3.加密函数或者过程一定是在浏览器完成,也就是一定会把代码(js代码)暴露给使用者 4.通多阅读加 ...
- JavaScript控制流和表达式
一.with语句 使用with语句可以简化JavaScript语句的一些类型,即把一个对象的多个引用降为一个引用,对with块里的属性和方法的引用将被看作是对对象的引用. <script> ...
- 导入org.apache.poi.xssf 读取excel
POI 操作 excel 用XSSF 方式时,如果不能自动导入 org.apache.poi.xssf 对应jar 包,则可以Apache 官网进行下载,自行导入. step1: 访问 http:/ ...
- Java 中的 匿名类
什么是内部类? 在一个类中定义另一个类,这样定义的类称为内部类.包含内部类的类称为内部类的外部类. 如果想要通过一个类来使用另一个类,可以定义为内部类. 内部类的外部类的成员变量在内部类仍然有效,内部 ...
- Energy Consumption Of Low-Pressure Crystal Craft Lights
What kind of place is the low-pressure crystal light generally suitable for? Low-pressure crystal li ...
- 记录 shell学习过程(9)正则表达式 转自树明聊运维
正则表达式 正则表达式介绍 特殊字符 POSIX特殊字符 一.正则表达式介绍 正则表达式是一种文本模式匹配,包括普通字符(例如,a 到 z 之间的字母)和特殊字符(称为"元字符") ...
- SP1716 GSS3 - Can you answer these queries III - 动态dp,线段树
GSS3 Description 动态维护最大子段和,支持单点修改. Solution 设 \(f[i]\) 表示以 \(i\) 为结尾的最大子段和, \(g[i]\) 表示 \(1 \sim i\) ...