ES6中容許使用箭頭=>來定義箭頭函數,是ES6中較受歡迎也較常使用的新增特性。本文將從箭頭函數的基本語法,與普通函數對比,箭頭函數不適用場景三個方面進行梳理。javascript
// 箭頭函數
let func = (name) => {
// 函數體
return `Hello ${name}`;
};
// 等同於
let func = function (name) {
// 函數體
return `Hello ${name}`;
};
複製代碼
從上面能夠看出,定義箭頭函數語法上要比普通函數簡潔得多。箭頭函數省去了function
關鍵字,採用箭頭=>
來定義函數。函數的參數放在=>
前面的括號中,函數體跟在=>
後的花括號中,箭頭函數在參數和箭頭之間不能換行。java
若是箭頭函數的函數體只有一句代碼,即返回某個變量或者返回一個簡單的JS表達式,能夠省去函數體的大括號{ }。express
let func = val => val;
// 等同於
let func = function (val) { return val };
let sum = (num1, num2) => num1 + num2;
// 等同於
let sum = function(num1, num2) {
return num1 + num2;
};
let mulFunction = (num1, num2 ,num3) => num1 * num2 * num3;
// 等同於
let mulFunction = function(num1, num2 ,num3) {
return num1 * num2 * num3;
}
複製代碼
若是箭頭函數的函數體只有一句代碼且返回一個對象(對象字面量)時,直接寫一個表達式是不行的。app
let func = () => { foo: 1 };
console.log(func()); // 執行後返回undefined
// 若是是這樣還會直接報錯
let func = () => { foo: 1, bar: 2 };
複製代碼
緣由是花括號被解釋爲函數體的大括號,解決辦法:用圓括號把對象字面量包起來函數
let func = () => ({ foo: 1 });
console.log(func()); // {foo: 1}
// 不過上面那樣解決的缺點是可讀性變差了,因此更推薦直接當成多條語句的形式來寫,可讀性高
let func = () => {
return {
foo: 1
}
}
複製代碼
這是箭頭函數比較常見的用法ui
// 普通函數寫法
[1, 2, 3, 4].map(function (x) {
return x * x;
});
let result = [5, 4, 1, 3, 2].sort(function (a, b) {
return a - b;
});
// 箭頭函數寫法
[1, 2, 3, 4].map(x => x * x);
let result = [5, 4, 1, 3, 2].sort((a, b) => a - b);
複製代碼
箭頭函數沒有本身的this,它會捕獲本身在定義時)所處的外層執行環境的this,並繼承這個this值。因此,箭頭函數中this的指向在它被定義的時候就已經肯定了,以後永遠不會改變。this
const obj = {
a: function() { console.log(this) }
}
obj.a(); // 打印結果:obj對象
const obj = {
a:() => {
console.log(this);
}
}
obj.a(); // 打印結果: Window對象
複製代碼
上述代碼中,箭頭函數與外層的this保持一致,最外層的this就是Window對象。spa
function func1(a, b) {
console.log(arguments);
}
let func2 = (a, b) => {
console.log(arguments);
}
func1(1, 2); // Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
func2(1, 2); // Uncaught ReferenceError: arguments is not defined
複製代碼
若是非要打印函數參數,能夠在箭頭函數中使用rest參數代替arguments對象prototype
let func2 = (...rest) => {
console.log(rest); // (2) [1, 2]
}
複製代碼
在構造函數中,this指向新建立的對象實例rest
而箭頭函數沒有 [[Construct]]方法,箭頭函數不能夠看成構造函數,若是這樣作會拋出異常
var Person = (name) => {
this.name = name;
}
// Uncaught TypeError: Person is not a constructor
var person = new Person('jacky');
複製代碼
箭頭函數在建立時this對象就綁定了,故不會指向對象實例。
new.target是ES6新引入的屬性,普通函數若是經過new調用,new.target會返回該函數的引用。
function Cat() {
console.log(new.target);
}
let cat = new Cat(); // ƒ Cat() { console.log(new.target); }
複製代碼
此屬性主要:用於肯定構造函數是否爲new調用的。
箭頭函數的this指向全局對象,在箭頭函數中使用箭頭函數會報錯。
// 普通函數
let a = function() {
console.log(new.target);
}
a(); // undefined
// 箭頭函數
let b = () => {
console.log(new.target); // 報錯:Uncaught SyntaxError: new.target expression is not allowed here
};
b();
複製代碼
因爲不能經過 new 關鍵字調用,不能做爲構造函數,因此箭頭函數不存在 prototype 這個屬性。
let func = () => {};
console.log(func.prototype) // undefined
複製代碼
箭頭函數沒有原型,故也不能經過 super 來訪問原型的屬性,因此箭頭函數也是沒有 super 的。同this、arguments、new.target 同樣,這些值由外圍最近一層非箭頭函數決定。
call()、apply()、bind()方法的共同特色是能夠改變this的指向,用來動態修改函數執行時this的指向。但因爲箭頭函數的this定義時就已經肯定了且不會改變。因此這三個方法永遠也改變不了箭頭函數this的指向。
var name = 'global name';
var obj = {
name: 'jacky'
}
// 箭頭函數定義在全局做用域
let func = () => {
console.log(this.name);
};
func(); // global name
// this的指向不會改變,永遠指向Window對象,放到到window下的全局變量
func.call(obj); // global name
func.apply(obj); // global name
func.bind(obj)(); // global name
複製代碼
雖然箭頭函數中的箭頭不是運算符,但箭頭函數具備與常規函數不一樣的特殊運算符優先級解析規則。
let callback;
callback = callback || function() {}; // ok
callback = callback || () => {};
// SyntaxError:非法箭頭函數屬性
callback = callback || (() => {}); // ok
複製代碼
function foo(a, a) {
console.log(a, arguments); // 2 Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
}
var boo = (a, a) => { // 直接報錯:Uncaught SyntaxError: Duplicate parameter name not allowed in this context
console.log(a);
};
foo(1, 2);
boo(1, 2);
複製代碼
yield 關鍵字一般不能在箭頭函數中使用(除非是嵌套在容許使用的函數內)。所以,箭頭函數不能用做生成器( Generator )。
1.不該被用在定義對象的方法上
var obj = {
x: 10,
b: function() {
console.log( this.x, this)
},
c: () => console.log(this.x, this)
}
obj.b(); // 10 {x: 10, b: ƒ, c: ƒ}
obj.c(); // undefined Window
複製代碼
由於它內部this的指向緣由,當使用obj.c()的時候,咱們但願c方法裏面的this指向obj,可是它卻指向了obj所在上下文中的this(即window),違背了咱們的需求,因此箭頭函數不適合做爲對象的方法。
2.具備動態上下文的回調函數,也不該使用箭頭函數
var btn = document.getElementById('btn');
btn.addEventListener('click', () => {
console.log(this);
});
爲btn的監聽函數是一個箭頭函數,致使裏面的this就是全局對象,而不符合咱們想操做按鈕自己的需求。若是改爲普通函數,this就會動態指向被點擊的按鈕對象
複製代碼
除了前面兩點,剩下的跟上面講的與普通函數的區別重複了,故只做總結不貼代碼了: