JavaScript重载函数实例剖析,浅析JS中对函数func
分类:计算机网络

在JavaScript中有一种特殊的数据类型---Function类型,JavaScript的每个函数都是Function类型的实例。由于函数是对象,因此函数名实际上也是一个指向函数对象的指针,不会与某个函数绑定。

JS的函数定义可以指定形式参数名称,多多少少我们会以为js至少可以支持参数个数不同的方法重载,然而遗憾的是这仅仅是一个假象,js所有的参数都是以arguments传递过去的,这个参数类似于数组,在函数调用的时候,所有的实参都是保存在了这个数据结构里面,我们定义函数的时候所指定的形式参数其实是为这个数据结构里面的数据定义一个快捷的访问方式。也就是说js所有的函数都是支持无限个参数的,加上数据类型是弱类型,那么JS的函数除了名称就真的没有方法区别了?

1.javascript 中是没有重载函数这个概念的!

正文:我们知道,在js中,函数实际上是一个对象,每个函数都是Function类型的实例,并且都与其他引用类型一样具有属性和方法。因此,函数名实际上是指向函数对象的指针,不与某个函数绑定。在常见的两种定义方式(见下文)之外,还有一种定义的方式能更直观的体现出这个概念:

<pre name="code" class="html">function sum(num1,num2) 
{ 
return num1 +num2; 
} 

alert(sum(10,10)); //20 
var other = sum; 
alert(other(10,10)); //20 
sum = null; 
alert(other(10,10)); //20

  办法总是有的,我们可以利用JavaScript中的特殊对象arguments来模拟函数重载。用它来判断传入参数的个数或类型以区分重载。

首先javascript是没有重载函数这个概念的,很久以前,我用javascript做网页的时候,写一些简单的效果,根本不需要用到重载函数,当写游戏的时候,有大量的函数的时候,就想用重载函数了,没想到javascript不支持。

var sum = new Function("num1", "num2", "return num1 + num2"); //不推荐

将函数名作为指向函数的指针,有助于理解为什么ECMAScript中没有函数重载的概念

1.根据参数个数重载

我们来简单用两种方式来"模拟"下重载函数。

  Function的构造函数可以接收任意数量的参数,但最后一个参数始终被看做函数体。这种方式有个缺点是,会导致解析两次代码,第一次是基础的ES代码解析,第二次是解析传入构造函数中的字符串,这样会导致性能的下降,在此写出是帮助理解js中函数其实是对象这个概念。

function sum(num1) 
{ 
return num1 +100; 
} 
function sum(num1) 
{ 
return num1 +200; 
} 
alert(sum(200)); //400

js判断传入参数数量可以用arguments.length这个属性来判断;

2.根据参数的个数来判断

 (一)js函数没有重载的概念

虽然声明了两个同名函数,但是后面的函数覆盖了前面的函数,以上等价于下面的代码

复制代码 代码如下:

javascript的函数中有一个叫arguments的变量,是记录参数的一个数组,我们可以用这个来判断参数的个数,然后分别执行不同的内容,就是同一个函数可以有不同效果,跟C++等强类型语言的重载函数还是相差很大。你可以这样写,参数全部注释掉,告诉使用函数者,这个函数最多支持3个参数,具体参数在函数里面再获取。支持重载函数的注释一定要多写点,这样会清晰些,最好附上调用例子。

  说到重载的概念,我们来类比Java中的重载是怎么实现的:在Java中,方法是通过方法签名来唯一标识一个方法。方法签名包括:方法名、参数数量、参数顺序和参数类型这几个要素。因此两个方法的方法名相同,而其他签名要素不同,编译器就会认为是两个不同方法,从而可以存在同名的不同方法,以实现重载的概念。(引用:怎么深入理解js中为什么没有重载呢--segmentfault 中manxisuo的回答)。

function sum(num1) 
{ 
return num1 +100; 
} 
sum = function(num1) 
{ 
return num1 +200; 
} 
alert(sum(200)); //400

<script type="text/javascript">
function add() {
    if (arguments.length == 1) {
        alert(arguments[0] + 10);
    }
    else if (arguments.length == 2) {
        alert(arguments[0] + arguments[1]);
    }
}
//函数调用
add(10);
add(10, 20);
</script>

/**
* Return sum of a and b and less than limitNumber
* @param {Number} a
* @param {Number} b
* @param {Number} limitNumber
*/
function add(/*a, b, limitNumber*/){
var a,b,limitNumber;
a = arguments[0];
b = arguments[1];
if(arguments.length == 3){
limitNumber = arguments[2];
if(a + b > limitNumber){
return limitNumber;
}
}
return a + b;
}

  而上面我们说过,js中的函数名实际上是指向函数对象的指针,因此函数名可以说是一个函数的唯一标识,跟参数列表并没有关系,因此并不会出现同名的两个函数(因为一个指针同时只能指向一个对象)从而不存在重载的概念。 举个栗子:

在创建第二个函数时,实际上覆盖了引用的第一个函数变量sum

2.根据参数类型重载

3.根据参数类型不同来判断

function sum(num1, num2){
return num1 + num2;
}
function sum(num1, num2, num3){
return num1 + num2 + num3;
}

您可能感兴趣的文章:

  • 如何实现JS函数的重载
  • 让JavaScript 轻松支持函数重载 (Part 1 - 设计)
  • 让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
  • js 覆盖和重载 函数
  • 有关于JS构造函数的重载和工厂方法
  • js中方法重载如何实现?以及函数的参数问题
  • 详解JS函数重载
  • 通过实例理解javascript中没有函数重载的概念
  • JavaScript重载函数实例剖析

判断变量类型的3种方法:
1.用 typeof 语句判断变量类型,typeof语句返回类型对应的字符串。
2.用 instanceof 语句判断变量类型,instanceof语句返回true/false。
3.用 constructor 属性判断变量类型,这个属性返回用来构造该变量的构造函数引用。
对照表:可以看出用 typeof 不能准确的判断出具体的类型,所以我们用 constructor 来进行判断。

javascript有一个关键字叫typeof,可以判断出一个变量的类型。

  上面这种可以换一种写法,会更直观一些:

typeof string number object function boolean object object
constructor String Number Object Function Boolean Array User Define

var temp = "say"; //string
var temp = 1; //number
var temp = undefined; //undefined
var temp = null; //object
var temp = {}; //object
var temp = []; //object
var temp = true; //boolean
var temp = function (){} //function 
function testFunction(a){
if(typeof(a) == "number"){
//do something
}else if(typeof(a) == "string"){
//do something
}
}
var sum = function(num1, num2){
return num1 + num2;
}
sum = function(num1, num2, num3){
return num1 + num2 + num3;
}

复制代码 代码如下:

以上内容是小编给大家介绍的javascript重载函数的相关知识,感兴趣的朋友一起学习吧!

  这样就很明显可以看出,上面一行将sum指向function(num1,num2),而接下来又将sum指向function(num1, num2, num3),从而造成第二次的指向覆盖了第一次的,因此更明显的看出js中并没有重载的概念。

<script type="text/javascript">
function add()
{
    if (arguments.length == 0) return 0;
    var sum=0;
    for(var i=0; i<arguments.length; i++){
        if(arguments[i].constructor == Number){
        //或者改为:if(arguments[i] instanceof Number)
        //或者改为:if(typeof(arguments[i])=="number")
        sum += arguments[i];
美高梅网址,      }
    }
    return sum;
}
//函数调用
alert(add(10));
alert(add(10,20));
</script>

您可能感兴趣的文章:

  • 如何实现JS函数的重载
  • 让JavaScript 轻松支持函数重载 (Part 1 - 设计)
  • 让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
  • js 覆盖和重载 函数
  • 有关于JS构造函数的重载和工厂方法
  • js中方法重载如何实现?以及函数的参数问题
  • JavaScript中的函数重载深入理解
  • 详解JS函数重载
  • 通过实例理解javascript中没有函数重载的概念

(二)函数声明和函数表达式的区别

小伙伴们是否理解了javascript函数重载的方法了呢,有疑问就留言吧

  我们知道,常用的定义函数方法有两个:函数声明和函数表达式。

您可能感兴趣的文章:

  • 如何实现JS函数的重载
  • 让JavaScript 轻松支持函数重载 (Part 1 - 设计)
  • 让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
  • js 覆盖和重载 函数
  • 有关于JS构造函数的重载和工厂方法
  • js中方法重载如何实现?以及函数的参数问题
  • JavaScript中的函数重载深入理解
  • 通过实例理解javascript中没有函数重载的概念
  • JavaScript重载函数实例剖析

  函数声明,可以说是最常见的定义方法,如下例:

function sum(num1, num2){
return num1 + num2;
}

  函数表达式,这种定义方式在闭包及一些框架中使用较多,例如angular中常见的$scope.doSomething = function(){...}:

sum = function(num1, num2){
return num1 + num2;
};

  上述两种定义方法几乎是相同的,但有一点小区别,请看下面这个例子:

//函数声明
alert(sum(100, 100));
function sum(num1, num2){
return num1 + num2;
}
//函数表达式
alert(sum(100, 100));
var sum = function(num1, num2){
return num1 + num2;
};

  这两段代码看起来差别不大,只是函数定义的方式不同而已。但事实是,第一段可以正常运行而第二段则会报错。这是因为,在代码开始执行之前,解析器就已经通过一个名为函数声明提升的过程,读取并将函数声明添加到执行环境中。简单来说,解析器会先将函数声明放在源代码树的顶部。而下面那段代码,函数位于一个初始化语句中(并不会将其提升到顶部),简单来说,在执行到这个赋值语句之前,sum并未指向任何一个函数,因此在之前调用函数则会报错。

以上所述是小编给大家介绍的JS中函数function的理解(基础篇),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • javascript基础知识讲解
  • Three.js基础部分学习
  • js基础之DOM中document对象的常用属性方法详解
  • js基础之DOM中元素对象的属性方法详解
  • js 基础篇必看(点击事件轮播图的简单实现)
  • JS基础随笔(菜鸟必看篇)
  • JavaScript基础知识点归纳(推荐)
  • Javascript基础学习笔记(菜鸟必看篇)
  • JavaScript基础重点(必看)
  • JavaScript基础教程——入门必看篇
  • javaScript基础详解

本文由美高梅网址发布于计算机网络,转载请注明出处:JavaScript重载函数实例剖析,浅析JS中对函数func

上一篇:JS实现关键字搜索时的相关下拉字段效果,一个自 下一篇:没有了
猜你喜欢
热门排行
精彩图文