`
andylee624
  • 浏览: 56168 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

JS“重载”方法

    博客分类:
  • Ajax
阅读更多
JS不是面向对象的语言,又是弱语言类型,有时候需要对一些函数进行重载,在JS机制中可以模拟"重载"

  在JS的函数执行上下文中有一个名为arguments的有意思的变量,它以数组的形式存储了函数执行时传递过来的所有参数,即使函数定义没有定义这 么多个形参。还有一个特别之处就是跟Array类型相比,arguments变量有且只有一个length属性,Array的方法,例如push、pop 等,它并不具备,它只是一个“伪数组”:具有length属性,存储的数组能够用数组访问符[]来访问,并且是只读不可写。

一、对于不同个数参数的重载
  这里应该很明白,直接用arguments函数的length属性来判断就可以了。 function talk(msg,handler){
var len = arguments.length;
//传递过来一个参数的时候执行
if(len==1){
alert("Function say:"+msg);
}
//传递过来两个参数的时候执行
else if(len==2){
handler(msg);
}
}
talk("demo");
talk("demo",function(w){alert("Handler say:"+w);});
二、对于不同类型的参数的重载
  对于JS这样一种动态类型的语言,这种变量声明的随意性淡化了严格的变量类型在开发人员脑子里的重要性(PS:同样是基于ECMA体系的,AS就引入 了变量声明的强制类型),很多意想不到的BUG其实都是由这种变量类型的自动转换造成的。其实JS提供了很准确的方法让我们来严格检测变量的类型,比较通 用的就是typeof方法和constructor属性。

1、typeof variable 返回变量类型 temp = "say"; //string
temp = 1; //number
temp = undefined; //undefined
temp = null; //object
temp = {}; //object
temp = []; //object
temp = true; //boolean
temp = function (){} //function
alert(typeof temp); 通过上面的测试你可以看出来,对于null,Object,Array返回的都是object类型,而使用下面的方法就可以解决这个困扰。

2.constructor属性检测变量类型
JS中每个对象都有constructor属性,它是用来引用构造此对象的函数,通过对这个引用的判断就可以检测变量类型了。 temp = "say";
temp.constructor==String; //true
temp= {};
temp.constructor == Object;//true
temp= [];
temp.constructor == Array;//true 通过上面的测试已经很容易的把Array和Object类型的变量区分开了。下面我们来对自定义的对象做个测试看看会发生什么。
//自定义对象
function Ball(){}
//实例化一个对象
var basketBall = new Ball();
basketBall.constructor==Ball; //true 这可以说明constructor属性对于自定义的对象一样适用。

  在弄清楚了上面两个方法的适用以后再来回到JS函数重载的模拟上来,下面这个例子是根据参数类型来重载。 function talk(msg){
var t = typeof msg;
if(t=="string"){
alert("It's a string");
}
else if(t=="number"){
alert("It's a number");
}
}
talk(10); //It's a string
talk("demo"); //It's a number
附上一个很巧妙的严格检测参数类型和个数的函数: //依据参数列表来严格地检查一个变量列表的类型
function strict( types, args ) {
//确保参数的数目和类型核匹配
if ( types.length != args.length ) {
//如果长度不匹配,则抛出异常
throw "Invalid number of arguments. Expected " + types.length + ", received " + args.length + " instead.";
}
//遍历每一个参数,检查基类型
for ( var i = 0; i < args.length; i++ ) {
//如JavaScript某一项类型不匹配,则抛出异常
if ( args[i].constructor != types[i] ) {
throw "Invalid argument type. Expected " + types[i].name +", received " + args[i].constructor.name + " instead.";
}
}
}

//上述方法的使用
function doFunction(id,name){
//检测参数个数和类型
strict([Number,String],arguments);
..
}
另一篇文章

如果我们把JS中的一些函数也看成是“对象”的话,我们再来看看在JS中如何对它们进行“装饰”。
一、利用JS“重载”方法
  突然发现JS有一种很好的机制(实际上是一位JS高人指点我的,嘿嘿),它可以“重载”一些函数,利用这种功能我们可以进行动态“重载”。参考以下代码: window.alert=a;
function a(){
  window.location='http://localhost/test.htm';
}
  然后我们在这个页面上来一个alert(‘abc’)会有什么反应?页面不会弹出提示框,而是转向上边这个URL。也就是说运行alert时是执行函数a,而不是系统默认的函数了。

二、使用JS“重载”为老函数添加新的职责
  我们可以在老函数的基础上动态地添加新的功能,同时又保持原来的函数签名。我认为这已经做成了Decorator,参考以下代码:
  运行一下会得到什么?在提示消息出来后,页面跳转到 http: //localhost/test.htm <BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var temp=window.alert;
window.alert=a;
function a(alertValue){
temp(alertValue);
window.location='http://localhost/quickstart/';
}
alert(' Microsoft 快速入门教程');
//-->
</SCRIPT>
</BODY>
过程:

通过声明一个temp变量来保存系统原来的alert函数;
把系统的函数赋上新的方法(函数指针?^_^),新的方法意味着新的职责。
在新的方法中再调用temp中保存的原来的系统函数。

且看一个完整的例子代码:重载按钮的单击事件 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function old_fun(){alert("old_fun()");}
//-->
</SCRIPT>
</HEAD>
<BODY>
<button onclick="old_fun()" id="btn">MOVE</button>
</BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var btn=document.getElementById("btn");
var old_handler=btn.onclick;
btn.onclick=function(){new_fun();old_handler();}
function new_fun(){alert("new_fun()");}
//-->
</SCRIPT>
分享到:
评论

相关推荐

    关于JS重载

    简单描述了js重载,和js重载示例

    JS模拟实现方法重载示例

    本文实例讲述了JS模拟实现方法重载。分享给大家供大家参考,具体如下: 在JS方法中,不能像C#方法能实现重载,但是我们可以通过js中的arguments来实现js方法的重载。 下面给出html实例: &lt;html&gt; &lt;head&gt;...

    js中方法重载如何实现?以及函数的参数问题.docx

    js中方法重载如何实现?以及函数的参数问题.docx

    js中方法重载如何实现?以及函数的参数问题

    都知道在js中没有办法直接实现方法重载,因为在js中如果定义了多个名称相同,但参数个数不一样的方法,其实只有最后一个方法能被真正调用,其他的方法都被覆盖掉了。 但每一个函数都有一个特殊的参数arguments,利用...

    JS重载实现方法分析

    本文实例分析了JS重载实现方法。分享给大家供大家参考,具体如下: 重载是面向对象语言里很重要的一个特性,JS中没有真正的重载,是模拟出来的(因为js是基于对象的编程语言,不是纯面向对象的,它没有真正的多态:如...

    TypeScript中的方法重载详解

    JavaScript 作为动态语言, 是没有重载这一说的。一是它的参数没有类型的区分,二是对参数个数也没有检查。虽然语言层面无法自动进行重载,但借助其动态的特性,我们可以在代码中手动检查入参的类型,或者通过 ...

    JavaScript重载函数实例剖析_.docx

    JavaScript重载函数实例剖析_.docx

    JavaScript重载函数实例剖析

    通过本文给大家简单介绍下JavaScript重载函数的相关知识,在js中有没有重载函数这个概念呢?很多朋友都很模糊,说不太清楚,下面通过本文给大家介绍js重载函数,一起学习吧

    Java方法继承、方法重载、方法覆盖小结.doc

    Java方法继承、方法重载、方法覆盖小结.doc

    妙用缓存调用链实现JS方法的重载

    首先javascript是没有重载函数/方法这个概念的,但是js提供了一个arguments这个方法参数,通过这个参数的length属性就可以拿到方法参数的长度,o~对了,咱们今天实现的也仅仅是按照参数长度重载,而不是参数类型~~·...

    运算符重载详解

    C++中一个很重要的知识点 运算符重载 在实际开发中 很多技术人员都会忽视的

    JS-Function-Overloading:JS函数重载

    JS函数重载 JS函数重载

    js重载资料

    js重载,没有详解,但有点帮助

    JS函数重载的解决方案

    在面向对象的编程中,很多语言都支持函数重载,能根据函数传递的不同个数、类型的参数来做不同的操作,JS对它却不支持,需要我们额外做些小动作。

    js图片大小重载插件

    js图片大小重载插件jQuery Resize Plugin Author: Adeel Ejaz (http://adeelejaz.com/)

    Javascript实现运算符重载详解

    本文给大家汇总介绍了Javascript实现运算符重载的方法,实现的思路很简单,有需要的小伙伴可以来看看

    JavaScript 的方法重载效果

    JavaScript 语言的方法声明中,不能明确指定参数的类型和个数,所以不能实现方法的重载,但是我们可以用其他的方法来实现重载的效果。

Global site tag (gtag.js) - Google Analytics