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扩展验证方法仅作记录: /**************************************************************** ...
随机推荐
- 初遇stm32
刚开始接触32,建一个工程都这么费劲,可能是keil安装时一些文件和库没有安装完整,真是坑啊. 回头可能还要从新安装,然后开始新的学习,争取十天之内入门32,在博客园这个强大的技术支持下, 想不入门都 ...
- [Git]01 如何安装和配置
简单地说,Git 究竟是怎样的一个系统呢? 请注意,接下来的内容非常重要,若是理解了 Git 的思想和基本工作原理,用起来就会知其所以然,游刃有余.在开始学习 Git 的时候,请不要尝试把各种概 ...
- webpack学习(三)之web-dev-server不能自动刷新问题
使用webpack-dev-server中遇到不能浏览器无法自动刷新的问题:寻找多方答案后明白了一些: 下面有一些需要注意的点: 1.webpack-dev-server并不能读取你的webpack. ...
- Transform java future into completable future 【将 future 转成 completable future】
Future is introduced in JDK 1.5 by Doug Lea to represent "the result of an asynchronous computa ...
- oracle linux 6.5 安装 oracle 12cR2数据库(2)-DBCA建库
援引:http://www.cnblogs.com/kerrycode/p/3386917.html by 潇湘隐者 Oracle 12C引入了CDB与PDB的新特性,在ORACLE 12C数据库引 ...
- [js笔记整理]DOM 篇
一.节点类型 1.元素节点:HTML元素 2.文本节点:元素标签中的内容 3.属性节点:元素的属性 (检测节点类型:node.nodeType //元素=1,属性=2,文本=3) 二.使用DOM获取元 ...
- Gulp和webpack的区别,是一种工具吗?
疑问:gulp和webpack 什么关系,是一种东西吗?可以只用gulp,不用webpack吗 或者反过来? 它们的区别和概念 ------------------------------------ ...
- jdbc(2)
create table account ( id int primary key auto_increment, name varchar(20), money double);insert int ...
- jQuery选择器的优点
jQuery选择器的优点 相信小伙伴们对选择器并不陌生,从css1到css3的选择器有很多,但是JQuery都能完美的支持,而且API操作起来也特别方便好用,在很大程度上精简了代码,节约了很多性能.那 ...
- 关于cgi、FastCGI、php-fpm、php-cgi
搞了好长时间的php了,突然有种想法,想把这些整理在一起,于是查看各种资料,找到一片解释的很不错的文章,分享一下-- 首先,CGI是干嘛的?CGI是为了保证web server传递过来的数据是标准格式 ...