手册

目录

函数

收藏286

阅读599

更新时间2025-08-07

实例

function myFunction(p1, p2) {
    return p1 * p2;              // 该函数返回 p1 和 p2 的乘积
}
运行实例 »

点击 "运行实例" 按钮查看在线实例

JavaScript 函数语法

JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 ()。

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

圆括号可包括由逗号分隔的参数:

(参数 1, 参数 2, ...)

由函数执行的代码被放置在花括号中:{}

function name(参数 1, 参数 2, 参数 3) {
    要执行的代码
}

函数参数(Function parameters)是在函数定义中所列的名称。

函数参数(Function arguments)是当调用函数时由函数接收的真实的

在函数中,参数是局部变量。

在其他编程语言中,函数近似程序(Procedure)或子程序(Subroutine)。

函数调用

函数中的代码将在其他代码调用该函数时执行:

  • 当事件发生时(当用户点击按钮时)
  • 当 JavaScript 代码调用时
  • 自动的(自调用)

您将在本教程中学到更多有关函数调用的知识。

函数返回

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

如果函数被某条语句调用,JavaScript 将在调用语句之后“返回”执行代码。

函数通常会计算出返回值。这个返回值会返回给调用者:

实例

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

var x = myFunction(7, 8);        // 调用函数,返回值被赋值给 x

function myFunction(a, b) {
    return a * b;                // 函数返回 a 和 b 的乘积
}

x 的结果将是:

56
运行实例 »

点击 "运行实例" 按钮查看在线实例

为何使用函数?

您能够对代码进行复用:只要定义一次代码,就可以多次使用它。

您能够多次向同一函数传递不同的参数,以产生不同的结果。

实例

把华氏度转换为摄氏度:

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

document.getElementById("demo").innerHTML = toCelsius(77);
运行实例 »

点击 "运行实例" 按钮查看在线实例

() 运算符调用函数

使用上面的例子,toCelsius 引用的是函数对象,而 toCelsius() 引用的是函数结果。

实例

访问没有 () 的函数将返回函数定义:

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

document.getElementById("demo").innerHTML = toCelsius;
运行实例 »

点击 "运行实例" 按钮查看在线实例

用作变量值的函数

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

实例

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

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

您能够把函数当做变量值直接使用:

var text = "The temperature is " + toCelsius(77) + " Celsius";
运行实例 »

点击 "运行实例" 按钮查看在线实例

您将在本教程中学到更多有关函数的知识。

局部变量

在 JavaScript 函数中声明的变量,会成为函数的局部变量

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

实例

// 此处的代码不能使用 carName

function myFunction() {
    var carName = "Volvo";
    // 此处的代码可以使用 carName
}

// 此处的代码不能使用 carName
运行实例 »

点击 "运行实例" 按钮查看在线实例

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

局部变量在函数开始时创建,在函数完成时被删除。

课外书

如需更多有关 JavaScript 函数的知识,请阅读 JavaScript 高级教程中的相关内容:

ECMAScript 函数概述
本节讲解函数的概念,ECMAScript 如何声明并调用函数,以及函数如何返回值。
ECMAScript arguments 对象
本节介绍了此对象的基本用法,然后讲解了如何使用 length 属性来测定函数的参数数目,以及模拟函数重载。
ECMAScript Function 对象(类)
本节讲解了如何使用 Function 类创建函数,然后介绍了 Function 对象的属性和方法。
ECMAScript 闭包(closure)
本节讲解了闭包(closure)的概念,并分别为您展示了简单和稍复杂的两个闭包实例。

相关

视频

RELATED VIDEOS

更多

免费

Web前端开发极速入门
初级 Web前端开发极速入门

219920次学习

收藏

免费

前端入门_HTML5
初级 前端入门_HTML5

616946次学习

收藏

免费

30分钟学会网站布局
初级 30分钟学会网站布局

238440次学习

收藏

免费

CSS视频教程-玉女心经版
初级 CSS视频教程-玉女心经版

393054次学习

收藏

免费

独孤九贱(1)_HTML5视频教程

免费

独孤九贱(6)_jQuery视频教程

免费

独孤九贱(7)_Bootstrap视频教程

免费

独孤九贱(2)_CSS视频教程
初级 独孤九贱(2)_CSS视频教程

229605次学习

收藏

科技资讯

更多

精选课程

更多
前端入门_HTML5
前端入门_HTML5

共29课时

61.7万人学习

CSS视频教程-玉女心经版
CSS视频教程-玉女心经版

共25课时

39.3万人学习

JavaScript极速入门_玉女心经系列
JavaScript极速入门_玉女心经系列

共43课时

70.9万人学习

独孤九贱(1)_HTML5视频教程
独孤九贱(1)_HTML5视频教程

共25课时

61.6万人学习

独孤九贱(2)_CSS视频教程
独孤九贱(2)_CSS视频教程

共22课时

23万人学习

独孤九贱(3)_JavaScript视频教程
独孤九贱(3)_JavaScript视频教程

共28课时

33.9万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时

125万人学习

关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号