沒圖說個錘子之js bind方法

RayKr 發布于2019-08-21 10:34 / 2947人閱讀

摘要：在綁定函數中，對象將解析為傳入的對象。返回值與函數相同的新函數注意是新函數，對象和初始參數除外。異常如果指定的不是函數，則將引發異常?？吹竭@里我們基本對方法的使用有個初步認識了，那先來看看具體示例再分析分析。不知道看了兩幅圖，記住了方法沒

首發于搞起博客

bind方法，寫javascript的肯定都見過，我也是，但是，不是經常用的話，基本上過一段時間就會模糊了，所以，決定把它轉化成圖像，估計比較容易記憶。

概念

我們來看看MSDN上關于javascript bind函數的解釋：

對于給定函數，創建具有與原始函數相同的主體的綁定函數。在綁定函數中，this 對象將解析為傳入的對象。綁定函數具有指定的初始參數。

哈哈哈哈，是不是懵逼了？

莫慌，我們慢慢來看，看看用法先：

用法

function.bind(thisArg[,arg1[,arg2[,argN]]])

參數

function
必選。一個函數對象。

thisArg
必選。 this 關鍵字可在新函數中引用的對象。

arg1[,arg2[,argN]]]
可選。要傳遞到新函數的參數的列表。

返回值

與 function 函數相同的新函數(注意是新函數！)，thisArg 對象和初始參數除外。

異常

如果指定的 function 不是函數，則將引發 TypeError 異常。

看到這里我們基本對bind方法的使用有個初步認識了，那先來看看具體示例再分析分析。

示例 this綁定

/**
 * 定義初始的函數
 * 這個函數的功能很簡單，就是判斷數字是否在某個范圍
 */
var checkNumericRange = function (value) {
    if (typeof value !== "number")
        return false;
    else
        return value >= this.minimum && value <= this.maximum;
}

// 這里的范圍將會被綁定到函數中的this值去
var range = { minimum: 10, maximum: 20 };

// 開始綁定！
var boundCheckNumericRange = checkNumericRange.bind(range);

// 使用一個數字來驗證下這個函數
var result = boundCheckNumericRange (12);
document.write(result);

// 輸出: true

好了，這個簡單的示例看完了，我們知道了，使用bind將一個對象綁定到某個函數中，這個函數中所使用的this就會指向綁上去的函數了，不羅嗦了，畫個圖理解。

再看個稍微有點不同的例子，其實也差不多：

// 創建一個帶有剛才那個方法的對象，
// 并且方法調用當前這個對象中的最大值和最小值
var originalObject = {
    minimum: 50,
    maximum: 100,
    checkNumericRange: function (value) {
        if (typeof value !== "number")
            return false;
        else
            return value >= this.minimum && value <= this.maximum;
    }
}

// 檢查10是否在范圍內
var result = originalObject.checkNumericRange(10);
document.write(result + " ");
// 輸出: false

// 還是同樣的配方，還是熟悉的味道
var range = { minimum: 10, maximum: 20 };

// bind技能要正在引導...
var boundObjectWithRange = originalObject.checkNumericRange.bind(range);

// 看看這次的效果
var result = boundObjectWithRange(10);
document.write(result);
// 輸出: true， 有效了！

參數綁定

在參數中還可以有幾個參數帶進來
arg1[,arg2[,argN]]]

// 又是定義一個函數，這次是4個參數
var displayArgs = function (val1, val2, val3, val4) {
    document.write(val1 + " " + val2 + " " + val3 + " " + val4);
}

var emptyObject = {};

// 使用bind，產生一個新函數
// 這個新函數的第一第二個參數已經定死了為這兩個，再有參數往后排
var displayArgs2 = displayArgs.bind(emptyObject, 12, "a");

// 這里就是兩個排隊的參數了
displayArgs2("b", "c");
// 輸出: 12 a b c

恩，知道，上圖再說對吧

上圖可以看出bind時傳入的參數，在新函數中作為最先使用的參數，但是它并沒有改變原函數參數的個數。

不知道看了兩幅圖，記住了bind方法沒？

云服務器 GPU云服務器 bind()方法 bind方法 js.bind JS中bind、call和apply的作

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

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

《CSS 揭秘》作者Lea Verou：我喜歡分享開源的行業文化

摘要：作為女性，你又來自互聯網技術不太發達的希臘。希臘目前可能還存在一些針對女性的性別歧視，但并不明顯，不然我可能會被影響到。實際上，有時候希臘在性別平等方面比其他西方國家更進步。本文僅用于學習和交流，不用于商業目的。非商業轉載請注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/art... 訪談嘉賓： Lea VerouW3C CSS工作組特邀專...

tianyu 2019-08-29 11:06 評論0 收藏0
《CSS 揭秘》作者Lea Verou：我喜歡分享開源的行業文化

摘要：作為女性，你又來自互聯網技術不太發達的希臘。希臘目前可能還存在一些針對女性的性別歧視，但并不明顯，不然我可能會被影響到。實際上，有時候希臘在性別平等方面比其他西方國家更進步。本文僅用于學習和交流，不用于商業目的。非商業轉載請注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/art... 訪談嘉賓： Lea VerouW3C CSS工作組特邀專...

yzd 2019-08-21 14:14 評論0 收藏0
《CSS 揭秘》作者Lea Verou：我喜歡分享開源的行業文化

摘要：作為女性，你又來自互聯網技術不太發達的希臘。希臘目前可能還存在一些針對女性的性別歧視，但并不明顯，不然我可能會被影響到。實際上，有時候希臘在性別平等方面比其他西方國家更進步。本文僅用于學習和交流，不用于商業目的。非商業轉載請注明作譯者、出處，并保留本文的原始鏈接：http://www.ituring.com.cn/art... 訪談嘉賓： Lea VerouW3C CSS工作組特邀專...

leanote 2019-08-01 15:32 評論0 收藏0
【Vue原理】VModel - 源碼版之 select 詳解

摘要：寫文章不容易，點個贊唄兄弟專注源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于版本如果你覺得排版難看，請點擊下面鏈接或者拉到下面關注公眾號也可以吧原理源碼版之詳解今天我們來看看處寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 ...

lsxiao 2019-08-23 18:25 評論0 收藏0
圖說 WebAssembly（四）：快速入門

摘要：本文是圖說系列文章的第四篇。它們表示一種可以在普遍流行機器上高效使用的指令集合。這是因為是一種稱為堆棧機器。盡管是根據堆棧機器來設計的，但是這并不是它在真實物理機器上工作的方式。這些內容稱為段。本文是圖說 WebAssembly 系列文章的第四篇。如果您還未閱讀之前的文章，建議您從第一篇入手。 WebAssembly 是一種使得除 JavaScript 以外的編程語言也能運行在網頁上...

BoYang 2019-08-22 17:00 評論0 收藏0