[譯]箭頭函數 vs .bind()

sewerganger 發布于2019-08-19 17:47 / 3603人閱讀

摘要：在我們實際使用中經常用的箭頭函數來代替提取對象的方法如果將一個對象的方法作為回調函數傳入你需要定義一個確定的否則它將作為一個函數來執行值可能是也可能是全局對象例如另一種解決方案就是使用箭頭函數譯者注原文評論中也提到了的綁定運算符如下作為參數

在我們實際使用中,經常用ES6的箭頭函數來代替Function.prototype.bind().

1.提取對象的方法

如果將一個對象的方法作為回調函數傳入,你需要定義一個確定的this,否則它將作為一個函數來執行(this值可能是undefined, 也可能是全局對象).例如:

    obj.on("anEvent", console.log.bind(console))

另一種解決方案就是使用箭頭函數:

    obj.on("anEvent", x => console.log(x))

譯者注: 原文評論中也提到了ES7的綁定運算符, 如下:

    obj.on("anEvent", ::console.log)

2.this作為參數

下面的代碼展示了一個小技巧:對于一些方法,你可能不需要用bind()來為回調函數綁定this,這類方法允許你在額外的參數中定義this的值..filter()就是這樣一類方法:

    const as = new Set([1, 2, 3]);
    const bs = new Set([3, 2, 4]);
    const intersection = [...as].filter(bs.has, bs);
        // [2, 3]

如果說你使用了箭頭函數,代碼會更加清晰易讀:

    const as = new Set([1, 2, 3]);
    const bs = new Set([3, 2, 4]);
    const intersection = [...as].filter(a => bs.has(a));
        // [2, 3]

3.部分賦值

bind()允許你設定一個函數部分參數的值,你可以藉由一個已有的函數,為它設定部分參數的值,然后創建一個新的函數:

    function add(x, y) {
        return x + y;
    }
    const plus1 = add.bind(undefined, 1);

再一次,我找到了使用箭頭函數簡化它的方法:

    const plus1 = y => add(1, y);

4.拓展閱讀

Currying versus partial application (with JavaScript code)

Uncurrying this in JavaScript

GPU云服務器云服務器箭頭函數 vs中c語言輸出函數 linux下編譯阿里 linux下編譯運行

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

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

[譯] React 組件中綁定回調

摘要：好的方案在構造函數中仍然使用，現在我們只要繞過每次渲染都要生成新的函數的問題就可以了。我們可以通過只在構造函數中綁定回調的上下問來解決這個問題，因為構造函數只會調用一次，而不是每次渲染都調用。原文：Binding callbacks in React components 在組件中給事件綁定處理函數是很常見的，比如說每當用戶點擊一個button的時候使用console.log打印一些...

Lin_R 2019-08-22 10:33 評論0 收藏0
【譯】this 是什么？JavaScript 對象的內部工作原理

摘要：關鍵字會實例化一個新的對象實例，并在執行構造函數時將指向該實例。原文鏈接譯是什么對象的內部工作原理原文鏈接：What is this? The Inner Workings of JavaScript Objects (需要梯子) 原文作者：Eric Elliott 譯文永久鏈接：【譯】什么是 this？JavaScript 對象的內部工作原理譯者：士心翻譯目的：函數動...

Hwg 2019-08-23 17:06 評論0 收藏0
深入理解JavaScript

摘要：深入之繼承的多種方式和優缺點深入系列第十五篇，講解各種繼承方式和優缺點。對于解釋型語言例如來說，通過詞法分析語法分析語法樹，就可以開始解釋執行了。 JavaScript深入之繼承的多種方式和優缺點 JavaScript深入系列第十五篇，講解JavaScript各種繼承方式和優缺點。寫在前面本文講解JavaScript各種繼承方式和優缺點。但是注意：這篇文章更像是筆記，哎，再讓我...

myeveryheart 2019-08-22 13:46 評論0 收藏0
[譯]淺顯易懂的 this 取值規則

摘要：遵循以下規則，按優先級排列。換句話說，當處于被調用函數的左邊，則就是左邊的對象。試一下通過兩種不同的方式調用函數時的值。找到應用的規則很顯然應用的是規則使用符號。在使用工具庫時發現取值不符合上述規則時，請查看庫文檔。翻譯自文章The Simple Rules to ‘this’ in Javascript。確定什么是 this 并非難事?？偟膩碚f，通過查找函數被調用時的位置（和方法...

X_AirDu 2019-08-22 16:27 評論0 收藏0
js

摘要：所以我們又可以得出一個結論原型的屬性指向構造函數，構造函數又通過屬性指回原型，但是并不是所有函數都具有這個屬性，就沒有這個屬性。 1.原始類型 boolean number string null undefined symbol原始類型儲存的都是值，是沒有函數可以調用的，undefined.toString() 顯示報錯，但是1.toString() // 1 ；是因為1被強制轉...

pubdreamcc 2019-08-23 15:32 評論0 收藏0