最适合网络开发者的网站

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 随机 JS 布尔值 JS 比较 JS 如果否则 JS 开关 JS 循环 JS 循环 JS 循环 JS 循环 JS 中断 JS 可迭代对象 JS 集 JS 地图 JS Typeof JS 类型转换 JS 按位 JS 正则表达式 JS 错误 JS 作用域 JS 提升 JS 严格模式 JS this 关键字 JS 箭头函数 JS 类 JS 模块 JS JSON JS 调试 JS 风格指南 JS 最佳实践 JS 错误 JS 性能 JS 保留字

JS 版本

JS 版本 JS 2009(ES5) JS 2015(ES6) 小学 2016 小学 2017 小学 2018 JS IE/Edge JS 历史

JS 对象

对象定义 对象属性 对象方法 对象显示 对象访问器 对象构造函数 对象原型 对象可迭代对象 对象集 对象映射 对象引用

JS 函数

函数定义 函数参数 函数调用 函数调用 功能应用 函数绑定 函数闭包

JS 类

课程简介 类继承 静态类

JS 异步

JS 回调 JS 异步 JS 承诺 JS 异步/等待

JS HTML DOM

DOM 简介 DOM 方法 DOM 文档 DOM 元素 DOM HTML DOM 表单 DOM CSS DOM 动画 DOM 事件 DOM 事件监听器 DOM 导航 DOM 节点 DOM 集合 DOM 节点列表

JS 浏览器 BOM

JS 窗口 JS 屏幕 JS 位置 JS 历史 JS 导航器 JS 弹出警告 JS 时机 JS Cookies

JS Web API

Web API 简介 Web 表单 API 网络历史记录 API Web 存储 API Web Worker API Web 获取 API 网络地理定位 API

JS AJAX

AJAX 简介 AJAX XMLHttp AJAX 请求 AJAX 响应 AJAX XML 文件 AJAX PHP AJAX ASP AJAX 数据库 AJAX 应用程序 AJAX 示例

JS JSON

JSON 简介 JSON 语法 JSON 与 XML JSON 数据类型 JSON 解析 JSON 字符串化 JSON 对象 JSON 数组 JSON 服务器 JSON 格式的 PHP JSON 的 HTML JSON JSONP

JS 与 jQuery

jQuery 选择器 jQuery HTML jQuery CSS jQuery DOM

JS 图形

JS 图形 JS 画布 JS Plotly JS Chart.js JS 谷歌图表 JS D3.js

JS 示例

JS 示例 JS HTML DOM JS HTML 输入 JS HTML 对象 JS HTML 事件 JS 浏览器 JS 编辑器 JS 练习 JS 测验 JS 证书

JS 参考

JavaScript 对象 HTML DOM 对象

JavaScript。W3Schools 英文版。初学者课程

尿素

JavaScript 函数定义


JavaScript functions are defined with the function keyword.

You can use a function declaration or a function expression.


Function Declarations

Earlier in this tutorial, you learned that functions are declared with the following syntax:

function functionName(parameters) {
  // code to be executed
}

Declared functions are not executed immediately. They are "saved for later use", and will be executed later, when they are invoked (called upon).

例子

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

Semicolons are used to separate executable JavaScript statements.
Since a function declaration is not an executable statement, it is not common to end it with a semicolon.


Function Expressions

A JavaScript function can also be defined using an expression.

A function expression can be stored in a variable:

例子

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

After a function expression has been stored in a variable, the variable can be used as a function:

例子

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

The function above is actually an anonymous function (a function without a name).

Functions stored in variables do not need function names. They are always invoked (called) using the variable name.

The function above ends with a semicolon because it is a part of an executable statement.


The Function() Constructor

As you have seen in the previous examples, JavaScript functions are defined with the function keyword.

Functions can also be defined with a built-in JavaScript function constructor called Function().

例子

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

let x = myFunction(4, 3);
亲自尝试 »

You actually don't have to use the function constructor. The example above is the same as writing:

例子

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

let x = myFunction(4, 3);
亲自尝试 »

Most of the time, you can avoid using the new keyword in JavaScript.


Function Hoisting

Earlier in this tutorial, you learned about "hoisting" (JavaScript Hoisting).

Hoisting is JavaScript's default behavior of moving declarations to the top of the current scope.

Hoisting applies to variable declarations and to function declarations.

Because of this, JavaScript functions can be called before they are declared:

myFunction(5);

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

Functions defined using an expression are not hoisted.


Self-Invoking Functions

Function expressions can be made "self-invoking".

A self-invoking expression is invoked (started) automatically, without being called.

Function expressions will execute automatically if the expression is followed by ().

You cannot self-invoke a function declaration.

You have to add parentheses around the function to indicate that it is a function expression:

例子

(function () {
  let x = "Hello!!";  // I will invoke myself
})();
亲自尝试 »

The function above is actually an anonymous self-invoking function (function without name).


Functions Can Be Used as Values

JavaScript functions can be used as values:

例子

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

let x = myFunction(4, 3);
亲自尝试 »

JavaScript functions can be used in expressions:

例子

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

let x = myFunction(4, 3) * 2;
亲自尝试 »

Functions are Objects

typeof operator in JavaScript returns "function" for functions.

But, JavaScript functions can best be described as objects.

JavaScript functions have both properties and methods.

arguments.length property returns the number of arguments received when the function was invoked:

例子

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

toString() method returns the function as a string:

例子

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

let text = myFunction.toString();
亲自尝试 »

A function defined as the property of an object, is called a method to the object.
A function designed to create new objects, is called an object constructor.


Arrow Functions

Arrow functions allows a short syntax for writing function expressions.

You don't need the function keyword, the return keyword, and the curly brackets.

例子

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

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

Arrow functions do not have their own this. They are not well suited for defining object methods.

Arrow functions are not hoisted. They must be defined before they are used.

Using const is safer than using var, because a function expression is always constant value.

You can only omit the return keyword and the curly brackets if the function is a single statement. Because of this, it might be a good habit to always keep them:

例子

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

Arrow functions are not supported in IE11 or earlier.