JavaScript 箭头函数

ES6中引入了箭头函数。箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。

箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

不使用箭头函数：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>此示例显示函数的语法，不使用箭头函数语法。</p>
<p id="demo"></p>
<script>
var hello;
hello = function() {
  return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>

运行一下

使用箭头函数：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 箭头函数</h2>
<p>此示例显示如何使用箭头函数。</p>
<p id="demo"></p>
<script>
var hello;
hello = () => {
  return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>

运行一下

代码变短了！如果函数只有一条语句，并且该语句返回一个值，则可以删除方括号和 return 关键字。

箭头函数返回默认值：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 箭头函数</h2>
<p>本示例显示了一个没有括号或返回关键字的箭头函数。</p>
<p id="demo"></p>
<script>
var hello;
hello = () => "Hello World!";
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>

运行一下

注意：只有当函数只有一条语句时，这才有效。

如果有参数，则在括号内传递：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 箭头函数</h2>
<p>这个例子显示了一个带有参数的箭头函数。</p>
<p id="demo"></p>
<script>
var hello;
hello = (val) => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Universe!");
</script>
</body>
</html>

运行一下

实际上，如果只有一个参数，也可以跳过括号：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 箭头函数</h2>
<p>此示例显示，如果在Arrow函数中只有一个参数，则可以跳过括号。</p>
<p id="demo"></p>
<script>
var hello;
hello = val => "Hello " + val;
document.getElementById("demo").innerHTML = hello("Universe!");
</script>
</body>
</html>

运行一下

箭头函数中的 this 如何理解

与常规函数相比，在箭头函数中对这一点的处理也有所不同。

简言之，使用arrow函数时， this 没有与函数绑定。

在常规函数中， this 关键字表示调用函数的对象，可以是窗口、文档、按钮或其他对象。

对于箭头函数， this 关键字始终表示定义箭头函数的对象。

在下面的常规函数例子中，this 代表调用函数的对象：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript "this"</h2>
<p>此示例演示了在常规函数中，“This” 关键字表示不同的对象，具体是取决于函数的如何被调用。</p>
<p>再次点击按钮执行 “hello” 功能，您将看到这次 “this” 是代表按钮对象。</p>
<button id="btn">点击我!</button>
<p id="demo"></p>
<script>
var hello;
hello = function() {
  document.getElementById("demo").innerHTML += this;
}
//The window object calls the function:
window.addEventListener("load", hello);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
</script>
</body>
</html>

运行一下

下面使用箭头函数时， this 表示函数的所有者：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript "this"</h2>
<p>本例演示了在Arrow函数中，无论谁调用该函数，“This” 关键字都只表示拥有该函数的对象。</p>
<p>点击按钮再次执行 “hello” 功能，您将看到 “this” 仍然代表window对象。</p>
<button id="btn">Click Me!</button>
<p id="demo"></p>
<script>
var hello;
hello = () => {
  document.getElementById("demo").innerHTML += this;
}
//The window object calls the function:
window.addEventListener("load", hello);
//A button object calls the function:
document.getElementById("btn").addEventListener("click", hello);
</script>
</body>
</html>

运行一下

注意：使用函数时请记住这些差异。有时正则函数的行为是您想要的，如果不是，请使用箭头函数。

浏览器支持

下表定义了第一个完全支持JavaScript中箭头函数的浏览器版本：

目标
箭头函数	Chrome 45	IE / Edge 12	Firefox 22	Safari 10	Opera 32
	2015 年 9 月	2015 年 6 月	2013 年 3 月	2016 年 9 月	2015 年 9 月

JavaScript 箭头函数

箭头函数中的 this 如何理解

浏览器支持

分类导航