为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 相关文章推荐
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
javascript中字符串拼接详解
Sep 26 Javascript
js基础之DOM中元素对象的属性方法详解
Oct 28 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
微信小程序tabBar用法实例详解
Dec 04 Javascript
vue单文件组件lint error自动fix与styleLint报错自动fix详解
Jan 08 Javascript
解决layer.msg 不居中 ifram中的问题
Sep 05 Javascript
解决layer弹出层自适应页面大小的问题
Sep 16 Javascript
uniapp与webview之间的相互传值的实现
Jun 29 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 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 删除数组元素
2009/01/16 PHP
分享一段php获取linux服务器状态的代码
2014/05/27 PHP
动态为事件添加js代码示例
2009/02/15 Javascript
JavaScript面向对象设计二 构造函数模式
2011/12/20 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
2014/03/05 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
jQuery插件扩展实例【添加回调函数】
2016/11/26 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
Vue 实现监听窗口关闭事件,并在窗口关闭前发送请求
2020/09/01 Javascript
nodeJs项目在阿里云的简单部署
2020/11/27 NodeJs
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
详解在Python程序中自定义异常的方法
2015/10/16 Python
Python字典实现简单的三级菜单(实例讲解)
2017/07/31 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
详谈python3 numpy-loadtxt的编码问题
2018/04/29 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
python绘制散点图并标记序号的方法
2018/12/11 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
利用python画出AUC曲线的实例
2020/02/28 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
ASOS比利时:英国线上零售商及自有品牌
2018/07/29 全球购物
机械专业应届生求职信
2013/09/21 职场文书
联欢晚会主持词
2014/03/25 职场文书
写给父母的感谢信
2015/01/22 职场文书
幼师辞职信范文
2015/02/27 职场文书
关于倡议书的范文
2015/04/29 职场文书
初中思想品德教学反思
2016/02/24 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
Ruby处理YAML和json数据
2022/04/18 Ruby