[js高手之路]寄生组合式继承的优势

2024-06-20 02:58

本文主要是介绍[js高手之路]寄生组合式继承的优势,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在之前javascript面向对象系列的文章里面,我们已经探讨了组合继承和寄生继承,回顾下组合继承:

 1         function Person( uName ){
 2             this.skills = [ 'php', 'javascript' ];
 3             this.userName = uName;
 4         }
 5         Person.prototype.showUserName = function(){
 6             return this.userName;
 7         }
 8         function Teacher ( uName ){
 9             Person.call( this, uName );
10         }
11         Teacher.prototype = new Person();
12 
13         var oT1 = new Teacher( 'ghostwu' );
14         oT1.skills.push( 'linux' );
15         var oT2 = new Teacher( 'ghostwu' );
16         console.log( oT2.skills ); //php,javascript
17         console.log( oT2.showUserName() ); //ghostwu

组合继承有个缺点,父类的构造函数会被调用两次.

第11行,设置子类原型对象(prototype),调用了第一次

第9行,实例化对象的时候,又调用一次

构造函数的目的是为了复制属性,第9行肯定是不能少的,第11行的目的是为了获取到父类原型对象(prototype)上的方法,基于这个目的,有没有别的方法

可以做到 在不需要实例化父类构造函数的情况下,也能得到父类原型对象上的方法呢? 当然可以,我们可以采用寄生式继承来得到父类原型对象上的方法

 1         function Person( uName ){
 2             this.skills = [ 'php', 'javascript' ];
 3             this.userName = uName;
 4         }
 5         Person.prototype.showUserName = function(){
 6             return this.userName;
 7         }
 8         function Teacher ( uName ){
 9             Person.call( this, uName );
10         }
11 
12         function object( o ){
13             var G = function(){};
14             G.prototype = o;
15             return new G();
16         }
17 
18         function inheritPrototype( subObj, superObj ){
19             var proObj = object( superObj.prototype ); //复制父类superObj的原型对象
20             proObj.constructor = subObj; //constructor指向子类构造函数
21             subObj.prototype = proObj; //再把这个对象给子类的原型对象
22         }
23 
24         inheritPrototype( Teacher, Person );
25 
26         var oT1 = new Teacher( 'ghostwu' );
27         oT1.skills.push( 'linux' );
28         var oT2 = new Teacher( 'ghostwu' );
29         console.log( oT2.skills ); //php,javascript
30         console.log( oT2.showUserName() ); //ghostwu

 

其实,说白了寄生组合式继承就是一个借用构造函数 相当于浅拷贝父类的原型对象

 

这篇关于[js高手之路]寄生组合式继承的优势的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1076915

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

综合安防管理平台LntonAIServer视频监控汇聚抖动检测算法优势

LntonAIServer视频质量诊断功能中的抖动检测是一个专门针对视频稳定性进行分析的功能。抖动通常是指视频帧之间的不必要运动,这种运动可能是由于摄像机的移动、传输中的错误或编解码问题导致的。抖动检测对于确保视频内容的平滑性和观看体验至关重要。 优势 1. 提高图像质量 - 清晰度提升:减少抖动,提高图像的清晰度和细节表现力,使得监控画面更加真实可信。 - 细节增强:在低光条件下,抖

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

JavaSE——封装、继承和多态

1. 封装 1.1 概念      面向对象程序三大特性:封装、继承、多态 。而类和对象阶段,主要研究的就是封装特性。何为封装呢?简单来说就是套壳屏蔽细节 。     比如:对于电脑这样一个复杂的设备,提供给用户的就只是:开关机、通过键盘输入,显示器, USB 插孔等,让用户来和计算机进行交互,完成日常事务。但实际上:电脑真正工作的却是CPU 、显卡、内存等一些硬件元件。

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

js react 笔记 2

起因, 目的: 记录一些 js, react, css 1. 生成一个随机的 uuid // 需要先安装 crypto 模块const { randomUUID } = require('crypto');const uuid = randomUUID();console.log(uuid); // 输出类似 '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

学习记录:js算法(二十八):删除排序链表中的重复元素、删除排序链表中的重复元素II

文章目录 删除排序链表中的重复元素我的思路解法一:循环解法二:递归 网上思路 删除排序链表中的重复元素 II我的思路网上思路 总结 删除排序链表中的重复元素 给定一个已排序的链表的头 head , 删除所有重复的元素,使每个元素只出现一次 。返回 已排序的链表 。 图一 图二 示例 1:(图一)输入:head = [1,1,2]输出:[1,2]示例 2:(图