为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 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
js由下向上不断上升冒气泡效果实例
May 07 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
vue教程之toast弹框全局调用示例详解
Aug 24 Javascript
小程序tab页无法传递参数的方法
Aug 03 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
Aug 19 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 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 mysql数据库操作类
2008/06/04 PHP
PHP 命名空间实例说明
2011/01/27 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
PHP文件锁定写入实例解析
2014/07/14 PHP
php内嵌函数用法实例
2015/03/20 PHP
asp 的 分词实现代码
2007/05/24 Javascript
TextArea不支持maxlength的解决办法(jquery)
2011/09/13 Javascript
JavaScript 异常处理 详解
2015/02/06 Javascript
JQuery创建DOM节点的方法
2015/06/11 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
2015/06/23 Javascript
Bootstrap表单布局样式代码
2016/05/31 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
2017/05/13 jQuery
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
利用hasOwnProperty给数组去重的面试题分享
2018/11/05 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
Python OS模块常用函数说明
2015/05/23 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
Python DataFrame 设置输出不显示index(索引)值的方法
2018/06/07 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
python取数作为临时极大值(极小值)的方法
2018/10/15 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
python zip()函数使用方法解析
2019/10/31 Python
tensorflow 实现数据类型转换
2020/02/17 Python
Windows下实现将Pascal VOC转化为TFRecords
2020/02/17 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
管理科学大学生求职信
2013/11/13 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
幼儿园教师辞职信
2014/01/18 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
公司寄语大全
2014/04/10 职场文书
2016年小学生寒假总结
2015/10/10 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书