为JavaScript类型增加方法的实现代码(增加功能)

 更新时间:2011年12月29日 00:36:59   作者:  
大家在js开发过程中有些功能已经满足不了我们的需求,或没有我们需要的功能,那么我们就可以自己扩展下,个性化js
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

相关文章

  • 你需要了解的ES6语法大总结

    你需要了解的ES6语法大总结

    ECMAScript是浏览器脚本语言的规范,而我们熟知的js语言,如JavaScript则是规范的具体实现,下面这篇文章主要给大家介绍了关于ES6语法总结的相关资料,需要的朋友可以参考下
    2022-05-05
  • 基于canvas实现的钟摆效果完整实例

    基于canvas实现的钟摆效果完整实例

    这篇文章主要介绍了基于canvas实现的钟摆效果,以完整实例形式分析了JavaScript结合html5的canvas技术实现钟摆动态旋转效果的方法,需要的朋友可以参考下
    2016-01-01
  • Javascript中异步等待的深入理解

    Javascript中异步等待的深入理解

    Async / Await是人们期待已久的JavaScript功能,它使使用异步功能更加有趣和易于理解。这篇文章主要给大家介绍了关于Javascript中异步等待的相关资料,需要的朋友可以参考下
    2021-05-05
  • javascript 可以拖动的DIV(二)

    javascript 可以拖动的DIV(二)

    关于这个实现div拖动的js函数,实际上也是某位前辈公布于网上,这儿只是摘抄注解一下。
    2009-06-06
  • 基于javascript的无缝滚动动画实现2

    基于javascript的无缝滚动动画实现2

    这篇文章主要介绍了基于javascript的无缝滚动动画实现2,文章通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • canvas实现弧形可拖动进度条效果

    canvas实现弧形可拖动进度条效果

    本篇文章主要介绍了canvas实现弧形可拖动进度条的实例方法,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-05-05
  • 利用try-catch判断变量是已声明未声明还是未赋值

    利用try-catch判断变量是已声明未声明还是未赋值

    这篇文章主要介绍了利用try-catch判断变量是已声明未赋值还是未声明,需要的朋友可以参考下
    2014-03-03
  • HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)

    HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)

    这篇文章主要介绍了HTML+CSS+JavaScript做女朋友版的刮刮乐(一看就会)本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-08
  • jqgrid 表格数据导出实例

    jqgrid 表格数据导出实例

    jqgrid并没有自带导出表格数据的方法,这里就自己实现了一个,尝试过在页面直接将数据导出,发现只有IE下可以通过调用saveas来实现,但是别的浏览器不支持,于是考虑将数据传回后台,然后后台返回下载文件来实现
    2013-11-11
  • 仅30行代码实现Javascript中的MVC

    仅30行代码实现Javascript中的MVC

    这篇文章主要介绍了仅30行代码实现Javascript中的MVC的方法,MVC的基础是观察者模式,这是实现model和view同步的关键,想要深入了解的朋友可以参考本文
    2016-02-02

最新评论