为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实现图片广告轮换效果代码
Jul 07 Javascript
javascript 系统文件夹文件操作及参数介绍
Jan 08 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
Nov 25 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
js中getBoundingClientRect的作用及兼容方案详解
Feb 01 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
JS addEventListener()和attachEvent()方法实现注册事件
Jan 11 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
简单实现限定phpmyadmin访问ip的方法
2013/03/05 PHP
深入php-fpm的两种进程管理模式详解
2013/06/03 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
2010/02/07 Javascript
jQuery动画animate方法使用介绍
2013/05/06 Javascript
Bootstrap实现默认导航栏效果
2020/09/21 Javascript
基于jquery实现即时检查格式是否正确的表单
2016/05/06 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
Vue 过渡实现轮播图效果
2017/03/27 Javascript
JS将unicode码转中文方法
2017/05/08 Javascript
微信小程序之获取当前位置经纬度以及地图显示详解
2017/05/09 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
JavaScript引用类型RegExp基本用法详解
2018/08/09 Javascript
element-ui 设置菜单栏展开的方法
2018/08/22 Javascript
JS+HTML5 Canvas实现简单的写字板功能示例
2018/08/30 Javascript
详解vue开发中调用微信jssdk的问题
2019/04/16 Javascript
JS实现音量控制拖动
2020/01/15 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
vue修改Element的el-table样式的4种方法
2020/09/17 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python入门篇之函数
2014/10/20 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
Python 合并多个TXT文件并统计词频的实现
2019/08/23 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
Python基于当前时间批量创建文件
2020/05/07 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
写好自荐信的要点
2013/11/06 职场文书
学生自我评价范文
2014/02/02 职场文书
六一儿童节活动总结
2014/08/27 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python