小码哥的IT人生

JavaScript function 语句

JavaScript基础 2022-06-08 11:18:07小码哥的IT人生shichen

JavaScript function 语句

实例

声明一个函数并在调用该函数时在 id="demo" 的元素中输出 "Hello World":

function myFunction() { // 声明函数
  document.getElementById("demo").innerHTML = "Hello World!";
}
myFunction(); // 调用函数

完整实例:

<!DOCTYPE html>
<html>
<body>
<p>本例调用一个函数,该函数在 id="demo" 的 p 元素中输出 "Hello World"。</p>
<p id="demo"></p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World!";
}
myFunction();
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

页面下方有更多 TIY 实例。

定义和用法

function 语句声明函数。

声明的函数是“被保存供以后使用的”,并且将在稍后调用时执行。

在 JavaScript 中,函数是对象,它们同时拥有属性和方法。

也可以使用表达式定义函数(请参阅函数定义)。

请阅读我们的 JavaScript 教程,了解您需要学习的有关函数的所有知识。请从关于 JavaScript 函数和 JavaScript 作用域的章节开始。如需更多详细信息,请阅读我们关于函数定义、参数、调用和闭包的教程。

提示:请使用 return 语句从函数返回值。

浏览器支持

语句 Chrome IE Firefox Safari Opera
function 支持 支持 支持 支持 支持

语法

function functionName(parameters) {
  code to be executed
}

参数值

参数 描述
functionName 必需。规定函数的名称,可以“保存以备后用”。函数名可以包含字母、数字、下划线和美元符号(规则与变量相同)。
parameters

可选。指定一组零个或多个参数名称,以逗号分隔。

函数参数是函数定义中列出的名称。

函数参数是函数在调用时收到的实际值。在函数内部,参数用作局部变量。

注释:如果调用函数时缺少参数,则缺少参数的值将设置为 undefined。

技术细节

JavaScript 版本: ECMAScript 1

更多实例

示例代码:

返回 PI 的值:

function myFunction() {
  return Math.PI;
}

完整实例:

<!DOCTYPE html>
<html>
<body>
<p>本例调用一个返回 PI 值的函数:</p>
<p id="demo"></p>
<script>
function myFunction() {
  return Math.PI;
}
document.getElementById("demo").innerHTML = myFunction();
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

返回 a 和 b 的乘积:

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

完整实例:

<!DOCTYPE html>
<html>
<body>
<p>本例调用一个执行计算的函数,并返回结果:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

通过使用函数,您可以多次使用有不同参数的相同代码,以产生不同的结果。

将华氏度转换为摄氏度:

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

完整实例:

<!DOCTYPE html>
<html>
<body>
<p>本例调用函数将华氏温度转换为摄氏温度:</p>
<p id="demo"></p>
<script>
function toCelcius(f) {
  return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelcius(32);
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

函数可用作变量。

代替:

temp = toCelsius(32);
text = "The temperature is " + temp + " Centigrade";
You can use:
text = "The temperature is " + toCelsius(32) + " Centigrade";

完整实例:

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"The temperature is " + toCelsius(32) + " Centigrade";
function toCelsius(fahrenheit) {
  return (5/9) * (fahrenheit-32);
} 
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

JavaScript 函数有一个称为 arguments 对象的内置对象。

arguments.length 属性返回调用函数时收到的参数数量:

function myFunction(a, b) {
  return arguments.length;
}

完整实例:

<!DOCTYPE html>
<html>
<body>
<p>arguments.length 属性返回函数接收到的参数数量:</p>
<p id="demo"></p>
<script>
function myFunction(a, b) {
  return arguments.length;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

单击按钮调用函数,该函数将在 id="demo" 的元素中输出 "Hello World":

<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>

完整实例:

<!DOCTYPE html>
<html>
<body>
<p>单击按钮触发一个函数,该函数将在 id="demo" 的 p 元素中输出 "Hello World"。</p>
<button onclick="myFunction()">点击我</button>
<p id="demo"></p>
<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

JavaScript 函数也可使用表达式来定义。

函数表达式可以存储在变量中:

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

完整实例:

<!DOCTYPE html>
<html>
<body>
<p>函数可以存储在变量中:</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

示例代码:

将函数表达式存储在变量中后,该变量可以用作函数:

var x = function (a, b) {return a * b};
var z = x(4, 3);

完整实例:

<!DOCTYPE html>
<html>
<body>
<p>把函数存储在变量中后,该变量可用作函数:</p>
<p id="demo"></p>
<script>
var x = function (a, b) {return a * b};
document.getElementById("demo").innerHTML = x(4, 3);
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果:http://www.phpcodeweb.com/runjs.html

相关页面

JavaScript 教程:JavaScript 函数

JavaScript 教程:JavaScript 作用域

JavaScript 教程:JavaScript 函数定义

JavaScript 教程:JavaScript 函数参数

JavaScript 教程:JavaScript 函数调用

JavaScript 教程:JavaScript 函数闭包

JavaScript 参考手册:JavaScript return 语句

版权所有 © 小码哥的IT人生
Copyright © phpcodeweb All Rights Reserved
ICP备案号:苏ICP备17019232号-2  

苏公网安备 32030202000762号

© 2021-2024