轻松上手,快乐学习!

JS 教程

JS 首页JS 教程JS 简介JS 如何使用JS 输出JS 语句JS 语法JS 注释JS 变量JS 运算符JS 算法JS 赋值JS 数据类型JS 函数JS 对象JS 事件JS 字符串JS 字符串方法JS 数值JS 数值方法JS 数组JS 数组方法JS 数组排序JS 数组迭代JS 日期JS 日期格式JS 日期获取方法JS 日期设置方法JS 数学运算JS 随机数JS 布尔运算符JS 比较运算符JS 条件语句JS Switch 语句JS For 循环JS While 循环JS BreakJS 类型转换JS 位运算符JS 正则表达式JS 错误处理JS 作用域JS HoistingJS 严格模式JS this 关键词JS Let 关键词JS Const 关键词JS 箭头函数JS 类JS 调试JS 样式指南JS 最佳实践JS 常见错误JS 性能优化JS 保留关键词JS 版本JS ES5JS ES6JS JSONJS FormsForms APIObject 对象定义Object 对象属性Object 对象方法Object DisplayObject 对象访问器Object 对象构造器Object 对象原型Object ECMAScript 5JS 函数定义JS 函数参数JS 函数调用JS Call 函数JS Apply 函数JS 函数闭包Class 类简介Class 类继承Class StaticJS 回调JS 异步JS PromisesJS Async/AwaitDOM 简介DOM 方法DOM 文档DOM 元素DOM HTMLDOM CSSDOM 动画DOM 事件DOM 事件监听DOM 导航DOM 节点DOM 集合DOM 节点列表JS WindowJS ScreenJS LocationJS HistoryJS NavigatorJS 弹出框JS TimingJS CookiesAJAX 简介AJAX XMLHttpAJAX 请求AJAX 响应AJAX XML 文件AJAX PHPAJAX ASPAJAX 数据库AJAX 应用程序AJAX 实例JSON 简介JSON 语法JSON vs XMLJSON 数据类型JSON 解析JSON 字符串化JSON 对象JSON 数组JSON PHPJSON HTMLJSON JSONPWeb API 简介Web History APIWeb Storage APIWeb Geolocation APIjQuery 选择器jQuery HTMLjQuery CSSjQuery DOMJS 实例JS HTML DOMJS HTML 输入JS HTML 对象JS HTML 事件JS BrowserJS 编辑器JS 练习JS 测验

JS 参考手册

JS 参考手册(类别排序)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 版本不支持箭头函数。