JavaScript箭頭函數

JavaScript中，函數可以用箭頭“=>”來定義，稱之為箭頭函數，有時候也稱之為lambda表達式（lambda Expression）。箭頭函數是一個匿名函數，其語法比函數表達式更簡潔，相比函數表達式，箭頭函數沒有自己的 this、arguments、super或new.target。箭頭函數更適用于那些需要匿名函數的地方，并且它不能用作構造函數。

1.基礎語法

//多個參數
(param1, param2, …, paramN) => { statements }
//只有一個參數
(param) => { statements }
//當只有一個參數時，圓括號可以省略
param => { statements }
//函數體只有一條 return語句
(param1, param2, …, paramN) => { return expression; }
//當函數體只有一條 return語句時，可以省略 return關鍵字和函數體的花括號
(param1, param2, …, paramN) => expression
//沒有參數的函數必須寫一對圓括號
() => { statements }

2.高級語法

//加圓括號的函數體返回對象字面量表達式
params => ({foo: bar})
//支持剩余參數和默認參數
(param1, param2, …rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => {
    statements
}
//支持參數列表解構
let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();　// 6

3.箭頭函數不綁定 this

在普通函數中，this總是指向調用它的對象，如果是構造函數，this指向創建的對象實例。箭頭函數本身沒有 this，但是它在聲明時可以捕獲其所在上下文的 this。例如：

var msg = "hello";
let func = () => {
    console.log(this.msg);
}；
func();//hello

在上面的代碼中，箭頭函數在全局作用域聲明，所以它捕獲全局作用域中的 this，this.msg即得到全局作用域中的 msg的值"hello"。

4.箭頭函數不會暴露arguments對象

普通函數調用后都具有一個 arguments 對象存儲實際傳遞的參數，但是箭頭函數沒有這個對象。在大多數情況下，可以使用rest參數來代替arguments對象。例如：

念

ES6標準新增了一種新的函數：Arrow Function（箭頭函數）。為什么叫Arrow Function？

因為它的定義用的就是一個箭頭：

x => x * x

示例相當于如下代碼：

function (x) {
    return x * x;
}

JavaScript箭頭函數是ECMAScript 6中引入的編寫函數表達式的一種簡便方法。

箭頭函數的語法如下：

(parameters) => { statements }

如果沒有參數，則表示一個箭頭函數，如下所示：

() => { statements }

當您只有一個參數時，左括號是可選的：

parameters => { statements }

如果包含只返回返回表達式，請刪除方括號：

parameters => expression

帶來的好處

簡潔的語法

讓我們看一下常規函數：

function funcName(params) { 
  return params + 2; 
}
funcName(2); // 4

然后通過箭頭函數精簡之后為：

var funcName=params => params+2;
funcName(2); // 4

可以看到通過箭頭函數實現之后，語法更加精簡。

不綁定this

與常規函數不同，箭頭函數不綁定this。相反，它是在詞匯上綁定的(即this保持其原始上下文的含義)。

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

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

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

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

使用箭頭函數的限制條件

應用箭頭函數時要注意的一些限制條件：

箭頭函數沒有參數對象。

箭頭函數不能與新運算符一起使用，因此它不能用作構造函數。

箭頭函數沒有原型屬性。

如果你嘗試使用箭頭函數作為構造函數，那么你會得到異常。請看下面的代碼：

var foo = (name, age) => { name = name, age = age };
var f1 = new foo("cat", 6);

代碼試圖通過使用箭頭函數foo作為構造函數來創建對象f1，JavaScript將拋出以下異常：

而且，當你試圖輸出箭頭函數的原型值時，你會得到undefined的輸出：

var foo = (name, age) => { name = name, age = age };
console.log(foo.prototype);

發生這種情況的原因是因為箭頭函數沒有原型屬性。請記住：雖然箭頭函數為你提供了編寫函數表達式的簡短方法，但它沒有自己的this值，也不能用作構造函數。

端小白Earl筆記

箭頭函數的基本語法

箭頭函數屬于函數表達式。箭頭函數表達式的寫法與函數申明以及普通函數表達式的寫法有所不同。

//函數申明
function f1(){
    console.log('普通函數')
}
function f2(a, b){
    return a + b;
}

//普通函數表達式
let f1 = function(){
    console.log('普通函數')
}
let f2 = function(a, b){
    return a + b;
}

//箭頭函數表達式
let f1 = () => {
    console.log('箭頭函數')
}
let f2 = (a, b) => {
    return a + b;
}

箭頭函數的函數體如果只有一個表達式，可以寫成一行的簡寫體，省略return，直接返回該表達式。

//基礎語法
let f2 = (a, b) => {
    return a + b;
}

//簡寫體
let f2 = (a, b) => a + b

箭頭函數如果只有一個參數，可以省略小括號。

//基礎語法
let f3 = (a) => {
    return a + 1;
}
let f4 = (a) => {
    console.log(a);
}

//簡寫體
let f3 = a => a + 1
let f4 = a => {
    console.log(a);
}

箭頭函數的加小括號的函數體返回對象字面量表達式。

let f5 = age => ({Age: age})
console.log(f5(18))  // {Age: 18}

箭頭函數支持參數列表解構。

let f6 = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c
f6()  // 6

箭頭函數的特點

箭頭函數表達式比普通函數表達式更簡潔，指向性更強，可讀性更好。
箭頭函數屬于表達式函數，因此不存在函數提升。
箭頭函數相當于匿名函數，不能作為構造函數，不可以使用new命令。
箭頭函數沒有prototype屬性。
箭頭函數不綁定this，它只會從自己的作用域鏈的上一層繼承 this。

var user1={
  name:'earl',
  fullname:function(){ return this.name }  // 'earl' 這里的this指向user1
}

var user2={
  name:'earl',
  fullname:()=>this.name  //'' 箭頭函數沒有定義this綁定，這里的this指向window
}

var user3={
  name:'earl',
  sleep:function(){ 
    console.log(this)   // 這里的this指向user3
    var fn = ()=>{console.log(this)} // 這里的this也指向user3
    fn()
  }  
}

使用call,apply,bind并不會改變箭頭函數中的this指向。

window.name = "window_name";
let f1 = function () {
  return this.name
}
let f2 = () => this.name
let obj = { name: "obj_name" }

console.log(f1.call(obj))  //obj_name
console.log(f2.call(obj)) // window_name

箭頭函數不綁定arguments，它只會從自己的作用域鏈的上一層繼承arguments。箭頭函數可以使用剩余參數。

在線咨詢

上一篇：記Prism實現文章代碼高亮
下一篇：Web 性能優化：使用 CSS font-display 控制字體加載和替換

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商