导航
×
   ❮   
HTML CSS JavaScript PHP Go Sass W3C Colors ECMS

JS 教程

JS 简介 JS 如何使用 JS 输出 JS 语法 JS 语句 JS 注释 JS 变量 JS 运算符 JS 条件语句 JS 循环 JS 字符串 JS 数字 JS 函数 JS 对象 JS 日期 JS 数组 JS 类型化数组 JS 集合 JS Map 映射 JS Math JS 正则表达式 JS 数据类型 JS 错误 JS 事件 JS 编程 JS 关键字参考 JS 保留关键字参考 JS 运算符参考 JS 运算符优先级 JS UTF-8 字符 JS UTF-8 符号 JS UTF-8 表情符号 JS 版本

JS 高级教程

JS 对象 JS 函数 JS 类 JS 迭代 JS Promises JS 模块

JavaScript 函数定义


JavaScript 函数使用关键字 function 定义。

函数可以通过声明定义,也可以是一个表达式


Function 声明

在本教程的前面部分,您了解到函数是用以下语法声明的:

function functionName(parameters) {
  // 要执行的代码
}

声明的函数不会立即执行。它们被 "保存以备将来使用" ,并将在稍后调用(调用)时执行。

实例

function myFunction(a, b) {
  return a * b;
}
亲自试一试 »

分号是用来分隔可执行 JavaScript 语句。
由于函数声明不是一个可执行语句,所以不以分号结束。


函数表达式

JavaScript 函数可以通过一个表达式定义。

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

实例

var x = function (a, b) {return a * b};
亲自试一试 »

在函数表达式存储在变量后,变量也可作为一个函数使用:

实例

var x = function (a, b) {return a * b};
var z = x(4, 3);
亲自试一试 »

以上函数实际上是一个 匿名函数 (函数没有名称)。

函数存储在变量中,不需要函数名称,通常通过变量名来调用。

上述函数以分号结尾,因为它是一个执行语句。


Function() 构造函数

在以上实例中,我们了解到函数通过关键字 function 定义。

函数同样可以通过内置的 JavaScript 函数构造器(Function())定义。

实例

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);
亲自试一试 »

实际上,你不必使用构造函数。上面实例可以写成:

实例

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

var x = myFunction(4, 3);
亲自试一试 »

在 JavaScript 中,很多时候,你需要避免使用 new 关键字。


函数提升(Hoisting)

在之前的教程中我们已经了解了 "JavaScript Hoisting (提升)"。

提升(Hoisting)是 JavaScript 默认将当前作用域提升到前面去的的行为。

提升(Hoisting)应用在变量的声明与函数的声明。

因此,函数可以在声明之前调用:

myFunction(5);

function myFunction(y) {
  return y * y;
}

使用表达式定义函数时无法提升。


自调用函数

函数表达式可以 "自调用"。

自调用表达式会自动调用。

如果表达式后面紧跟 () ,则会自动调用。

不能自调用声明的函数。

通过添加括号,来说明它是一个函数表达式:

实例

(function () {
  var x = "Hello!!";  // 我会调用自己
})();
亲自试一试 »

以上函数实际上是一个 匿名自我调用的函数 (没有函数名)。


函数可作为一个值使用

JavaScript 函数作为一个值使用:

实例

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

var x = myFunction(4, 3);
亲自试一试 »

JavaScript 函数可作为表达式使用:

实例

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

var x = myFunction(4, 3) * 2;
亲自试一试 »

函数是对象

在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。

但是JavaScript 函数描述为一个对象更加准确。

JavaScript 函数有 属性方法

arguments.length 属性返回函数调用过程接收到的参数个数:

实例

function myFunction(a, b) {
  return arguments.length;
}
亲自试一试 »

toString() 方法将函数作为一个字符串返回:

实例

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

var txt = myFunction.toString();
亲自试一试 »

函数定义作为对象的属性,称之为对象方法。
函数如果用于创建新的对象,称之为对象的构造函数。


箭头函数

箭头函数表达式的语法比普通函数表达式更简洁。

您不需要 function 关键字、return 关键字和花括号。

实例

// ES5
var x = function(x, y) {
  return x * y;
}

// ES6
const x = (x, y) => x * y;
亲自试一试 »

有的箭头函数都没有自己的 this。不适合定义一个 对象的方法

当我们使用箭头函数的时候,箭头函数会默认帮我们绑定外层 this 的值,所以在箭头函数中 this 的值和外层的 this 是一样的。

箭头函数是不能提升的,所以需要在使用之前定义。

使用 const 比使用 var 更安全,因为函数表达式始终是一个常量。

如果函数部分只是一个语句,则可以省略 return 关键字和大括号 {},这样做是一个比较好的习惯:

实例

const x = (x, y) => { return x * y };
亲自试一试 »

注意: IE11 及更早 IE 版本不支持箭头函数。


Copyright ©2020-2026 freew3c.com All Rights Reserved 提供的内容仅用于学习和测试,不保证内容的正确性。