为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 相关文章推荐
List the Codec Files on a Computer
Jun 11 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
jQuery中empty()方法用法实例
Jan 16 Javascript
微信小程序 循环及嵌套循环的使用总结
Sep 26 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
JavaScript模板引擎实现原理实例详解
Dec 14 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
vue实现分页加载效果
Dec 24 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
vue+elementUI实现简单日历功能
Sep 24 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
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基于dom实现的图书xml格式数据示例
2017/02/03 PHP
PHP模型Model类封装数据库操作示例
2019/03/14 PHP
CSS心形加载的动画源码的实现
2021/03/09 HTML / CSS
深入理解javascript学习笔记(一) 编写高质量代码
2012/08/09 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
Uploadify上传文件方法
2016/03/16 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
jQuery实现微信长按识别二维码功能
2016/08/26 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
微信小程序实现上传图片功能
2018/05/28 Javascript
使用rpclib进行Python网络编程时的注释问题
2015/05/06 Python
Python 字符串大小写转换的简单实例
2017/01/21 Python
python使用opencv进行人脸识别
2017/04/07 Python
Python线性方程组求解运算示例
2018/01/17 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
pandas.dataframe按行索引表达式选取方法
2018/10/30 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
python实现加密的方式总结
2020/01/19 Python
python实现猜数游戏
2020/03/27 Python
基于python实现复制文件并重命名
2020/09/16 Python
pip 20.3 新版本发布!即将抛弃 Python 2.x(推荐)
2020/12/16 Python
Crabtree & Evelyn英国官网:瑰珀翠护手霜、香水、沐浴和身体护理
2018/04/26 全球购物
葡萄牙航空官方网站:TAP Air Portugal
2019/10/31 全球购物
买卖正宗运动鞋:GOAT
2019/12/06 全球购物
船舶专业个人求职信范文
2014/01/02 职场文书
统计岗位职责
2014/02/21 职场文书
关于安全的标语
2014/06/10 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
普通员工辞职信范文
2015/05/12 职场文书
学习心理学心得体会
2016/01/22 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python
Python进程池与进程锁之语法学习
2022/04/11 Python