JS函数function – JavaScript教程 JS函数function|JavaScript

上一章JavaScript教程请查看：JS循环语句
在本教程中，你将学习如何在JavaScript中定义和调用函数。
什么是函数？函数是一组执行特定任务的语句，可以与主程序分开保存和维护。函数提供了一种创建可重用代码包的方法，这些代码包更易于移植和调试。以下是使用函数的一些优点:

函数可以减少程序中代码的重复——函数允许将常用代码块提取到单个组件中。现在，你可以通过在脚本中随时调用这个函数来执行相同的任务，而不必一次又一次地复制和粘贴相同的代码块。
函数使代码更容易维护——因为一个函数创建一次就可以多次使用，所以在函数内部所做的任何更改都可以在所有地方自动实现，而不需要触及几个文件。
函数可以更容易地消除错误——当程序被细分为函数时，如果出现任何错误，你就可以确切地知道是哪个函数导致了错误，以及在哪里可以找到错误。因此，修复错误变得更加容易。

下面的部分将向你展示如何在脚本中定义和调用函数。
定义和调用函数函数的声明以function关键字开头，后跟要创建的函数的名称，后跟括号即()，最后将函数代码放在大括号{}之间。下面是声明函数的基本语法:

function functionName() { // Code }

下面是一个简单的函数示例，它将显示一条hello消息

// 定义函数 function sayHello() { alert("Hello, welcome to srcmini!"); } // 调用函数 sayHello();

一旦定义了一个函数，就可以从文档中的任何地方调用它，方法是输入它的名称，然后输入一组括号，如上面示例中的sayHello()。
注意: 函数名必须以字母或下划线字符开头，不能以数字开头，后面可以是更多的字母、数字或下划线字符。函数名是区分大小写的，就像变量名一样。
向函数添加参数你可以在定义函数以在运行时接受输入值时指定参数。这些参数的作用类似于函数中的占位符变量；它们在运行时被调用时提供给函数的值(称为参数)替换。
参数是在括号内函数的第一行设置的，如下所示:

function functionName(parameter1, parameter2, parameter3) { // Code }

以下示例中的displaySum()函数接受两个数字作为参数，将它们相加，然后在浏览器中显示结果。

// 定义函数 function displaySum(num1, num2) { var total = num1 + num2; alert(total); } // 调用函数 displaySum(6, 20); // : 26 displaySum(-5, 17); // : 12

你可以定义任意多的参数，但是，对于你指定的每个参数，需要在调用函数时将对应的参数传递给该函数，否则其值将成为未定义的undefined。让我们考虑下面的例子：

// 定义函数 function showFullname(firstName, lastName) { alert(firstName + " " + lastName); } // 调用函数 showFullname("Clark", "Kent"); // : Clark Kent showFullname("John"); // : John undefined

函数参数ES6的默认值使用ES6，现在可以为函数参数指定默认值。这意味着如果在调用函数时没有提供参数，那么将使用这些默认参数值，这是JavaScript中最受期待的特性之一。这里有一个例子:

function sayHello(name = 'Guest') { alert('Hello, ' + name); }sayHello(); // : Hello, Guest sayHello('John'); // : Hello, John

而在ES6之前，为了达到同样的效果，我们必须写这样的东西

function sayHello(name) { var name = name || 'Guest'; alert('Hello, ' + name); }sayHello(); // : Hello, Guest sayHello('John'); // : Hello, John

要了解其他ES6特性，请参阅JavaScript ES6特性一章。
从函数返回值函数可以使用return语句将值返回给调用该函数的脚本，值可以是任何类型，包括数组和对象。
return语句通常放在函数的最后一行，在右花括号之前，并以分号结束，如下面的示例所示。

// 定义 function getSum(num1, num2) { var total = num1 + num2; return total; } // 显示返回值 alert(getSum(6, 20)); // : 26 alert(getSum(-5, 17)); // : 12

一个函数不能返回多个值。但是你可以通过返回一个值数组来获得类似的结果，如下面的示例所示。

// 定义函数 function divideNumbers(dividend, divisor){ var quotient = dividend / divisor; var arr = [dividend, divisor, quotient]; return arr; } // 将返回值存储在变量中 var all = divideNumbers(10, 2); alert(all[0]); // : 10 alert(all[1]); // : 2 alert(all[2]); // : 5

处理函数表达式我们以前用来创建函数的语法称为函数声明，创建函数还有另一种语法，称为函数表达式。

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

一旦函数表达式被存储在一个变量中，这个变量就可以用作一个函数

var getSum = function(num1, num2) { var total = num1 + num2; return total; }; alert(getSum(5, 10)); // : 15 var sum = getSum(7, 25); alert(sum); // : 32

【JS函数function – JavaScript教程】注意: 在函数声明中不需要在右花括号后加上分号，但是另一方面，函数表达式应该总是以分号结尾。
提示: 在JavaScript中，函数可以存储在变量中，作为参数传递给其他函数，作为返回值传递给其他函数，并在运行时构造函数。
函数声明和函数表达式的语法看起来非常相似，但是它们的计算方式不同，请看下面的例子:

declaration(); function declaration() { alert("Hi, 函数声明!"); } expression(); // Uncaught TypeError: undefined is not a function var expression = function() { alert("Hi, 函数表达式!"); };

正如你在上面的示例中所看到的，当函数表达式在定义之前被调用，但是函数声明成功执行时，它会抛出异常。
程序执行前的JavaScript解析声明函数。因此，程序是否在定义函数之前调用该函数并不重要，因为JavaScript已经在幕后将该函数提升到了当前范围的顶部。在将函数表达式赋值给变量之前，不会对其求值; 因此，在调用时它仍然是未定义的。
ES6引入了更短的语法来编写函数表达式，称为箭头函数，请查看JavaScript ES6特性一章来了解更多。
理解变量范围但是，你可以在JavaScript的任何地方声明变量，但是，声明的位置决定了变量在JavaScript程序中的可用性范围，即变量可以在哪里使用或访问，这种可访问性称为可变范围。
默认情况下，在函数中声明的变量具有局部作用域，这意味着它们不能从函数外部查看或操作，如下面的示例所示:

// 定义函数 function greetWorld() { var greet = "Hello World!"; alert(greet); } greetWorld(); // : Hello World! alert(greet); // Uncaught ReferenceError: greet is not defined

但是，在函数外部的程序中声明的任何变量都具有全局作用域，即它对所有脚本都是可用的，不管脚本是在函数内部还是外部。这里有一个例子