沒(méi)圖說(shuō)個(gè)錘子之js bind方法

RayKr 發(fā)布于2019-08-21 10:34 / 2941人閱讀

摘要：在綁定函數(shù)中，對(duì)象將解析為傳入的對(duì)象。返回值與函數(shù)相同的新函數(shù)注意是新函數(shù)，對(duì)象和初始參數(shù)除外。異常如果指定的不是函數(shù)，則將引發(fā)異常。看到這里我們基本對(duì)方法的使用有個(gè)初步認(rèn)識(shí)了，那先來(lái)看看具體示例再分析分析。不知道看了兩幅圖，記住了方法沒(méi)

  首發(fā)于搞起博客

bind方法，寫(xiě)javascript的肯定都見(jiàn)過(guò)，我也是，但是，不是經(jīng)常用的話(huà)，基本上過(guò)一段時(shí)間就會(huì)模糊了，所以，決定把它轉(zhuǎn)化成圖像，估計(jì)比較容易記憶。

概念

我們來(lái)看看MSDN上關(guān)于javascript bind函數(shù)的解釋?zhuān)?/p>

  對(duì)于給定函數(shù)，創(chuàng)建具有與原始函數(shù)相同的主體的綁定函數(shù)。 在綁定函數(shù)中，this 對(duì)象將解析為傳入的對(duì)象。 綁定函數(shù)具有指定的初始參數(shù)。

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

莫慌，我們慢慢來(lái)看，看看用法先：

用法

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

參數(shù)

function
必選。一個(gè)函數(shù)對(duì)象。

thisArg
必選。 this 關(guān)鍵字可在新函數(shù)中引用的對(duì)象。

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

返回值

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

異常

如果指定的 function 不是函數(shù)，則將引發(fā) TypeError 異常。

看到這里我們基本對(duì)bind方法的使用有個(gè)初步認(rèn)識(shí)了，那先來(lái)看看具體示例再分析分析。

示例 this綁定

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

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

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

// 使用一個(gè)數(shù)字來(lái)驗(yàn)證下這個(gè)函數(shù)
var result = boundCheckNumericRange (12);
document.write(result);

// 輸出: true

好了，這個(gè)簡(jiǎn)單的示例看完了，我們知道了，使用bind將一個(gè)對(duì)象綁定到某個(gè)函數(shù)中，這個(gè)函數(shù)中所使用的this就會(huì)指向綁上去的函數(shù)了，不羅嗦了，畫(huà)個(gè)圖理解。

再看個(gè)稍微有點(diǎn)不同的例子，其實(shí)也差不多：

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

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

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

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

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

參數(shù)綁定

在參數(shù)中還可以有幾個(gè)參數(shù)帶進(jìn)來(lái)
arg1[,arg2[,argN]]]

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

var emptyObject = {};

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

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

恩，知道，上圖再說(shuō)對(duì)吧

上圖可以看出bind時(shí)傳入的參數(shù)，在新函數(shù)中作為最先使用的參數(shù)，但是它并沒(méi)有改變?cè)瘮?shù)參數(shù)的個(gè)數(shù)。

不知道看了兩幅圖，記住了bind方法沒(méi)？