ES6中的箭頭函式例項詳解

語法

我們先來看看箭頭函式的語法程式設計客棧：

([param] [, param]) =>

param => expression

param 是引數，根據引數個數不同，分這幾種情況：

() => // 零個引數用 () 表示；

x => // 乙個引數可以省略 ()；

(x, y) => // 多引數不能省略 ()；

示例我程式設計客棧們再來看看一些示例，看看在es5中的函式怎麼通過es6中的箭頭函式來替代吧：

// es5

var selected = alljobs.filter(function (job) );

// es6

var selected = alljobs.filter(job => job.isselected());

當然，也可以定義多個引數：

// es5

var total = values.reduce(function (a, b) , 0);

// es6

var total = values.reduce((a, b) => a + b, 0);

當然=>後面也不一定非得接return 之後的語句，看下面：

// es5

$("#confetti-btn").click(function (event) );

// es6

$("#confetti-btn").click(event => );

但是需要注意的是，多行語句需要用{}括起來，單行表示式不需要{}，並且會作為函式返回值。

x => ; // 函式返回 x * x

x => x * x; // 同上一行

x => return x * x; // syntaxerror 報錯，不能省略 {}

x => ; // 合法，沒有定義返回值，返回 undefined

和普通函式一樣，箭頭函式也可以使用剩餘引數和預設引數。

var func1 = (x = 1, y = 2) => x + y;

func1(); // 得到 3

var func2 = (x, ...args) => ;

func2(1,2,3); // 輸出 [2, 3]

特性介紹完了箭頭表示式的語法和示例，我們就需要思考一下了。如果箭頭表示式僅僅就是簡化了函式的命名，我們為什麼要改變原來的習慣而去使用它呢？所以我們需要了解一下箭頭函式的特性。

箭頭函式內部沒有constructor方法，也沒有prototype，所以不支援new操作。但是它對this的處理與一般的普通函式不一樣。箭頭函式的 this 始終指向函式定義時的 this，而非執行xuygblrqxk時。我們通過乙個例子來理解:

var o = ,

test : function() , 100);

}};o.test(); // typeerror : this.func is not a function

上面的**會出現錯誤，因為this的指向從o變為了全域性（函式呼叫中的this都是指向全域性的）。如果大家對j**ascript中的this不是很熟悉的話，可以看看前面的一篇文章《j**ascript中this程式設計客棧的用法例項詳解》。好了，回歸正題，我們需要修改上面的**如下：

var o = ,

test : function() , 100);

}};o.test();

通過使用外部事先儲存的this就行了。這裡就可以利用到箭頭函式了，我們剛才說過，箭頭函式的 this 始終指向函式定義時的 this，而非執行時。所以我們將上面的**修改如下：

var o = ,

test : function() , 100);

}};o.test();

這回this就指向o了。

我們還需要注意一點的就是這個this是不會改變指向物件的，我們知道call和apply可以改變this的指向，但是在箭頭函式中是無效的。

var x = 1,

o = ;

o.test(); // 1

o.test.call(o); // 依然是1

本文標題: es6中的箭頭函式例項詳解

本文位址:

ES6中的箭頭函式例項詳解

ES6箭頭函式詳解

ES6 函式箭頭函式箭頭函式中的this

ES6 中的箭頭函式

ES6中的箭頭函式例項詳解

ES6箭頭函式詳解

ES6 函式 箭頭函式 箭頭函式中的this

ES6 中的箭頭函式

相關推薦

ES6 函式箭頭函式箭頭函式中的this