第4章 JavaScript语言基础——函数概述
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
4.4 JavaScript函数
4.4.2 函数的调用
(2)在表达式中调用（有返回值）
位置：函数的调用语句通常被放在表达式中，返回结 果可在表达式中使用，这样就可以将输出工作交于 其他代码完成。 语法：<html> <head></head>
<body> var a=functionName(parameters); </body> </html>
4.4.4 几种特殊的函数
构造函数Function()和函数直接量的区别： 首先，构造函数允许在运行时动态创建和编译 JavaScript代码，而函数直接量却是程序结构的一个静 态部分，就像函数语句一样。 其次，每次调用构造函数时都会解析函数体，并且 创建一个新的函数对象。如果对构造函数的调用出现 在一个循环中，或者出现在一个经常被调用的函数中 ，这种方法的效率将非常低。而函数直接量不论出现 在循环体还是出现在嵌套函数中，既不会在每次调用 时都被重新编译，也不会在每次遇到时都创建一个新 的函数对象。 第三，使用Function()创建的函数使用的不是静态作 用域，相反地，该函数总是被当作顶级函数来编译。
函数很灵活，可使用不同的参数来调用该函数，这样 就会产生不同的结果。
4.4 JavaScript函数
4.4.2 函数的调用
(4)通过链接调用函数
在<a>标签中的href标记中使用“javascript:”关键字 调用函数，当用户单击这个链接时，相关函数将被 执行。 形式：<a href=“javascript: myFunction(„Bill Gates‟,„CEO)”>超链接</a>
4.4 JavaScript函数
4.4.3 函数库
(2) 引用函数库
（代码：6-3.html） 在HTML文件中引用函数库js文件的方法如下：
<script src="js文件"></script> <script> // 引用js文件中的函数 </script>
4.4 JavaScript函数
4.4.4 几种特殊的函数 构造函数 function语句 函数直接量 函数名=Function("参 function 函数名(参 function(参数1,参数 语法 var 数1"，"参数2" …"参数n", 数1,参数2…参数n){ 2…参数n){函数体}
参数
"语句块"); 函数体} 0个多个字符串型参数，最 0个或多个，不必是字 后一个参数相当于是函数体。 符串 可以是字符串直接量，也可 以是返回字符串的表达式。 一个函数对象，如果将该函 任何内容 数直接赋值给一个变量，那 么该变量名就相当于函数名。 创建对象，或动态地建立和 被用作语句 编译一个函数 0个或多个，不必是字 符串
4.4.4 几种特殊的函数
在JS中，有三种特殊的函数： 1.var 函数名= new Function(“参数1”, “参数2”, ..., “参 数n”, “语句块”); //Function()构造函数 如：var f=new Function("x","return x*x;"); 2.var fun = function(参数1,参数2,...参数n){ statements }; 如：f = function(x){return x*x;}; //函数直接量 如果函数无明确的返回值，或调用了没有参数的 return 语句，那么它真正返回的值是 undefined。 3.function 函数名(参数列表){函数体}//function语句 函数
4.4 JavaScript函数
4.4.2 函数的调用
（1）函数的直接调用（没有返回值）
位置：函数的调用语句通常被放在<body>标记中，如 果在函数定义之前调用函数，执行将会出错。 语法：<html> <head></head>
<body> functionName(parameters); </body> </html> 此时，函数相当于一个批处理文件，函数中的 代码相当于批处理文件中的命令的集合。
4.4 JavaScript函数
4.4.4 几种特殊的函数
代码：6-5.html
4.4 JavaScript函数
4.4.4 几种特殊的函数
（3）使用function语句定义函数 说明：定义函数时使用最多 例6-6.html 语法：function 函数名(参数1,参数2…参数n){函数体}
4.4 JavaScript函数
4.4 JavaScript函数
4.4.1 函数的定义
定义：由关键字 function 、函数名、参数列表以及 置于大括号中需要执行的一段语句组成的定义结构。 位置：在 HTML 中，必须存放在 <script></script> 标 记之间，一般位于<head></head>标记中；而单独存 放在.js文件中时，不需要加标签。 语法：<script language="javascript"> function functionName(parameters){ some statements; } 注意：JavaScript 对大小写敏感。 </script> 关键词 function 必须是小写的。
4.4 JavaScript函数
4.4.4 几种特殊的函数
代码：6-4.html
4.4 JavaScript函数
4.4.4 几种特殊的函数
构造函数的返回值
Javascript中的构造函数通常没有返回值。但是，函数是允 许有返回值的。如果一个构造函数有一个返回值，则返回 值必须是this，或者其它非对象类型的值。 如例2所示，首先是定义构造函数，然后是调用new表达式
4.4 JavaScript函数
4.4.2 函数的调用
(3)在事件响应中调用函数
当用户单击某个按钮或某个复选框时都将触发事件， 通过编写程序对事件做出反应的行为称为响应事件。 在JavaScript语言中，将函数与事件相关联就完成了 响应事件的过程。
形式：响应事件=“函数名(实参列表)” 如：<input onclick=“(myFunction('Bill Gates','CEO)”/>
第4章 JavaScript语言基础
主要内容 1 2 3 4 JavaScript函数定义 JavaScript函数调用 JavaScript函数库 JavaScript几种特殊的函数 JavaScript内置函数(1) 本讲小结
5 6
教学目标及重难点
• 教学目标： 掌握JavaScript中自定义函数的方法，能够根据实 际情况编写自定义函数。 熟悉JavaScript中函数的几种调用方法。 掌握JavaScript中几种特殊的函数：构造函数、对 象字面量函数和function语句函数的基本语法。 • 重点： JavaScript中的三种特殊函数、自定义函数和 内置函数 • 难点：JavaScript中的三种特殊函数的定义和使用，自 定义函数、内置函数，会根据实际情况自定义函数或 调用内置函数。
4.4 JavaScript函数
4.4.2 函数的调用
调用形式：函数名(实参列表) 在调用函数时，可向其传递值，这些值被称为实参 参数可以有任意多个，由逗号 (,) 分隔，但要注意 一定要要与定义时的形参列表相对应。 如：document.write(myFunction('Bill Gates','CEO); 函数的参数分为形式参数和实际参数。 形式参数代表函数的位置和类型，系统并不为形参 分配相应的存储空间。 实参通常在调用函数之前已经被分配了内存，并且 赋予了实际的数据，在函数的执行过程中，实际参数 参与了函数的运行。
4.4 JavaScript函数
4.4.1 函数的定义 <script type="text/javascript"> function myFunction (name, job){ alert("Welcome " + name + ", the " + job); } </script>
带有参数的函数：myFunction (argument1,argument2) 参数可以有任意多个，它们由逗号 (,) 分隔。这些参 数可以在函数中使用。 带有返回值的函数：myFunction (argument1,argument2) 在程序结尾加上return 语句，在使用 return 语句时， 函数会停止执行，并返回指定的值。
返回 值 使用 场合
备注
定义函数比用传统方式要慢 得多
使用最广泛
如果将该函数直接赋值 给一个变量，那么该变 量名就相当于函数名。 被用作表达式，在表达 式中直接使用，或在只 使用一次、无需为函数 命名的情况下使用。 无需指定函数名，若指 定函数名，调用自身的 递归函数时非常有用。
4.4 JavaScript函数
4.4 JavaScript函数
4.4.4 几种特殊的函数
（1）构造函数 如：var date = new Date(); 形式：在new运算符的后面跟着一个函数的调用
运算符new首先创建一个新的没有任何属性的对象，然后调用 该函数，把新的对象作为this关键字的值传递。 作用：初始化一个新创建的对象，并在使用对象前设置对象 的属性。如例1代码所示： function Rectangle(w, h) { this.width = w; this.height = h; } 然后，可以使用new运算符调用这个函数来创建对象的实例 var rect = new Rectange(4,8);
4.4 JavaScript函数
4.4.2 函数的调用
当调用该函数时，会执行函数内的代码。一般地， JavaScript 函数在任何位置都可进行调用。 调用语句包含函数名称、实参。 JavaScript中调用函数的方法有： 调用函数时， （1）直接调用法（无返回值） 调用的函数名 必须以与定义 （2）在表达式中调用法 的函数名相 （3）在事件中调用法 同，参数列表 （4）在链接调用函数 也需相同。 （5）递归调用 （6）嵌套调用
4.4 JavaScript函数
4.4.2 函数的调用
(5)递归调用
递归：函数调用函数本身 循环：用于反复执行某些语句。 循环中可以实现的功能，递归通常都能实现；而递 归中能实现的功能，在循环中却不一定能实现。 语法：<script type="text/javascript"> function functionName(parameters1){ functionName(parameters2); } </script> 注意：递归函数只在特定的情况下使用，避免使程 序进入死循环。例6-1.html
4.4 JavaScript函数
4.4.2 函数的调用
4.4 JavaScript函数
4.4.2 函数的调用
Fra Baidu bibliotek6)嵌套调用
例6-2.html 嵌套：在函数中定义函数 语法：<script type="text/javascript"> function functionName1(parameters1){ functionName2(parameters2); } </script> 注意：在函数中定义的函数，只能在当前函数中才 能被调用。而顶层代码中的函数，能被其他函数调 用。如下例，squareSum(x,y)能被其他函数调用，而 square(x)不能被squareSum(x,y)之外的函数调用。
4.4 JavaScript函数
4.4.2 函数的调用
4.4 JavaScript函数
4.4.3 函数库
(1) 定义函数库
JavaScript函数库是一个. js文件，其中包含函数的定 义。 例: 创建一个函数库my.js，其中包含2个函数 PrintString()和sum()，代码如下：my.js
function A(){ this.p = “I‟m in constructed object”; this.alertP = function(){ alert(this.p); } } var a = new A();
4.4 JavaScript函数
4.4.4 几种特殊的函数
（2）对象字面量（函数直接量） 例3：创建了一个对象Obj1，它具有一个成员变量p以 及一个成员方法alertP。这种写法不需要定义构造函数 var Obj1 = { p:”I‟m in Object literal”, alertP:function(){ alert(this.p); } } 缺点:每创建一个新的对象都需要写出完整的定义语句 ，不便于创建大量相同类型的对象，不利于使用继承 等高级特性。例6-5.html