原文

ES6標準新增了一種新的函數：Arrow Function（箭頭函數）。

為什么叫Arrow Function？因為它的定義用的就是一個箭頭：

x => x * x

上面的箭頭函數相當于：

function (x) {return x * x; }

箭頭函數相當于匿名函數，并且簡化了函數定義。箭頭函數有兩種格式，一種像上面的，只包含一個表達式，連{ ... }和return都省略掉了。還有一種可以包含多條語句，這時候就不能省略{ ... }和return：

x => {if (x > 0) {return x * x;}else {return - x * x;} }

如果參數不是一個，就需要用括號()括起來：

// 兩個參數: (x, y) => x * x + y * y// 無參數: () => 3.14// 可變參數: (x, y, ...rest) => {var i, sum = x + y;for (i=0; i<rest.length; i++) {sum += rest[i];}return sum; }

如果要返回一個對象，就要注意，如果是單表達式，這么寫的話會報錯

// SyntaxError: x => { foo: x }

因為和函數體的{ ... }有語法沖突，所以要改為

// ok: x => ({ foo: x })

this

箭頭函數看上去是匿名函數的一種簡寫，但實際上，箭頭函數和匿名函數有個明顯的區別：箭頭函數內部的this是詞法作用域，由上下文確定。

回顧前面的例子，由于JavaScript函數對this綁定的錯誤處理，下面的例子無法得到預期結果：

var obj = {birth: 1990,getAge: function () {var b = this.birth; // 1990var fn = function () {return new Date().getFullYear() - this.birth; // this指向window或undefined };return fn();} }; var obj = {birth: 1990,getAge: function () {var b = this.birth; // 1990var fn = function () {return new Date().getFullYear() - this.birth; // this指向window或undefined };return fn();} };

現在，箭頭函數完全修復了this的指向，this總是指向詞法作用域，也就是外層調用者obj：

var obj = {birth: 1990,getAge: function () {var b = this.birth; // 1990var fn = () => new Date().getFullYear() - this.birth; // this指向obj對象return fn();} }; obj.getAge(); // 25

由于this在箭頭函數中已經按照詞法作用域綁定了，所以，用call()或者apply()調用箭頭函數時，無法對this進行綁定，即傳入的第一個參數被忽略：

var obj = {birth: 1990,getAge: function (year) {var b = this.birth; // 1990var fn = (y) => y - this.birth; // this.birth仍是1990return fn.call({birth:2000}, year);} }; obj.getAge(2015); // 25

?

轉載于:https://www.cnblogs.com/lfxiao/p/9360238.html

總結

以上是生活随笔為你收集整理的js之箭头函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。