JavaScript基础5——关于ECMAscript的函数

  • ECMAScript的函数概述(一般定义到<head>标签之间)

(1)定义函数，JavaScript一般有三种定义函数方法：
*第一种是使用function语句定义函数（静态方法）

1 function 函数名(var1,var2,...,varX)
2      {
3
4          代码．．．(return)
5
6      }

第二种是使用Function()构造函数来定义函数（不常用）

1 var 函数名 = new Function(“参数1”，”参数2”，”参数3”……”函数体”);
2 如：
3 var 函数名 = new Function(”x”,”y”,”var z=x+y;return z;”);

*第三种是在表达式中定义函数

1 var 函数名 = function(参数1，参数2，…){函数体};
2 //例如：
3 //定义
4 var add = function(a,b){
5 return a+b;
6 }
7 //调用函数
8 document.write(add(50,20));

(2)函数作用域：

函数外面定义的变量是全局变量，在整个HTML页面内都有效(生存期在整个HTML页面)。，函数内可以直接使用。在函数内部没有使用var定义的，变量则为全局变量，*在函数内使用var关键字定义的变量是局部变量，即出了函数外边无法获取。js函数定义的参数没有默认值。（目前只有最新的火狐浏览器支持）

(3)如何调用函数：

//sayHi函数
function sayHi(sName, sMessage) {

  alert("Hello " + sName + sMessage);

}

//调用上面的函数 sayHi()，会生成一个警告窗口
sayHi("David", " Nice to meet you!")

(4)函数如何返回值：

函数 sayHi() 未返回值，即使函数确实有值，也不必明确地声明它。该函数只需要使用 return 运算符后跟要返回的值即可。

 1 function sum(iNum1, iNum2) {
 2
 3   return iNum1 + iNum2;
 4
 5 }
 6
 7 //下面的代码把 sum 函数返回的值赋予一个变量：
 8
 9 var iResult = sum(1,1);
10
11 alert(iResult);    //输出 "2"

另一个重要概念是，与在 Java 中一样，函数在执行过 return 语句后立即停止代码。因此，return 语句后的代码都不会被执行。

1 function sum(iNum1, iNum2) {
2
3   return iNum1 + iNum2;
4 //alert 窗口就不会显示出来
5   alert(iNum1 + iNum2);
6
7 }

一个函数中可以有多个 return 语句，如下所示：

 1 function diff(iNum1, iNum2) {
 2
 3   if (iNum1 > iNum2) {
 4
 5     return iNum1 - iNum2;
 6
 7   } else {
 8
 9     return iNum2 - iNum1;
10
11   }
12
13 }

上面的函数用于返回两个数的差。要实现这一点，必须用较大的数减去较小的数，因此用 if 语句决定执行哪个 return 语句。

如果函数无返回值，那么可以调用没有参数的 return 运算符，随时退出函数。

 1 function sayHi(sMessage) {
 2   if (sMessage == "bye") {
 3
 4     return;
 5
 6   }
 7
 8   alert(sMessage);
 9
10 }
11 //这段代码中，如果 sMessage 等于 "bye"，就永远不显示警告框
12
13 //注释：如果函数无明确的返回值，或调用了没有参数的 return 语句，那么它真正返回的值是 undefined。

  • 关于函数的arguments对象

在函数代码中，使用特殊对象 arguments，开发者无需明确指出参数名，就能访问它们。

例如，在函数 sayHi() 中，第一个参数是 message。用 arguments[0] 也可以访问这个值，即第一个参数的值（第一个参数位于位置 0，第二个参数位于位置 1，依此类推）。

因此，无需明确命名参数，就可以重写函数：

1 function sayHi() {
2   if (arguments[0] == "bye") {
3     return;
4   }
5   alert(arguments[0]);
6 }

1.检测参数个数

还可以用 arguments 对象检测函数的参数个数，引用属性 arguments.length 即可。下面的代码将输出每次调用函数使用的参数个数：

 1 function howManyArgs() {
 2
 3 alert(arguments.length);
 4
 5 }
 6
 7 howManyArgs("string", 45);
 8 howManyArgs();
 9 howManyArgs(12);
10
11 //上面这段代码将依次显示 "2"、"0" 和 "1"。
12 //与其他程序设计语言不同，ECMAScript 不会验证传递给函数的参数个数是否等于函数定义的参数个数。开发者定义的函数都可以接受任意个数的参数（根据 Netscape 的文档，最多可接受 25 个），而不会引发任何错误。任何遗漏的参数都会以 undefined 传递给函数，多余的函数将忽略。

2.模拟函数重载

用 arguments 对象判断传递给函数的参数个数，即可模拟函数重载：

 1 function doAdd() {
 2
 3   if(arguments.length == 1) {
 4
 5     alert(arguments[0] + 5);
 6
 7   } else if(arguments.length == 2) {
 8
 9     alert(arguments[0] + arguments[1]);
10
11   }
12 }
13 doAdd(10);    //输出 "15"
14
15 doAdd(40, 20);    //输出 "60"
16
17 //当只有一个参数时，doAdd() 函数给参数加 5。如果有两个参数，则会把两个参数相加，返回它们的和。所以，doAdd(10) 输出的是 "15"，而 doAdd(40, 20) 输出的是 "60"。虽然不如重载那么好，不过已足以避开 ECMAScript 的这种限制。

  • Function对象(类)

1. Function对象的使用

函数实际上是功能完整的对象。Function 类可以表示开发者定义的任何函数。用 Function 类直接创建函数的语法如下：var function_name = new function(arg1, arg2, ..., argN, function_body)。

 1 <html>
 2
 3 <head>
 4
 5 <script type="text/javascript">
 6
 7      var sayHi = new Function("sName", "sMessage", "alert(\"Hello \" + sName + sMessage);");
 8
 9 </script>
10
11 </head>
12
13
14 <body>
15
16 <script type="text/javascript" >
17
18      sayHi("Jackie","Welcome here!");//调用函数
19
20 </script>
21
22 </body>
23
24 </html>

尽管可以使用 Function 构造函数创建函数，但最好不要使用它，因为用它定义函数比用传统方式要慢得多。不过，所有函数都应看作 Function 类的实例。

2. 使用Function类的length属性

 1 <html>
 2
 3 <head>
 4
 5 <script type="text/javascript">
 6
 7      function fun1(){}
 8
 9      function fun2(a1,a2){}
10
11      function fun3(a1,a2,a3,a4,a5,a6,a7){}
12
13 </script>
14
15 </head>
16
17
18 <body>
19
20 <script type="text/javascript">
21
22      document.write(fun1.length+" "+fun2.length+" "+fun3.length);
23
24 </script>
25
26 </body>
27
28 </html>

使用Function的length属性可以得到函数的形参个数。

3. 使用Function类的valueOf()方法和toString()方法。这两个方法返回的都是函数的源代码，在调试时尤其有用。

 1 <html>
 2
 3 <head>
 4
 5 function fun() {
 6
 7   alert("Hi");
 8
 9 }
10
11 </head>
12
13 <body>
14
15 <script type="text/javascript">
16
17      document.write(fun.toString());//输出函数的源代码
18
19 </script>
20
21 </body>
22
23 </html>

  • 闭包

ECMAScript 最易让人误解的一点是，它支持闭包（closure）。闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。

1.简单的闭包实例

在 ECMAScript 中使用全局变量是一个简单的闭包实例。请思考下面这段代码：

1 var sMessage = "hello world";
2
3 function sayHelloWorld() {
4
5  alert(sMessage);//使用函数之外定义的变量
6
7  }
8
9 sayHelloWorld();

在上面这段代码中，脚本被载入内存后，并没有为函数 sayHelloWorld() 计算变量 sMessage 的值。该函数捕获 sMessage 的值只是为了以后的使用，也就是说，解释程序知道在调用该函数时要检查 sMessage 的值。sMessage 将在函数调用 sayHelloWorld() 时（最后一行）被赋值，显示消息 "hello world"。

2.复杂的闭包实例

在一个函数中定义另一个会使闭包变得更加复杂。例如：

 1 var iBaseNum = 10;
 2
 3 function addNum(iNum1, iNum2) {
 4
 5     function doAdd() {
 6
 7           return iNum1 + iNum2 + iBaseNum;
 8
 9      }
10
11     return doAdd();
12
13 }

这里，函数 addNum() 包括函数 doAdd() （闭包）。内部函数是一个闭包，因为它将获取外部函数的参数 iNum1 和 iNum2 以及全局变量 iBaseNum 的值。 addNum() 的最后一步调用了 doAdd()，把两个参数和全局变量相加，并返回它们的和。

这里要掌握的重要概念是，doAdd() 函数根本不接受参数，它使用的值是从执行环境中获取的。可以看到，闭包是 ECMAScript 中非常强大多用的一部分，可用于执行复杂的计算。

提示：就像使用任何高级函数一样，使用闭包要小心，因为它们可能会变得非常复杂。

  • JavaScript函数的思维导图

时间： 2024-12-24 08:50:37

JavaScript基础5——关于ECMAscript的函数的相关文章

javascript基础一语法和常用函数

1语法 1.1引入的方式 在html中引入javascript,使用script标签,在html页面中包括外部引入js方式和在html内部引入js方式.如下两种: 方式一: <script type="text/javascript">要写的javascript内容</script> 方式二: <script type="text/javascript" src="引入外部的js文件"></script&

JavaScript基础-自己定义自己的函数

把一个函数对象赋值给变量后,就可以通过这个变量再次定义函数,甚至可以在一个函数内部再次定义它自己: var scareMe = function () { alert("Boo!"); scareMe = function () { alert("Double boo!"); }; }; // using the self-defining function scareMe(); // Boo! scareMe(); // Double boo! 如果你需要在一个函

JavaScript基础11——js的全局函数

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>js的全局函数</title> 6 <script type="text/javascript"> 7 // 由于不输入任何一个对象,所以可以直接写方法名使用 8 // eval(),执行js代码(如果字符串是一个js代码,使用方法直接执行) 9

JavaScript基础知识（对象、函数与对象）

17.对象 属性:描述对象的信息  方法:描述对象的行为  封装:只关心输入和输出(不管过程如何实现) ü 对象的分类: 内置对象(原生对象): 就是JavaScript语言预定义的对象(如String/Number). 宿主对象: 一般由浏览器环境提供实现,主要分为 BOM 和 DOM. 自定义对象: 就是由开发人员自主创建的对象. ü 对象的创建: ? 初始化器方式 var 对象名 = {         属性名 : 属性值 ,         方法名 : function( ){方法体} 

【javaScript基础】立即调用函数表达式

在javaScript中,每个函数被调用时,都会创建一个新的执行上下文.因为在一个函数里面定义的变量和函数只能在里面访问,在外面是不行的,上下文提供了一种很容易的方法来创建私有性. //makeCounter函数返回另外一个匿名函数,这个匿名函数能够访问到"私有"变量i, 好像有一点"特权"性. function makeCounter() { // i只能在makeCounter的里面被访问到 var i = 0; return function() { cons

【javascript基础】2、函数

原文:[javascript基础]2.函数 前言 我在上一篇[javascript基础]基本概念中介绍了javascript的一些基本概念,多谢大家的阅读和意见,自己写的东西可以被大家阅读,真心高兴,刚开始发布的时候我一直盯着阅读人数,虽然知道大家可能就是点开一下而已,但是还是给我一些继续写下去的信心.那今天写一些关于javascript函数的一些知识,帮助大家熟悉或者复习一些函数的基本知识. PS:最近jQuery源码交流群( 239147101)加了不少热新人,希望大家还是以学习为主,尽量少

JavaScript基础——函数表达式、闭包

简介 函数表达式是JavaScript中的一个既强大又容易令人困惑的特性.定义函数的方式有两种:一种是函数声明,另一种就是函数表达式.函数声明的语法是这样的: function functionName(arg0 , arg1 , arg2--){ //函数体 } 首先是function关键字,然后是函数的名字,这就是指定函数名的方式.Firefox.Safari.Chrome和Opera都给函数定义了一个非标准的name属性,通过这个属性可以访问到给函数指定的名字.这个属性的值永远等于跟在fu

javascript基础修炼（8）——指向FP世界的箭头函数

一. 箭头函数 箭头函数是ES6语法中加入的新特性,而它也是许多开发者对ES6仅有的了解,每当面试里被问到关于"ES6里添加了哪些新特性?"这种问题的时候,几乎总是会拿箭头函数来应付.箭头函数,=>,没有自己的this , arguments , super , new.target ,"书写简便,没有this"在很长一段时间内涵盖了大多数开发者对于箭头函数的全部认知(当然也包括我自己),如果只是为了简化书写,把=>按照function关键字来解析就好了

JavaScript 基础(五) 函数 变量和作用域

函数定义和调用 定义函数,在JavaScript中,定义函数的方式如下: function abs(x){ if(x >=0){ return x; }else{ return -x; } } 上述abs() 函数的定义如下: function 指出这是一个函数定义; abs 是函数的名称: (x) 括号内列出函数的参数,多个参数以,分隔: {...}之间的代码是函数体,可以包含若干语句,甚至可以没有任何语句. 注意:函数体内部的语句在执行时,一旦执行到return 时,函数就执行完毕,并将结果