为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编辑器和代码格式化
Apr 25 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
May 07 Javascript
更改BootStrap popover的默认样式及popover简单用法
Sep 13 Javascript
微信小程序实现九宫格抽奖
Apr 15 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
解决vue的router组件component在import时不能使用变量问题
Jul 26 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用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
php中函数前加&符号的作用分解
2014/07/08 PHP
php中get_magic_quotes_gpc()函数说明
2017/02/06 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
IE Firefox 使用自定义标签的区别
2009/10/15 Javascript
url地址自动加#号问题说明
2010/08/21 Javascript
JavaScript弹窗基础篇
2016/04/27 Javascript
JavaScript String 对象常用方法详解
2016/05/13 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
2017/12/26 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
Vue项目中设置背景图片方法
2018/02/21 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
JavaScript判断对象和数组的两种方法
2019/05/31 Javascript
Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
2019/09/01 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
Python使用functools实现注解同步方法
2018/02/06 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
python装饰器的特性原理详解
2019/12/25 Python
Python 随机生成测试数据的模块:faker基本使用方法详解
2020/04/09 Python
tensorflow模型的save与restore,及checkpoint中读取变量方式
2020/05/26 Python
Dillard’s百货官网:Dillards.com
2018/05/26 全球购物
Pretty You London官网:英国拖鞋和睡衣品牌
2019/05/08 全球购物
宿舍卫生检讨书
2014/01/16 职场文书
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
高一数学教学反思
2014/02/07 职场文书
国际金融专业自荐信
2014/07/05 职场文书
工会优秀工作者事迹
2014/08/17 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
2015年圣诞节寄语
2015/08/17 职场文书
MSSQL基本语法操作
2022/04/11 SQL Server
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers