【ES6】箭頭函式用法與深入理解
摘要：
語法
ES6 允許使用“箭頭”（=
>）定義函式，可以簡單的認為箭頭的左邊是函式的引數，箭頭的右邊是函式的宣告（函式體）。
具有一個引數的簡單函式
// 當只有一個引數時，圓括號是可選的：
// (單一引數) =&...
語法
ES6 允許使用“箭頭”（=
>）定義函式，可以簡單的認為箭頭的左邊是函式的引數，箭頭的右邊是函式的宣告（函式體）。
- 具有一個引數的簡單函式
// 當只有一個引數時，圓括號是可選的：
// (單一引數) => {函式宣告}
// 單一引數 => {函式宣告}
var f = v => v;
// 等同於
var f = function (v) {
return v;
};
-
如果箭頭函式不需要引數或需要多個引數，就使用一個圓括號
()代表引數部分，多個引數之間用逗號間隔。
// 沒有引數的函式應該寫成一對圓括號。
// () => {函式宣告}
var f = () => 5;
// 等同於
var f = function () { return 5 };
// (引數1, 引數2, …, 引數N) => { 函式宣告 }
// (引數1, 引數2, …, 引數N) => 表示式（單一）
// 相當於：(引數1, 引數2, …, 引數N) =>{ return 表示式; }
var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2) {
return num1 + num2;
};
-
箭頭函式的程式碼塊部分多於一條語句，就要使用大括號
{}將它們括起來，並且使用return語句返回。
var add = (a, b) => {
if (typeof a == 'number' && typeof b == 'number') {
return a + b
} else {
return 0
}
}
-
如果箭頭函式直接返回一個物件
，必須在物件外面加上括號
()，否則會報錯。
// 返回物件字面表示式時需給函式體加括號()，否則會報錯
// 引數=> ({foo: bar})
// 報錯
let getTempItem = id => { id: id, name: "Temp" };
// 不報錯
let getTempItem = id => ({ id: id, name: "Temp" });
- 箭頭函式支援引數列表解構。
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();// 6
-
支援
rest引數和預設引數。
// (引數1, 引數2, ...rest) => {函式宣告}
// (引數1 = 預設值1,引數2, …, 引數N = 預設值N) => {函式宣告}
const numbers = (...nums) => nums;
numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]
let f = (x, y = 1) => x+y;
f(1); // 2
關於rest
引數和預設引數，可參考《ofollow,noindex">【ES6】函式預設引數與rest引數
》
注意點
-
typeof運算子和普通的function一樣。
var f = a => a; console.log(typeof f); // "function"
-
是
Function的例項，instanceof也返回true。
var f = a => a; console.log(f instanceof Function); // true
-
箭頭函式不會建立自己的
this,它只會從自己的作用域鏈的上一層繼承this，而且在箭頭函式中，this的指向是固定的，不能改變。
// 在箭頭函式中，`this`屬於詞法作用域，直接由上下文確定。
//ES5普通函式
function Man(){
this.age=22;
return function(){
this.age+1;
}
}
var cala=new Man();
console.log(cala())//undefined
//ES6箭頭函式
function Man(){
this.age=22;
return () => this.age+1;
}
var cala=new Man();
console.log(cala())//23
-
不存在
arguments物件。如果要用，可以用rest引數代替。
//沒有arguments
var foo = (a,b) => {return arguments[0]*arguments[1]}
console.log(foo(3,5))
//arguments is not defined
-
不可以當作建構函式，也就是說，不可以使用
new命令，否則會丟擲一個錯誤。
//不能使用new 關鍵字
var Obj = () => {"hello world"};
var o = new Obj();
// TypeError: Obj is not a constructor
- 箭頭函式沒有原型。
//沒有原型
var Obj = () => {};
console.log(Obj.prototype);
// undefined
-
不可以使用
yield命令，因此箭頭函式不能用作Generator函式。 - 箭頭函式在引數和箭頭之間不能換行 。
var func = () => 1; // SyntaxError: expected expression, got '=>'
- 箭頭函式具有與常規函式不同的特殊運算子優先順序解析規則。
let callback;
callback = callback || function() {}; // ok
callback = callback || () => {};
// SyntaxError: invalid arrow-function arguments
callback = callback || (() => {});// ok
參考文章
- ECMAScript 6 入門 - 函式的擴充套件
- JavaScript/">JavaScript/Reference/Functions/Arrow_functions" target="_blank" rel="nofollow,noindex">箭頭函式 - JavaScript | MDN