试一试
function calcRectArea(width, height) {
return width * height;
}
console.log(calcRectArea(5, 6));
// Expected output: 30
语法
function name(param0) {
statements
}
function name(param0, param1) {
statements
}
function name(param0, param1, /* …, */ paramN) {
statements
}
参数
name-
函数名称。
param可选-
函数的形参名称。不同引擎中参数的最大数量各不相同。有关参数的语法，请参阅函数参考。
statements可选-
构成函数体的语句。
描述
一个 function 声明会创建一个 Function 对象。每次调用函数时，它会返回由最后执行的 return 语句指定的值，或者如果到达函数体的末尾则返回 undefined。有关函数的详细信息，请参阅函数。
function 声明的行为类似于 var 和 let 的混合体
- 与
let类似，在严格模式下，函数声明的作用域限定在最近的包含块内。 - 与
let类似，模块顶层或严格模式下块内的函数声明不能被任何其他声明重新声明。 - 与
var类似，脚本顶层（严格或非严格）的函数声明会成为globalThis的属性。脚本或函数体顶层（严格或非严格）的函数声明可以被另一个function或var重新声明。 - 与两者都类似，函数声明可以被重新赋值，但应避免这样做。
- 与两者都不同，函数声明与它的值一起被提升，并且可以在其作用域内的任何地方调用。
块级函数声明
警告：在非严格模式下，块内的函数声明行为异常。只有在严格模式下才在块内声明函数。
函数可以有条件地声明——也就是说，函数语句可以嵌套在 if 语句中。然而，在非严格模式下，不同实现的结果不一致。
console.log(
`'foo' name ${
"foo" in globalThis ? "is" : "is not"
} global. typeof foo is ${typeof foo}`,
);
if (false) {
function foo() {
return 1;
}
}
// In Chrome:
// 'foo' name is global. typeof foo is undefined
//
// In Firefox:
// 'foo' name is global. typeof foo is undefined
//
// In Safari:
// 'foo' name is global. typeof foo is function
无论 if 主体是否实际执行，作用域和提升效果都不会改变。
console.log(
`'foo' name ${
"foo" in globalThis ? "is" : "is not"
} global. typeof foo is ${typeof foo}`,
);
if (true) {
function foo() {
return 1;
}
}
// In Chrome:
// 'foo' name is global. typeof foo is undefined
//
// In Firefox:
// 'foo' name is global. typeof foo is undefined
//
// In Safari:
// 'foo' name is global. typeof foo is function
在严格模式下，块级函数声明的作用域限定在该块内，并被提升到块的顶部。
"use strict";
{
foo(); // Logs "foo"
function foo() {
console.log("foo");
}
}
console.log(
`'foo' name ${
"foo" in globalThis ? "is" : "is not"
} global. typeof foo is ${typeof foo}`,
);
// 'foo' name is not global. typeof foo is undefined
提升
JavaScript 中的函数声明被提升到其包含函数或全局作用域的顶部。你可以在声明函数之前使用它
hoisted(); // Logs "foo"
function hoisted() {
console.log("foo");
}
请注意，函数表达式不会被提升
notHoisted(); // TypeError: notHoisted is not a function
var notHoisted = function () {
console.log("bar");
};
重新声明
function 声明是否可以在同一作用域中被重新声明，取决于它所包含的作用域。
在脚本的顶层，function 声明的行为类似于 var，并且可以被另一个 function 或 var 重新声明，但不能被 let、const 或 class 重新声明。
function a(b) {}
function a(b, c) {}
console.log(a.length); // 2
let a = 2; // SyntaxError: Identifier 'a' has already been declared
当 function 声明被 var 重新声明时，无论它们的相对位置如何，var 声明的初始化器总是覆盖函数的值。这是因为函数声明在任何初始化器被评估之前就被提升，所以初始化器在后面，并覆盖了值。
var a = 1;
function a() {}
console.log(a); // 1
在函数体的顶层，function 也表现得像 var，可以被重新声明或与参数同名。
function foo(a) {
function a() {}
console.log(typeof a);
}
foo(2); // Logs "function"
在模块的顶层或严格模式下的块内，function 声明的行为类似于 let，不能被任何其他声明重新声明。
// Assuming current source is a module
function foo() {}
function foo() {} // SyntaxError: Identifier 'foo' has already been declared
"use strict";
{
function foo() {}
function foo() {} // SyntaxError: Identifier 'foo' has already been declared
}
catch 块内的 function 声明不能与 catch 绑定的标识符同名，即使在非严格模式下也是如此。
try {
} catch (e) {
function e() {} // SyntaxError: Identifier 'e' has already been declared
}
示例
使用函数
以下代码声明了一个函数，当给定三种产品的销售数量时，它返回总销售额。
function calcSales(unitsA, unitsB, unitsC) {
return unitsA * 79 + unitsB * 129 + unitsC * 699;
}
规范
| 规范 |
|---|
| ECMAScript® 2026 语言规范 # sec-function-definitions |
浏览器兼容性
加载中…