箭頭函數

thursday 發布于2019-08-22 14:00 / 3050人閱讀

摘要：的作箭頭函數書寫方式這里稱作胖箭頭，通常被當作關鍵字的簡寫。中的箭頭函數引入了一個叫作詞法的行為總結簡單來說，箭頭函數在涉及綁定時的行為和普通函數的行為完全不一致。箭頭函數的綁定無法被修改。

1.ES6的作箭頭函數書寫方式：

var foo = a => {
  console.log( a );
};
foo( 2 ); // 2

這里稱作“胖箭頭”，通常被當作function 關鍵字的簡寫。

2.箭頭函數有重要的作用(解決this作用域問題)，比較下面函數：

var obj = {
    id: "a",
    cool: function coolFn() {
        console.log( this.id );
    }
};
var id = "b"
obj.cool(); // a
setTimeout( obj.cool, 100 ); // b

問題在于cool() 函數丟失了同this 之間的綁定。（最好的解決方法也是最常用的解決方法是var self = this）
如下：

var obj = {
    count: 0,
    cool: function coolFn() {
        var self = this;
        if (self.count < 1) {
            setTimeout( function timer(){
                self.count++;
                console.log( "a" );
            }, 100 );
        }
    }
};
obj.cool(); // a
(self 只是一個可以通過詞法作用域和閉包進行引用的標識符，不關心this 綁定的過程中發生了什么。)


ES6 中的箭頭函數引入了一個叫作this 詞法的行為：

var obj = {
count: 0,
    cool: function coolFn() {
        if (this.count < 1) {
            setTimeout( () => { 
                this.count++;
                console.log( "a" );
            }, 100 );
        }
    }
};
obj.cool(); // a

總結：

簡單來說，箭頭函數在涉及this 綁定時的行為和普通函數的行為完全不一致。它放棄了所有普通this 綁定的規則，取而代之的是用當前的詞法作用域覆蓋了this 本來的值。因此，這個代碼片段中的箭頭函數并非是以某種不可預測的方式同所屬的this 進行了解綁定，而只是“繼承”了cool() 函數的this 綁定（因此調用它并不會出錯）。箭頭函數的綁定無法被修改。（new 也不行！）

解決的另一個辦法：bind（）；

var obj = {
count: 0,
    cool: function coolFn() {
        if (this.count < 1) {
            setTimeout( function timer(){
                this.count++; // this 是安全的， 因為bind(..)
                console.log( "a" );
            }.bind( this ), 100 ); 
        }
    }
};
obj.cool();//a

最后：無論你是喜歡箭頭函數中this 詞法的新行為模式，還是喜歡更靠得住的bind()，都需要注意箭頭函數不僅僅意味著可以少寫代碼。它們之間有意為之的不同行為需要我們理解和掌握，才能正確地使用它們。

GPU云服務器云服務器箭頭函數左右箭頭箭頭按鈕箭頭旋轉

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92751.html

論普通函數和箭頭函數的區別以及箭頭函數的注意事項、不適用場景

摘要：第二種情況是箭頭函數的如果指向普通函數它的繼承于該普通函數。箭頭函數的指向全局，使用會報未聲明的錯誤。 showImg(https://segmentfault.com/img/remote/1460000018610072?w=600&h=400); 箭頭函數是ES6的API，相信很多人都知道，因為其語法上相對于普通函數更簡潔，深受大家的喜愛。就是這種我們日常開發中一直在使用的API...

paulquei 2019-08-23 16:15 評論0 收藏0
ES6 - 箭頭函數、箭頭函數與普通函數的區別總結

摘要：但是因為箭頭函數沒有自己的，它的其實是繼承了外層執行環境中的，且指向永遠不會隨在哪里調用被誰調用而改變，所以箭頭函數不能作為構造函數使用，或者說構造函數不能定義成箭頭函數，否則用調用時會報錯報錯箭頭函數沒有自己的箭頭函數沒有自己的對象。這篇文章我們來了解一下ES6中的箭頭函數。首先會介紹一下箭頭函數的基本語法，因為基本語法比較好理解，我們用示例做簡單介紹即可。之后，我們重點來討論一下...

scola666 2019-08-23 16:32 評論0 收藏0
es6 - 箭頭函數

摘要：也就是說箭頭函數的的值不再根據調用時上下文確定，而是像普通變量那樣根據定義時的作用域鏈進行查找。箭頭函數中的依然要根據定義時的作用域鏈進行查找。知乎這篇文章對箭頭函數的一些不適合的場景進行了總結，可以作為參考。 es6 - 箭頭函數哇，箭頭函數...，聽起來好NB，但是如果你知道它是因為使用了=>這樣類似箭頭的符號，所以才叫箭頭函數。瞬間感覺：呵，這名字起的...。 es6增加了...

13651657101 2019-08-26 11:46 評論0 收藏0
ES6—箭頭函數（5）

摘要：因為它不產生屬于它自己上下文的箭頭函數的另一個用處是簡化回調函數。箭頭函數使用場景箭頭函數適合于無復雜邏輯或者無副作用的純函數場景下，例如用在的回調函數定義中，另外目前等庫，都大量使用箭頭函數，直接定義的情況已經很少了。 0.為什么會出現箭頭函數？ 1.傳統的javascript函數語法并沒有提供任何的靈活性，每一次你需要定義一個函數時，你都必須輸入function () {},這至少...

yanwei 2019-08-23 17:20 評論0 收藏0
ES6 箭頭函數從了解到深入

摘要：有傳聞說，箭頭函數的語法，是受到了的影響，并且它與中的語法一樣，共享上下文。箭頭函數是新增加的一個特性。箭頭函數沒有自己的值，其值是通過繼承其它傳入對象而獲得的通常來說是上一級外部函數的的指向。箭頭函數 1. 簡單的定義：胖箭頭函數 Fat arrow functions，又稱箭頭函數，是一個來自ECMAScript 2015（又稱ES6）的全新特性。有傳聞說，箭頭函數的語法=>，...

Eminjannn 2019-08-20 16:37 評論0 收藏0
簡單說 JavaScript的箭頭函數

摘要：說明箭頭函數本質還是函數，我們來看看他與中普通函數的區別，先看看寫法上的區別。箭頭函數會捕獲其所在上下文的值，作為自己的值。箭頭函數不可變。這些方法也無法改變箭頭函數的指向。箭頭函數不能用關鍵字來實例化對象，不然會報錯。說明箭頭函數本質還是函數，我們來看看他與JavaScript中普通函數的區別，先看看寫法上的區別。 showImg(https://segmentfault...

Caizhenhao 2019-08-21 17:41 評論0 收藏0