JavaScript 函数定义为 function
关键字。
您可以使用函数声明或 函数表达式。
在本教程的前面部分,您了解到函数是通过以下方式声明的 以下语法:
function functionName(parameters) {
// code to be executed
}
声明的函数不会立即执行。它们被“保存以供以后使用”, 并将在稍后被调用(调用)时执行。
function myFunction(a, b) {
return a * b;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<p>Call a function which performs a calculation and returns the result:</p>
<p id="demo"></p>
<script>
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
分号用于分隔可执行的 JavaScript 语句。
由于函数声明不是可执行语句,因此它是 以分号结束的情况并不常见。
JavaScript 函数也可以使用表达式来定义。
函数表达式可以存储在变量中:
const x = function (a, b) {return a * b};
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>A function can be stored in a variable:</p>
<p id="demo"></p>
<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
将函数表达式存储到变量中后,该变量可以 用作函数:
const x = function (a, b) {return a * b};
let z = x(4, 3);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>After a function has been stored in a variable,
the variable can be used as a function:</p>
<p id="demo"></p>
<script>
const x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
</body>
</html>
上面的函数实际上是一个匿名函数(没有 姓名)。
存储在变量中的函数不需要函数名称。他们总是 使用变量名调用(调用)。
上面的函数以分号结尾,因为它是可执行语句的一部分。
正如您在前面的示例中所看到的,JavaScript 函数已定义 与 function
关键字。
还可以使用名为的内置 JavaScript 函数构造函数来定义函数 函数()
。
const myFunction = new Function("a", "b", "return a * b");
let x = myFunction(4, 3);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>JavaScript has an built-in function constructor.</p>
<p id="demo"></p>
<script>
const myFunction = new Function("a", "b", "return a * b");
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
您实际上不必使用函数构造函数。上面的例子和下面的写法是一样的:
const myFunction = function (a, b) {return a * b};
let x = myFunction(4, 3);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p id="demo"></p>
<script>
const myFunction = function (a, b) {return a * b}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
大多数时候,您可以避免在 JavaScript 中使用 new
关键字。
在本教程的前面部分,您了解了“提升”(JavaScript 提升)。
提升是 JavaScript 的默认行为,即将声明移动到顶部 当前范围。
提升适用于变量声明和函数声明。
因此,JavaScript 函数可以在声明之前调用:
myFunction(5);
function myFunction(y) {
return y * y;
}
使用表达式定义的函数不会被提升。
函数表达式可以成为“自调用”。
自调用表达式会自动调用(启动),无需被调用。
如果后面跟着表达式,函数表达式将自动执行 经过 ()。
您不能自调用函数声明。
你必须添加 函数两边的括号表明它是一个函数表达式:
(function () {
let x = "Hello!!"; // I will invoke myself
})();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<p>Functions can be invoked automatically without being called:</p>
<p id="demo"></p>
<script>
(function () {
document.getElementById("demo").innerHTML = "Hello! I called myself";
})();
</script>
</body>
</html>
上面的函数实际上是一个匿名自调用函数(函数 没有名字)。
JavaScript 函数可以用作值:
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Functions can be treated as values:</p>
<p>x = myFunction(4,3) or x = 12</p>
<p>In both cases, x becomes a number with the value of 12.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JavaScript 函数可以在表达式中使用:
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Functions can be used in expressions.</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
let x = myFunction(4, 3) * 2;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JavaScript 中的 typeof
运算符返回“function” 功能。
但是,JavaScript 函数最好被描述为对象。
JavaScript 函数同时具有属性 和 方法。
arguments.length
属性返回接收到的参数数量 该函数被调用:
function myFunction(a, b) {
return arguments.length;
}
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<p>The arguments.length property returns the number of arguments received by the function:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
toString()
方法以字符串形式返回函数:
function myFunction(a, b) {
return a * b;
}
let text = myFunction.toString();
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>The toString() Method</h2>
<p>The toString() method returns the function as a string:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>
</body>
</html>
定义为对象属性的函数称为该对象的方法。
旨在创建新对象的函数称为对象构造函数。
箭头函数允许使用简短的语法来编写函数表达式。
您不需要 function
关键字、return
关键字和 大括号。
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Functions</h2>
<p>With arrow functions, you don't have to type the function keyword, the return keyword, and the curly brackets.</p>
<p>Arrow functions are not supported in IE11 or earlier.</p>
<p id="demo"></p>
<script>
const x = (x, y) => x * y;
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
箭头函数没有自己的 this
。 它们不太适合定义对象方法。
箭头函数不会被提升。它们必须在使用之前定义。
使用 const
比使用 var
更安全,因为函数表达式是 始终为恒定值。
如果函数是单个语句,则只能省略 return
关键字和大括号。 正因为如此,始终保留它们可能是一个好习惯:
const x = (x, y) => { return x * y };
自己尝试一下 →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrow Functions</h2>
<p>Arrow functions are not supported in IE11 or earlier.</p>
<p id="demo"></p>
<script>
const x = (x, y) => { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>
</body>
</html>
IE11 或更早版本不支持箭头函数。