为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 相关文章推荐
FF IE兼容性的修改小结
Sep 02 Javascript
Jquery 一次处理多个ajax请求的代码
Sep 02 Javascript
JS判断不同分辨率调用不同的CSS样式文件实现思路及测试代码
Jan 23 Javascript
Javascript中的迭代、归并方法详解
Jun 14 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
JavaScript基础知识点归纳(推荐)
Jul 09 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 Javascript
搭建vue开发环境
Jul 19 Javascript
Vue项目利用axios请求接口下载excel
Nov 17 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
WINDOWS 2000下使用ISAPI方式安装PHP
2006/09/05 PHP
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
Eclipse的PHP插件PHPEclipse安装和使用
2014/07/20 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
显示、隐藏密码
2006/07/01 Javascript
HTML复选框和单选框 checkbox和radio事件介绍
2012/12/12 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
JS右下角广告窗口代码(可收缩、展开及关闭)
2015/09/04 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
AngularJS基础 ng-repeat 指令简单示例
2016/08/03 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
2016/12/21 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
深入浅析JS中的严格模式
2018/06/04 Javascript
vue项目中,main.js,App.vue,index.html的调用方法
2018/09/20 Javascript
微信小程序实现跑马灯效果
2020/10/21 Javascript
[46:10]2014 DOTA2国际邀请赛中国区预选赛 CnB VS HGT
2014/05/21 DOTA
[46:09]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第三场
2014/05/26 DOTA
python将多个文本文件合并为一个文本的代码(便于搜索)
2011/03/13 Python
Python的ORM框架SQLObject入门实例
2014/04/28 Python
Python微信操控itchat的方法
2019/05/31 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
基于python实现FTP文件上传与下载操作(ftp&sftp协议)
2020/04/01 Python
Python虚拟环境venv用法详解
2020/05/25 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
html5页面结构_动力节点Java学院整理
2017/07/10 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
美国网上书店:Barnes & Noble
2018/08/15 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
工商管理应届生求职信
2013/10/07 职场文书
四查四看剖析材料
2014/02/14 职场文书
市场营销管理毕业生自荐信
2014/03/03 职场文书
2014年专项整治工作总结
2014/11/17 职场文书
重阳节慰问信
2015/02/15 职场文书
酒店厨房管理制度
2015/08/06 职场文书