參考:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions
基礎(chǔ)語法
(參數(shù)1, 參數(shù)2, …, 參數(shù)N) => { 函數(shù)聲明 }
例如:
var f = (num1, num2) => {
return num1*num2
};
console.log(f(3, 4)); // 12
可以簡寫成:
(參數(shù)1, 參數(shù)2, …, 參數(shù)N) => 表達式(單一)
例如:
var f = (num1, num2) => num1*num2;
console.log(f(3, 4)); // 12
當只有一個參數(shù)時,圓括號是可省略的:
(單一參數(shù)) => {函數(shù)聲明}
單一參數(shù) => {函數(shù)聲明}
例如:
var f = num => num*num;
console.log(f(3)); // 9
沒有參數(shù)的函數(shù)應(yīng)該寫成一對圓括號:
() => {函數(shù)聲明}
例如:
var f = () => 'hello world';
console.log(f()); // hello world
引入箭頭函數(shù)有兩個方面的作用:簡化函數(shù)和不需要綁定 this
示姿。
簡化函數(shù)
我們使用 map
方法一次輸出一個數(shù)組各元素的長度蟹但,使用以下方法:
var materials = [
'Hydrogen',
'Helium',
'Lithium',
'Beryllium'
];
var f = materials.map(function(material) {
return material.length;
});
console.log(f) // [8, 6, 7, 9]
使用箭頭函數(shù)簡化:
var f = materials.map(material => {
return material.length;
});
console.log(f) // [8, 6, 7, 9]
進一步簡化:
var f = materials.map(material => material.length);
console.log(f) // [8, 6, 7, 9]
不綁定 this
在 ECMAScript 3/5中,通過將 this
值分配給封閉的變量拂苹,可以解決 this
問題安聘。
function Person() {
this.age = 0;
var self = this;
setInterval(function growUp() {
self.age++;
console.log(self.age);
}, 1000);
}
var p = new Person();
使用箭頭函數(shù)則不用綁定 this
:
function Person() {
this.age = 0;
// var self = this;
setInterval(() => {
this.age++;
console.log(this.age);
}, 1000);
}
var p = new Person();