JavaScript 函数


目录

    显示目录

JavaScript 函数是设计用于执行某项操作的代码块 特定任务。

JavaScript 函数在以下情况下执行 “某物”调用它(调用它)。

例子

//  Function to compute the product of p1 and p2
function myFunction(p1, p2) {
    return p1 * p2;
}

自己尝试一下 →

<!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>
function myFunction(p1, p2) {
  return p1 * p2;
}

let result = myFunction(4, 3);
document.getElementById("demo").innerHTML = result;
</script>

</body>
</html>

JavaScript 函数语法

JavaScript 函数是使用 function 关键字定义的, 后跟名称,再后跟括号()

函数名称可以包含字母、数字、下划线和美元符号 (与变量的规则相同)。

括号中可以包含用逗号分隔的参数名称:
参数1,参数2,...

函数要执行的代码放在大括号内:{}

function
name(parameter1, parameter2, parameter3) {
    // code to be executed
}

函数参数列在括号()内 函数定义。

函数参数 调用函数时由该函数接收。

在函数内部,参数(参数)表现为局部变量。


函数调用

当“某物”调用(调用)时,函数内的代码将执行 功能:

  • 当事件发生时(当用户单击按钮时)

  • 当它被 JavaScript 代码调用(调用)时

  • 自动(自调用)

稍后您将了解有关函数调用的更多信息 教程。



函数返回

当 JavaScript 到达 return 语句时, 该函数将停止执行。

如果函数是从语句调用的,JavaScript 将 “return”执行调用语句之后的代码。

函数通常会计算返回值。返回值为 “返回”回到 呼叫者,召集者”:

例子

计算两个数字的乘积,并返回结果:

// Function is called, the return value will end up in x
let x = myFunction(4, 3);

function myFunction(a, b) {
// Function returns the product of a and 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>

为什么是函数?

通过函数,您可以重用代码

您可以编写可以多次使用的代码。

您可以使用具有不同参数的相同代码来产生不同的结果。


运营商

() 运算符调用(calls)该函数:

例子

将华氏度转换为摄氏度:

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius(77);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Invoke (call) a function that converts from Fahrenheit to Celsius:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius(77);
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

访问参数不正确的函数可能会返回错误的答案:

例子

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius();

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Invoke (call) a function to convert from Fahrenheit to Celsius:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius();
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

访问不带() 的函数会返回函数而不是函数结果:

例子

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
}

let value = toCelsius;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>Accessing a function without () returns the function and not the function result:</p>
<p id="demo"></p>

<script>
function toCelsius(f) {
  return (5/9) * (f-32);
}

let value = toCelsius;
document.getElementById("demo").innerHTML = value;
</script>

</body>
</html>

笔记

从上面的示例中可以看出,toCelsius 指的是函数对象,并且 toCelsius() 指的是函数结果。


用作变量值的函数

在所有类型的公式、赋值和变量中,函数的使用方式与使用变量的方式相同 计算。

例子

不使用变量来存储函数的返回值:

let x = toCelsius(77);
let text = "The temperature is " + x + " Celsius";

您可以直接使用该函数作为变量值:

let text = "The temperature is " + toCelsius(77) + " Celsius";

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<p>Using a function as a variable:</p>

<p id="demo"></p>

<script>
let text = "The temperature is " + toCelsius(77) + " Celsius.";
document.getElementById("demo").innerHTML = text;

function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
} 
</script>

</body>
</html>


您将在本教程的后面部分了解有关函数的更多信息。


局部变量

在 JavaScript 函数中声明的变量,变为 本地至 功能。

局部变量只能被访问 从函数内部。

例子

// code here can NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>

<p>Outside myFunction() carName is undefined.</p>

<p id="demo1"></p>
<p id="demo2"></p>

<script>
let text = "Outside: " + typeof carName;
document.getElementById("demo1").innerHTML = text;

function myFunction() {
  let carName = "Volvo";
  let text = "Inside: " + typeof carName + " " + carName; 
  document.getElementById("demo2").innerHTML = text;
}

myFunction();
</script>

</body>
</html>

由于局部变量仅在其函数内部被识别,因此具有相同名称的变量可以在不同的函数中使用。

局部变量在函数启动时创建,并在函数完成时删除。