JavaScript 函数定义


目录

    显示目录


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>


上面的函数实际上是一个匿名函数(没有 姓名)。

存储在变量中的函数不需要函数名称。他们总是 使用变量名调用(调用)。

上面的函数以分号结尾,因为它是可执行语句的一部分。



Function() 构造函数

正如您在前面的示例中所看到的,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) =&gt; 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) =&gt; { return x * y };
document.getElementById("demo").innerHTML = x(5, 5);
</script>

</body>
</html>

IE11 或更早版本不支持箭头函数。