为JavaScript类型增加方法的实现代码(增加功能)


Posted in Javascript onDecember 29, 2011

javaScript的类型函数(如Number/String/Boolean/Array/Date/Obejct等)都是继承于 Function.prototype,所以给Function.prototype增加方法,同时也会影响到由它衍生的下层类型函数。如:

Function.prototype.addMethod=function(methodName,func){ 
if(!this[methodName]){ 
this[methodName]=func;//给类型增加方法,类似于类型的静态方法。func方法是赋于了类型而非实例。 
} 
return this;//this 将绑定到方法的调用对象(类型函数),返回this可以进行链式调用 
} 
Array.addMethod('testFun',function(){alert(this)}); 
//Array.testFun(); //function Array() {[native code]} 
Object.addMethod('testFun',function(){alert(this)}); 
//Object.testFun(); //function Object() {[native code]} 
Boolean.addMethod('testFun',function(){alert(this)}); 
//Boolean.testFun(); //function Boolean() {[native code]} 
function CustomObject(name,value){ 
this.name=name || 'CustomObject'; 
this.value=value || 0; 
this.toString=function(){return '[name:'+this.name+',value:'+this.value+']'} 
} 
CustomObject.addMethod('testFun',function(){alert(this)}); 
/* return: 
* function CustomObject(name, value) { 
this.name = name || "CustomObject"; 
this.value = value || 0; 
this.toString = function () {return "[name:" + this.name + ",value:" + this.value + "]";}; 
} 
*/ 
CustomObject.testFun();

此时如果用实例来调用的话,则会报错。如:
var customObject=new CustomObject(); //定义一个CustomObject实例 
customObject.testFun();//Error: temp.testFun is not a function

给实例增加方法
如果给类型实例增加方法,则应该把方法绑定到类型的prototype上。如
Function.prototype.addMethod=function(methodName,func){ 
if(!this.prototype[methodName]){ 
this.prototype[methodName]=func;//给原型增加方法,此方法会影响到该类型的实例上 
} 
return this.prototype;//返回原型,此类型实例可以进行链形调用 
} 
Object.addMethod('testFun',function(){alert(this)}); 
//({toString:function(){return '[Empty Object]'}}).testFun(); //[Empty Object] 
Number.addMethod('testFun',function(){alert(this)}); 
//(5).testFun(); //5 
String.addMethod('testFun',function(){alert(this)}); 
//'test'.testFun(); //'test' 
Boolean.addMethod('testFun',function(){alert(this)}); 
//true.testFun(); //true 
Array.addMethod('testFun',function(){alert(this)}); 
//(['a','b']).testFun(); //a,b 
Date.addMethod('testFun',function(){alert(this)}); 
//new Date().testFun(); //Tue Dec 27 2011 11:20:58 GMT-0800 (Pacific Standard Time) 
function CustomObject(name,value){ 
this.name=name || 'CustomObject'; 
this.value=value || 0; 
this.toString=function(){return '[name:'+this.name+',value:'+this.value+']'} 
} 
CustomObject.addMethod('testFun',function(){alert(this)}); 
var customObject=new CustomObject(); 
customObject.testFun(); //[name:CustomObject,value:0]

若此时用类型调用testFun,则会报错。如
Array.addMethod('testFun',function(){alert(this)}); 
//Array.testFun(); //Error: Array.testFun is not a function 
CustomObject.addMethod('testFun',function(){alert(this)}); 
CustomObject.testFun(); //Error: CustomObject.testFun is not a function
Javascript 相关文章推荐
javaScript Array(数组)相关方法简述
Jul 25 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
学习JavaScript的最佳方法分享
Oct 21 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
用C/C++来实现 Node.js 的模块(一)
Sep 24 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
Layui多选只有最后一个值的解决方法
Sep 02 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
javaScript 利用闭包模拟对象的私有属性
Dec 29 #Javascript
Jquery中删除元素的实现代码
Dec 29 #Javascript
js的表单操作 简单计算器
Dec 29 #Javascript
javascript写的简单的计算器,内容很多,方法实用,推荐
Dec 29 #Javascript
JavaScript中两个感叹号的作用说明
Dec 28 #Javascript
javascript (用setTimeout而非setInterval)
Dec 28 #Javascript
js字符编码函数区别分析
Dec 28 #Javascript
You might like
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
php强制文件下载而非在浏览器打开的自定义函数分享
2014/05/08 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
2010/10/26 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
JS获取IP、MAC和主机名的五种方法
2013/11/14 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
基于jquery实现图片放大功能
2016/05/07 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
详解Vue单元测试Karma+Mocha学习笔记
2018/01/31 Javascript
通过实例解析js简易模块加载器
2019/06/17 Javascript
js事件机制----捕获与冒泡机制实例分析
2020/05/22 Javascript
微信小程序实现上传照片代码实例解析
2020/08/04 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
python实现指定文件夹下的指定文件移动到指定位置
2018/09/17 Python
深入了解python中元类的相关知识
2019/08/29 Python
iPython pylab模式启动方式
2020/04/24 Python
CSS3打造磨砂玻璃背景效果
2016/09/28 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
世界上最大的乐谱选择:Sheet Music Plus
2020/01/18 全球购物
莫斯科制造商的廉价皮大衣:Fursk
2020/06/09 全球购物
幼儿园中班新学期寄语
2014/01/18 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
小学课外活动总结
2014/07/09 职场文书
公司踏青活动方案
2014/08/16 职场文书
解除劳动合同证明书
2014/09/26 职场文书
社区母亲节活动总结
2015/02/10 职场文书
python绘图subplots函数使用模板的示例代码
2021/04/30 Python
详解Redis主从复制实践
2021/05/19 Redis
PyTorch中permute的使用方法
2022/04/26 Python
解决Windows Server2012 R2 无法安装 .NET Framework 3.5
2022/04/29 Servers