箭頭函數(shù)

thursday 發(fā)布于2019-08-22 14:00 / 3060人閱讀

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

1.ES6的作箭頭函數(shù)書寫方式：

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

這里稱作“胖箭頭”，通常被當(dāng)作function 關(guān)鍵字的簡寫。

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

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

問題在于cool() 函數(shù)丟失了同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 只是一個可以通過詞法作用域和閉包進行引用的標(biāo)識符，不關(guān)心this 綁定的過程中發(fā)生了什么。)


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

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

總結(jié)：

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

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

云服務(wù)器 GPU云服務(wù)器箭頭函數(shù) 左右箭頭箭頭按鈕箭頭旋轉(zhuǎn)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92751.html

相關(guān)文章

論普通函數(shù)和箭頭函數(shù)的區(qū)別以及箭頭函數(shù)的注意事項、不適用場景

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

paulquei 2019-08-23 16:15 評論0 收藏0
ES6 - 箭頭函數(shù)、箭頭函數(shù)與普通函數(shù)的區(qū)別總結(jié)

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

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

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

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

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

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

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

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

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

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