箭頭函數(shù)

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

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

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

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

這里稱作“胖箭頭”，通常被當(dāng)作function 關(guān)鍵字的簡(jiǎ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 只是一個(gè)可以通過詞法作用域和閉包進(jìn)行引用的標(biāo)識(shí)符，不關(guān)心this 綁定的過程中發(fā)生了什么。)


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

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

總結(jié)：

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

解決的另一個(gè)辦法：bind（）；

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/92751.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

Caizhenhao 2019-08-21 17:41 評(píng)論0 收藏0