JavaScript 箭头函数


目录

    显示目录

ES6 中引入了箭头函数。

箭头函数允许我们编写更短的函数语法:

let myFunction = (a, b) => a * b;

自己尝试一下→

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>

<p>This example shows the syntax of an Arrow Function, and how to use it.</p>

<p id="demo"></p>

<script>
let myFunction = (a, b) => a * b;
document.getElementById("demo").innerHTML = myFunction(4, 5);
</script>

</body>
</html>

箭头之前:

hello = function() {
  return "Hello World!";
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>

<p>This example shows the syntax of a function, without the use of arrow function syntax.</p>

<p id="demo"></p>

<script>
let hello = "";

hello = function() {
  return "Hello World!";
}

document.getElementById("demo").innerHTML = hello();
</script>

</body>
</html>

带箭头功能:

hello = () => {
  return "Hello World!";
}

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>

<p>This example shows the syntax of an Arrow Function, and how to use it.</p>

<p id="demo"></p>

<script>
let hello = "";

hello = () => {
  return "Hello World!";
}

document.getElementById("demo").innerHTML = hello();
</script>

</body>
</html>

越来越短了!如果函数只有一条语句,并且该语句 返回一个值,你可以去掉括号 返回关键字:

箭头函数默认返回值:

hello = () => "Hello World!";

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>

<p>This example shows an Arrow Function without the brackets or the return keyword.</p>

<p id="demo"></p>

<script>
let hello = "";

hello = () => "Hello World!";

document.getElementById("demo").innerHTML = hello();
</script>

</body>
</html>

注意:仅当函数只有一个时才有效 陈述。

如果有参数,则将它们传递到括号内:

带参数的箭头函数:

hello = (val) => "Hello " + val;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>

<p>This example shows an Arrow Function with a parameter.</p>

<p id="demo"></p>

<script>
let hello = "";

hello = (val) => "Hello " + val;

document.getElementById("demo").innerHTML = hello("Universe!");
</script>

</body>
</html>

事实上,如果只有一个参数,也可以跳过括号:

不带括号的箭头函数:

hello = val => "Hello " + val;

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>

<p>This example shows that if you have only one parameter in an Arrow Function, you can skip the parentheses.</p>

<p id="demo"></p>

<script>
let hello = "";

hello = val => "Hello " + val;

document.getElementById("demo").innerHTML = hello("Universe!");
</script>

</body>
</html>


这个怎么样?

与常规函数相比,箭头函数中 this 的处理也有所不同 功能。

简而言之,对于箭头函数,没有绑定 这个

在常规函数中, this 关键字表示调用 函数,可以是窗口、文档、按钮或其他任何东西。

对于箭头函数,this 关键字always 代表 反对 定义了箭头函数。

让我们看两个例子来理解其中的区别。

这两个示例都调用一个方法两次,第一次是在页面加载时,第二次是 当用户单击按钮时。

第一个示例使用常规函数,第二个示例使用 箭头函数。

结果显示第一个示例返回两个不同的对象(窗口和按钮), 和 第二个示例返回窗口对象两次,因为窗口对象是 函数的“所有者”。

例子

对于常规函数 this 表示 调用函数的对象:

 // Regular Function:
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);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript "this"</h1>

<p>This example demonstrate that in a regular function, the "this" keyword represents different objects depending on how the function was called.</p>

<p>Click the button to execute the "hello" function again, and you will see that this time "this" represents the button object.</p>

<button id="btn">Click Me!</button>

<p id="demo"></p>

<script>
let 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 表示 函数的所有者

 // Arrow Function:
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);

自己尝试一下 →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript "this"</h1>

<p>This example demonstrate that in Arrow Functions, the "this" keyword represents the object that owns the function, no matter who calls the function.</p>

<p>Click the button to execute the "hello" function again, and you will see that "this" still  represents the window object.</p>

<button id="btn">Click Me!</button>

<p id="demo"></p>

<script>
let 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 Edge 12 Firefox 22 Safari 10 Opera 32
Sep, 2015 Jul, 2015 May, 2013 Sep, 2016 Sep, 2015