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

注意: 在函数声明中不需要在右花括号后加上分号，但是另一方面，函数表达式应该总是以分号结尾。

提示: 在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

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

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