为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小数四舍五入多种方法实现
Dec 23 Javascript
javascript内存管理详细解析
Nov 11 Javascript
详解AngularJS实现表单验证
Dec 10 Javascript
第一次接触神奇的Bootstrap网格系统
Jul 27 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery pjax 应用简单示例
Sep 20 jQuery
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
JS数组方法concat()用法实例分析
Jan 18 Javascript
微信小程序手动添加收货地址省市区联动
May 18 Javascript
详细分析vue响应式原理
Jun 22 Javascript
vuex的使用和简易实现
Jan 07 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下使用无限生命期Session的方法
2007/03/16 PHP
php垃圾代码优化操作代码
2010/08/05 PHP
php安全配置 如何配置使其更安全
2011/12/16 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
JavaScript入门之对象与JSON详解
2011/10/21 Javascript
javascript针对DOM的应用分析(三)
2012/04/15 Javascript
如何解决Jquery库及其他库之间的$命名冲突
2013/09/15 Javascript
js实现日期级联效果
2014/01/23 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
vue-cli如何添加less 以及sass
2017/07/06 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
iView框架问题整理小结
2018/10/16 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
详解微信小程序实现跑马灯效果(附完整代码)
2019/04/29 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
angular组件间传值测试的方法详解
2020/05/07 Javascript
在Python中使用__slots__方法的详细教程
2015/04/28 Python
Python实现数据库编程方法详解
2015/06/09 Python
使用python实现tcp自动重连
2017/07/02 Python
Python获取当前页面内所有链接的四种方法对比分析
2017/08/19 Python
Python通过调用有道翻译api实现翻译功能示例
2018/07/19 Python
详解Django模版中加载静态文件配置方法
2019/07/21 Python
Django中ajax发送post请求 报403错误CSRF验证失败解决方案
2019/08/13 Python
python区分不同数据类型的方法
2019/10/14 Python
Python文字截图识别OCR工具实例解析
2020/03/05 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
Django celery异步任务实现代码示例
2020/11/26 Python
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
法拉利英国精品店:Ferraris Boutique UK
2019/07/20 全球购物
结婚喜宴家长答谢词
2014/01/15 职场文书
我爱读书演讲稿
2014/05/07 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
转正申请报告格式
2015/05/15 职场文书