成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

沒圖說個錘子之js bind方法

RayKr / 3012人閱讀

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

  
首發(fā)于搞起博客

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

概念

我們來看看MSDN上關(guān)于javascript bind函數(shù)的解釋：

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

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

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

用法

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

參數(shù)

function
必選。 一個函數(shù)對象。

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

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

返回值

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

異常

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

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

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

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

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

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

// 輸出: true

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

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

// 創(chuàng)建一個帶有剛才那個方法的對象，
// 并且方法調(diào)用當(dāng)前這個對象中的最大值和最小值
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ù)中還可以有幾個參數(shù)帶進來
arg1[,arg2[,argN]]]

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

var emptyObject = {};

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

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

恩，知道，上圖再說對吧

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

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

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

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

相關(guān)文章

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

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

    tianyu 評論0 收藏0

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

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

    yzd 評論0 收藏0

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

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

    leanote 評論0 收藏0

  • 【Vue原理】VModel - 源碼版 之 select 詳解

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

    lsxiao 評論0 收藏0

  • 圖說 WebAssembly（四）：快速入門

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

    BoYang 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<