不使用函数，写JavaScript代码是不可能的。JavaScript函数可以定义为执行特定任务的过程。

大多数函数都是按照一套标准编写的。它规定应识别函数名称及其括号内的参数。如果在函数中使用了语句，应用大括号标注。

在这个教程中，你将学习如何创建JavaScript函数。你还会了解JavaScript的函数声明和函数表达式，其中还包括升降。

目录

JavaScript 函数：主要技巧

  • 关键词用于函数定义。function

  • 你可以通过函数声明或表达式来定义函数。

  • 函数声明会被抬起，而函数表达式则不会。

  • 函数也可以用函数构造子定义。Function()

  • 函数可以是自我调用的。

函数声明与表达式

在上一节课中，我们描述了在宣告函数时应遵循的语法。在你这样做的同时，函数不会立即开始运行：你会创建它以备后用。要执行该函数，必须调用它。

示例

function sampleFunction(a, b) {    return a * b;
}

注：分号用于分隔可执行的JavaScript语句。
由于JavaScript函数声明不是可执行语句，通常不会用分号结尾。

函数表达式指的是存储在变量中的函数：

示例

var a = function (b, c) {return b * c}

之后，同一变量被用作函数。下面的示例包含一个匿名函数。由于它没有名称，因此用变量来调用：

示例

var a = function (b, c) {return b * c};document.getElementById("test").innerHTML = a(4, 3);

提升

JavaScript默认将声明移到浏览器代码顶部。这叫做吊装。

这意味着，如果你使用函数声明，可以在声明前后调用该函数。在下面的示例中，你可以看到无论在声明之前还是之后调用，该函数都有效。这是因为函数声明被提升：

示例

// Function is invoked before it is declared:var a = sampleFunction(5, 10);document.getElementById("test").innerHTML = a; // this worksfunction sampleFunction(a, b) {    return a * b;
}// Function is invoked after it has been declaredvar b = sampleFunction(5, 10);document.getElementById("test2").innerHTML = b; // this works too

但如果你使用函数表达式，情况就不一样：你必须先定义函数，才能调用它。

请看看我们的下一个例子。你可以看到，只有在定义好函数后调用时，函数才会被正确执行。这是因为函数表达式没有被抬起：

示例

// Function is invoked after it has been declared:var a = function (b, c) {return b * c};document.getElementById("test").innerHTML = a(4, 3); // this works// Function is invoked before it is declared:document.getElementById("test2").innerHTML = b(4, 3); // this does not work. Console logs "Uncaught TypeError: b is not a function".var b = function (b, c) {return b * c};

自调用函数

函数也可以是自我调用的。通过使用包含额外括号的特定语法，你可以创建一个不需要在其他地方调用，而是自己调用的函数：

示例

(function () {    document.getElementById("test").innerHTML = "Good day!";
})();

在上面的例子中，你看到一个匿名的自调用函数。然而，自调用函数不必是匿名的：你也可以为它们命名。

使用构造函数

正如你已经知道的，我们用这个关键词来定义JavaScript函数。不过，你也可以通过使用集成的JavaScript函数构造器来实现：functionFunction()

示例

var sampleFunction = new Function("b", "c", "return b * c");document.getElementById("test").innerHTML = sampleFunction(5, 6);

然而，这并不常见。上述示例可以轻松地重写为没有构造函数的正则函数：

示例

var sampleFunction = function (b, c) {return b * c}document.getElementById("test").innerHTML = sampleFunction(5, 6);

对象、值、表达式

如果我们对函数使用算子，它会返回它是一个函数。然而，在JavaScript中，函数是函数对象，因为它们具有属性和方法。typeof

在下面的示例中，我们使用该性质来确定该函数接收到多少参数：arguments.length

示例

function sampleFunction(x, y) {    return arguments.length;
}

在下一个例子中，我们将该方法作为JavaScript返回函数，表示一个字符串，表示函数的源代码：toString()

示例

function sampleFunction(x, y) {    return x * y;
}document.getElementById("test").innerHTML = sampleFunction.toString();

JavaScript 函数也可以作为值使用：

示例

function sampleFunction(a, b) {    return a * b;
}var c = sampleFunction(5, 6);

你也可以在表达式中使用JavaScript函数：

示例

function sampleFunction(x, y) {    return x * y;
}var z = sampleFunction(5, 6) + 34;