[TOC] >[info]函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。(将完成某一特定功能的代码集合起来，可以重复使用的代码块。) **优点** 1. 使程序更加简洁 2. 逻辑更有条理 3. 调用更方便 4. 维护更加容易 ## 函数的创建 ### 基本语法 ~~~ <script type="text/javascript"> function myFunction(){ alert("Hello World!"); } </script> ~~~ ### 字面量定义 ~~~ <script type="text/javascript"> var myFunction = function () { alert("Hello World!"); } </script> ~~~ ## 函数的调用 >[info]通过括号来调用：函数名() >[info]通过触发事件来调用 ~~~ <script type="text/javascript"> var myFunction = function () { alert("Hello World!"); } myFunction(); </script> <div id="box" onclick="myFunction()"></div> ~~~ ** 注意事项** 1. 如果两个函数的命名相同，后面的将会覆盖前面的函数。 2. 以基本语法声明的函数，会在页面载入的时候提前解析到内存中， 以便调用。所以可以在函数的前面调用。但是以字面量形式命名的函数，会在执行到他的时候，才进行赋值。 所以只能在函数的后面调用 3. 在不同的<script></script>块中，因为浏览器解析的时候是分块 解析的，所以前面的块不能调用后面块的函数，所以在不同的块 之间调用函数的时候，应该先定义后调用。 ## 函数的参数 >[info]在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。 您可以发送任意多的参数，由逗号 (,) 分隔： ~~~ <script type="text/javascript"> myFunction(argument1,argument2) //实参:调用函数的时候，在括号中传入的变量或值叫做 实参。 </script> ~~~ 当您声明函数时，请把参数作为变量来声明： ~~~ <script type="text/javascript"> function myFunction(var1,var2){ //形参:在定义函数的时候，函数括号中定义的变量叫做形参。用来接受实参的。 //这里是要执行的代码 } </script> ~~~ ## 函数返回值 >[info]有时，我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。 ~~~ <script type="text/javascript"> function myFunction(){ var x=5; return x; } var myVar=myFunction();//这里可以接到函数的返回值5; </script> ~~~ >[danger]注意:如果函数没有返回值，那么这个函数的值就会自动的赋值为undefined,函数中可以写多个return，遇到一个return就会停止执行。 ## 变量的作用域 >[info]作用域:指变量在代码中的作用范围。 ### 全局变量 >[info]在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。 ### 局部变量 >[info]在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。 ~~~ <script type="text/javascript"> var xbs ="学并思";//全局变量 function myFunction(){ var x=5; //局部变量 y = 10; //全局变量 return x; } var myVar=myFunction();//这里可以接到函数的返回值5; alert(x);//函数外不能使用局部变量 alert(y);//全局变量，到处可以使用 </script> ~~~ ### 函数执行顺序 >[info]一个函数定义后，不调用是不会自动执行的。 如果在一个函数内遇到另外一个函数，会先执行另外一个函数，执行完之后再接着执行本函数。一个函数内部可以调用同一个函数。