Arrow function箭头函数 =>
Arrow functions were introduced in ES6.
在ES6中引入了箭头函数。
Arrow functions allow us to write shorter function syntax:
箭头函数允许我们写更短的函数语法:
Before:
hello = function() {
return "Hello World!";
}
With Arrow Function:
hello = () => {
return "Hello World!";
}
It gets shorter!
它变得更短了!
If the function has only one statement, and the statement returns a value, you can remove the brackets and the return keyword:
如果函数只有一个语句，而语句返回一个值，你可以删除括号和return关键字:
Arrow Functions Return Value by Default（箭头函数默认返回值）:
hello = () => "Hello World!";
Note: This works only if the function has only one statement.
注意:这只在函数只有一条语句时才有效。
If you have parameters, you pass them inside the parentheses:
如果你有参数，你把它们传递到括号里:
Arrow Function With Parameters（带参数的箭头函数:）:
hello = (val) => "Hello " + val;
In fact, if you have only one parameter, you can skip the parentheses as well:
事实上，如果你只有一个参数，你也可以跳过括号:
Arrow Function Without Parentheses（没有括号的箭头函数:）:
hello = val => "Hello " + val;
What About this?
The handling of this is also different in arrow functions compared to regular functions.
与常规函数相比，箭头函数的处理方式也有所不同。
In short, with arrow functions there are no binding of this.
简而言之，使用箭头函数就不需要绑定它。
In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button or whatever.
在常规函数中，this关键字表示调用该函数的对象，可以是窗口、文档、按钮等。
With arrow functions the this keyword always represents the object that defined the arrow function.
对于arrow函数，这个关键字总是表示定义arrow函数的对象。
Let us take a look at two examples to understand the difference.
让我们看两个例子来理解它们之间的区别。
Both examples call a method twice, first when the page loads, and once again when the user clicks a button.
这两个示例都调用了一个方法两次，第一次是在页面加载时，第二次是在用户单击按钮时。
The first example uses a regular function, and the second example uses an arrow function.
第一个示例使用常规函数，第二个示例使用箭头函数。
The result shows that the first example returns two different objects (window and button), and the second example returns the window object twice, because the window object is the "owner" of the function.
结果显示，第一个示例返回两个不同的对象(窗口和按钮)，第二个示例两次返回窗口对象，因为窗口对象是函数的“所有者”。
Example1
With a regular function this represents the object that calls the function:
对于常规函数，它表示调用该函数的对象:
//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);
Remember these differences when you are working with functions. Sometimes the behavior of regular functions is what you want, if not, use arrow functions.
Example2
With an arrow function this represents the owner of the function:
用一个箭头函数表示函数的所有者:
//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);
Browser Support（浏览器支持）
The following table defines the first browser versions with full support for Arrow Functions in JavaScript:
下表定义了第一个完全支持JavaScript中箭头函数的浏览器版本:
