为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 相关文章推荐
JS判断是否在微信浏览器打开的简单实例(推荐)
Aug 24 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
JS传参及动态修改页面布局
Apr 13 Javascript
Vue+Element使用富文本编辑器的示例代码
Aug 14 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
Aug 21 Javascript
Vue的elementUI实现自定义主题方法
Feb 23 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
vue实现权限控制路由(vue-router 动态添加路由)
Nov 04 Javascript
微信小程序中插入激励视频广告并获取收益(实例代码)
Dec 06 Javascript
教你一步步实现一个简易promise
Nov 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中数组定义的几种方法
2013/09/01 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
FileUpload 控件 禁止手动输入或粘贴的实现代码
2010/04/07 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
最简单的js图片切换效果实现代码
2011/09/24 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
快速解决FusionCharts联动的中文乱码问题
2013/12/04 Javascript
用js格式化金额可设置保留的小数位数
2014/05/09 Javascript
jQuery中的read和JavaScript中的onload函数的区别
2014/08/27 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
在Google 地图上实现做的标记相连接
2015/01/05 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
2016/05/12 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
2018/04/18 Javascript
使用JavaScript生成罗马字符的实例代码
2018/06/08 Javascript
laypage+SpringMVC实现后端分页
2019/07/27 Javascript
Python中几种操作字符串的方法的介绍
2015/04/09 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
基于Python的OCR实现示例
2020/04/03 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
区域销售经理岗位职责
2013/12/10 职场文书
旅游市场营销方案
2014/03/09 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
服装设计师求职信
2014/06/04 职场文书
倡导文明标语
2014/06/16 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
MySQL 使用事件(Events)完成计划任务
2021/05/24 MySQL