JavaScript 学习（四）

关注

发布于: 2021 年 06 月 17 日

函数
函数的定义
函数的调用
函数的简单调用
在事件响应中调用函数
通过超链接定义函数
函数参数的使用
即时函数
使用函数的返回值
嵌套函数
递归函数
javascript 中的内置函数
（1）parseInt（）函数：
（2）parseFloat（）函数
（3）isNaN()函数
（4）isFinite（）函数
（5）encodeURI（）函数
（6）decodeURI（）函数
Function()构造函数与函数直接量

函数

函数的定义

在 javascript 中，函数是由关键字 function 、函数名加一组参数以及置于大括号中需要执行的一段代码定义的。基本语法如下：

function functionName（【parameter 1、parameter 2...】）{
statement；  [return expression；]
}

复制代码

functionName：必选项。用于指定函数名。在同一个页面中，函数名必须是唯一的，并且区分大小写。

parameter：可选性。用于指定参数列表。当使用多个参数时，参数间使用逗号进行分隔。一个函数最多可以有 255 个参数。

statement：必选项。是函数体，用于实现函数功能的语句。

expression：可选项。用于返回函数值。expression 为任意表达式变量或常量。

函数的调用

函数的简单调用

函数的定义语句通常会放在 HTML 文件的<head>段中，而函数的调用语句通常被放在<body>段中，如果在函数定义前调用函数，执行将会出错。函数的定义及调用语法如下：

<html>  <head>
<script type="text/javascript">
    function functionName（parameters）{ some statement； } //定义函数
</script>
</head>
<body>
     functionName（parameter）；//调用函数
</body>
</html>

复制代码

functionName：函数名称

parameter：参数名称

在事件响应中调用函数

当用户单击某个按钮或选择某个复选框时都将触发事件，通过编写程序对事件做出反应的行为称为响应事件，在 javascript 语言中，将函数与事件相关联就完成了响应事件的过程。如当用户单击某个按钮时执行相应的函数。

<html>    <head>        <meta charset="utf-8">        <title>JS基本语法</title>        <script type="text/javascript">            function test(){      //定义函数                alert("test");            }        </script>    </head>    <body>        <form action="" method="post" name="form1">            <input type="button" value="提交" onclick="test();"> //在按钮事件触发时调用自定义函数        </form>    </body></html>

复制代码

通过超链接定义函数

函数除了可以在响应事件中被调用外，还可以在超链接中被调用。在<a>标记中的<href>标记中使用"javascript:关键字"超链接来调用函数，当用户单击该超链接时，相关函数将被执行。下面的代码实现了通过超链接接调用函数。

<html>    <head>        <meta charset="utf-8">        <title>JS基本语法</title>        <script type="text/javascript">            function test(){      //定义函数                alert("test");            }        </script>    </head>    <body>        <a href="javascript:test()">test</a> <!--在超链接中调用自定义函数-->    </body></html>

复制代码

函数参数的使用

function 自定义函数名（形参 1，形参 2...）{ 函数体 }

定义函数时，在函数名后面的圆括号内可以指定一个或多个参数（参数之间用“,”分隔）。指定参数的作用在于，当调用函数时，可以为被调用函数传递一个或多个值。

在定义函数时指定的参数被称为形式参数，而把调用函数时实际传递的值称为实际参数。

即时函数

定义了一个匿名函数，并且立即就调用执行了这个匿名函数。第一对括号中的是匿名函数的定义，随后紧跟的一对括号是对匿名函数的调用。

格式：（密名函数）（给密名函数传参）

即时函数的使用形式一般有两种：

第一种就是刚刚介绍的（定义 function）（）后面的（）就是调用的。
第二种就是（function （调用））

例子：

<script type="text/javascript">	(function(a,b){		console.log('sum = '+(a+b))	})(3,4)</script>

复制代码

运行结果：

使用函数的返回值

有时需要在函数中返回一个数值供在其他函数中使用，为了能够返回给变量一个值，可以在函数中添加 return 语句，将需要返回的值赋予变量，最后将此变量返回。

<script type="text/javascript">            function functionName(parameters){      //定义函数                var results=somestaments;                return results;            } </script>

复制代码

results：函数中的局部变量

return：函数中返回变量的关键字。（返回值在函数调用中不是必须的）

嵌套函数

所谓的嵌套函数就是在函数内部再定义一个函数，这样定义的优点在于可以使内部函数轻松获得外部函数的参数以及函数的全局变量等。

语法：

<script type="text/javascript">            function functionName(parameter1,parameter2){      //定义函数                function innerFunction(){                    somestatements;                }                            }</script>

复制代码

functionName：外部函数名称

innerFunction:内部函数名称

递归函数

所谓递归函数就是函数在自身的函数体内调用自身，使用递归函数时一定要当心，处理不当将会使程序进入死循环，递归函数只能在特定的情况下使用，如处理阶乘问题。

语法：

<script type="text/javascript">            function functionName(parameter1){      //定义函数                function functionName(parameter2){                        }                            }</script>

复制代码

javascript 中的内置函数

在使用 javascript 语言时，除了可以自定义函数之外，还可以使用 javascript 的内置函数，这些内置函数是由 javascript 语言自身提供的。

（1）parseInt（）函数：

主要将首位为数字的字符串转换成数字，如果字符串不是以数字开头，那么将返回 NaN.

语法：parseInt（StringNum，[n]）

StringNum:需要转换成整型的字符串。

n：提供在 2-36 之间的数字表示所保存数字的进制数。这个参数在函数中不是必需的。

（2）parseFloat（）函数

parseFloat（）函数主要将首位为数字的字符串转换成浮点型数字，如果字符串不是以数字开头，那么将返回 NaN.

语法：parseFloat（StringNum）

StringNum:需要转换成浮点型的字符串。

（3）isNaN()函数

语法：isNaN(Num)

Num:需要验证的数字。

（4）isFinite（）函数

isFinite（）函数主要用于检验某个表达式是否为无穷大。

语法：isFinite（Num）

Num:需要验证的数字。

（5）encodeURI（）函数

encodeURI（）函数主要用于返回一个 URI 字符串编码后的结果。

语法：encodeURI（url）

url:需要转换为网络资源地址的字符串。

（6）decodeURI（）函数

decodeURI（）函数主要用于将已编码为 URI 的字符串解码成最初的字符串并返回。

decodeURI（url）

url:需要解码的网络资源地址。

Function()构造函数与函数直接量

除了使用基本的 function 语句定义函数之外，还可以使用另外两种方式来定义，即使用 Function（）构造函数和函数直接量定义。

构造函数 Function（）允许在运行时动态创建和编译 javascript 代码，而函数直接量却是程序结构的一个静态部分，就像函数语句一样。

每次调用构造函数 Function（）都会解析函数体，并且创建一个新的函数对象。

Function（）创建的函数使用的不是静态作用域，相反的，该函数总是被当作顶级函数来编译。

function maskingKeyboard(){                if(event.keyCode==8){  //判断是否为Backspace键                    event.keyCode=0;                    event.returnValue=false;                    aler("当前设置不允许使用Backspace键");                }                if(event.keyCode==13){  //判断是否为Enter键                    event.keyCode=0;                    event.returnValue=false;                    aler("当前设置不允许使用Enter键");                }                if(event.keyCode==116){  //判断是否为F5键                    event.keyCode=0;                    event.returnValue=false;                    aler("当前设置不允许使用F5刷新键");                }                //判断是否为Alt+方向键←或方向键→                if((event.altKey)||((window.event.keyCode==37)||(window.event.keyCode==39)){                    event.returnValue=false;                    aler("当前设置不允许使用Alt+方向键一或方向键→");                }                if(event.ctrlKey)&&(eventkeyCode==78){  //判断是否为Ctrl+N快捷键                    event.returnValue=false;                    alert("当前设置不允许使用Ctrl+N新建IE窗口")                }                if(event.shiftKey)&&(event.keyCode==121){  //判断是否为Ctrl+N快捷键                    event.returnValue=false;                    alert("当前设置不允许使用Shift+F10");                }            }            function rightKey(){                if(event.button==2){                    event.returnValue=false;                    alert("禁止使用鼠标右键！ ");                }            }            document.onmousedown=rightKey();            document.onkeydown=maskingKeyboard();

复制代码

发布于: 2021 年 06 月 17 日阅读数: 10

原文链接:【http://xie.infoq.cn/article/909a8d438807910b8b9bbefe6】。

空城机

关注

曾经沧海难为水,只是当时已惘然 2021.03.22 加入

业余作者，在线水文主要干前端的活，业余会学学python 欢迎各位关注，互相学习，互相进步

发布

暂无评论

创作场景

JavaScript 学习（四）

函数

函数的定义

函数的调用

函数的简单调用

在事件响应中调用函数

通过超链接定义函数

函数参数的使用

即时函数

使用函数的返回值

嵌套函数

递归函数

javascript 中的内置函数

（1）parseInt（）函数：

（2）parseFloat（）函数

（3）isNaN()函数

（4）isFinite（）函数

（5）encodeURI（）函数

（6）decodeURI（）函数

Function()构造函数与函数直接量

空城机

评论