js扩展父类方法
在网上找了很多一直没找到关于JS扩展父类的方法,让我很是郁闷啊~要是真的开发组遇到了该咋整,于是乎自己手写了一些测试代码,没想到通过了……(难道是人品太好了?)废话不多说了直接上代码看看~
<script type="text/javascript">
function chaolei(name){
this.name=name;
this.show=function(){
alert("超类");
};
}
function zilei(name){
this.name=name;
}
zilei.prototype=new chaolei();
zilei.prototype.constructor=zilei;
zilei.prototype.show=function(){
chaolei.call(zilei);
zilei.show();
alert(this.name);
};
var a=new zilei("我是谁?");
a.show();
</script>
用的是标准的原型链的继承写法,通过call函数来扩展了父类的show方法。运行的结果为先弹出“超类”然后弹出“我是谁”。
简单说一下原理吧(这里不介绍如何继承,想看继承去我以前的文章里找吧~)。这里继承完父类后,子类通过prototype给自己增加了一个show方法,这个方法和父类的show方法同名,所以如果不用call会覆盖掉父类的方法,但是我们用call之后首先让父类的show方法可以在子类中调用,这就是chaolei.call(zilei)的作用了,这里建议用子类的名字作为参数,因为如果用this的话会造成污染,因为这样的话作用域就变成了整个子类show方法,如果父类中也有一个跟子类相同的变量this.name那么接下来的alert(this.name)弹出的就是父类的了。然后zilei.show()这个就是调用的父类的show方法了(因为用了call函数,所以这里调用show时只能调用父类的因为子类的show还没有完成)。这里需要强调一点,如果call里面的参数是zilei的话接下来zilei.show这里也必须用“zilei”否则会报错。然后再一个alert(this.name);就是调用子类的变量了~所以也就先执行了父类的show然后又运行了子类show方法的扩展了!
以上是我的个人理解,如果有不多的地方还请高手拍砖~并给我指明错误~谢谢!
js扩展父类方法的更多相关文章
- 如何使用 js 扩展 prototype 方法
如何使用 js 扩展 prototype 方法 expand prototype function enhancedLog(msg = ``) { // this.msg = msg; enhance ...
- js 判断数组包含某值的方法 和 javascript数组扩展indexOf()方法
var questionId = []; var anSwerIdValue = []; ////javascript数组扩展indexOf()方法 Array.prototype.indexOf ...
- JS扩展方法——字符串trim()
转自:http://www.cnblogs.com/kissdodog/p/3386480.html <head> <title>测试JS扩展方法</title> ...
- JS扩展方法
JS扩展方法与C#的扩展方法非常相似,也是可以链式调用的,也是通过对某个类的扩展写法来实现.这个东西非常好用,如果将预先写好的方法放到一个js里面引用的话,那么后面写js将非常有趣. 下面给出一个例子 ...
- jquery 扩展插件方法
分析插件jquery.countdown.js (function($) { $.fn.countdown = function(options) { // default options var d ...
- 封装jQuery Validate扩展验证方法
一.封装自定义验证方法-validate-methods.js /***************************************************************** j ...
- Xilium.CefGlue利用XHR实现Js调用c#方法
防外链 博客园原文地址在这里http://www.cnblogs.com/shen6041/p/3442499.html 引 Xilium CefGlue是个不错的cef扩展工程,托管地址在这里 ht ...
- JS扩展 或 Jquery的扩展写法
<script>//JS扩展String函数test,其它类推String.prototype.test = function(s){ alert(this+s);}var str = ' ...
- esayui扩展验证方法
下面是关于平时中积累的esayui扩展验证方法仅作记录: /**************************************************************** ...
随机推荐
- centos7 下nfs的配置
td p { margin-bottom: 0cm } p { margin-bottom: 0.25cm; line-height: 120% } a:link { } 补充知识: RPC 主程序: ...
- openMP编程(下篇)之数据私有与任务调度
title: openMP编程(下篇)之数据处理子句与任务调度 tags: ["openMP"] notebook: 分布式程序_Linux --- openMP并行编程中数据的共 ...
- xmlplus 组件设计系列之三 - 文本框
文本框是页面中最常用的输入组件,它的默认使用方式如下: <input type='text'/> 当然,这里的 `type='text' 可以略去不写.大部分情况下,使用默认的文本框作为输 ...
- 2017-4-26 winform tab和无边框窗体制作
TabIndex-----------------------------------确定此控件将占用的Tab键顺序索引 Tabstop-------------------------------指 ...
- 《Thinking in Java》 And 《Effective Java》啃起来
前言 今天从京东入手了两本书,<Thinking in Java>(第四版) 和 <Effective Java>(第二版).都可以称得上是硬书,需要慢慢啃的,预定计划是在今年 ...
- iOS APP开发设置启动图片 Launch Image
一.添加启动图片 点击Assets.xcassets进入图片管理,右击,弹出"New Launch Image"或点下面的+号创建Launch Image: 这里首先说明一下尺寸: ...
- 数据转换d2d.js
d2d.js what? d2d是data2data的简写,用来转换为符合需求的data. why? 我们在开发中定义好了的接口字段,后端工程可能因某些原因修改了字段, 或者我们用的插件或组件用到的数 ...
- Linux实战教学笔记11:linux定时任务
第十一节 linux定时任务 标签(空格分隔): Linux实战教学笔记 ---更多资料点我查看 1.1 定时任务Crond介绍 Crond是linux系统中用来定期执行命令/脚本或指定程序任务的一种 ...
- 【Objective-C 基础】4.分类和协议
1.分类 OC提供了一种与众不同的方式--Category,可以动态的为已经存在的类添加新的行为(方法) 这样可以保证类的原始设计规模较小,功能增加时再逐步扩展. 使用Category对类进行扩展时, ...
- 四、I/O
九.什么是I/O: 9.1.在Windows程序中,基础的运行单位为线程,为每一个线程分配一个处理器,可以让系统执行多个操作, 9.2.当线程进行一个I/O操作时,会被挂起,从而影响性能,为了解决这类 ...