<samp id="wiaeu"><label id="wiaeu"></label></samp>
  • <samp id="wiaeu"><label id="wiaeu"></label></samp>
    <samp id="wiaeu"></samp>
  • <samp id="wiaeu"><sup id="wiaeu"></sup></samp>
  • 技術頻道導航
    HTML/CSS
    .NET技術
    IIS技術
    PHP技術
    Js/JQuery
    Photoshop
    Fireworks
    服務器技術
    操作系統
    網站運營

    贊助商

    分類目錄

    贊助商

    最新文章

    搜索

    詳解JS call() apply()和bind() this的用法區別

    作者:admin    時間:2022-5-7 13:16:4    瀏覽:

    在前文,非常詳細的介紹了JS里this的上下文對象及用法,知道了this是由其上下文決定的——它是全局的、在對象中、在構造函數或類中、或在 DOM 事件處理程序上,它是隱式引用的。但是,如果使用call、applybind方法,你可以明確確定this應該引用什么。

    詳解JS里this在call() apply()和bind()的用法區別

    何時使用call、apply或bind?

    何時使用call、applybind,取決于程序的上下文。bind當你想使用事件來訪問另一個類中的一個類的屬性時,它會特別有用。例如,如果你要編寫一個簡單的游戲,你可能會將用戶界面和 I/O 分離到一個類中,而將游戲邏輯和狀態分離到另一個類中。由于游戲邏輯需要訪問輸入,例如按鍵和單擊,你可能希望bind事件訪問游戲邏輯類的this值。

    重要的部分是知道如何確定this所指的對象,你可以像前文JS里this的上下文對象及用法介紹的那樣,隱含地執行此操作,或者使用接下來將學習的三種方法顯式地執行此操作。

    call和apply的相同之處

    callapply非常相似——它們調用具有指定this上下文和可選參數的函數。callapply之間的唯一區別是,call需要一個接一個地傳遞參數,而apply將參數作為一個數組。

    在此示例中,我們將創建一個對象,并創建一個引用this但沒有this上下文的函數。

    const webkaka = {
      name: '卡卡網',
      domainName: 'webkaka.com',
    }

    function describe() {
      console.log(`${this.name} 的域名是 ${this.domainName}.`)
    }

    describe()

    輸出

    "undefined 的域名是 undefined"

    由于describe并且webkaka沒有關聯,因此單獨調用describe只會打印 undefined,因為它正在尋找全局對象上的那些屬性。

    但是,你可以使用callapply調用函數webkakathis上下文。

    describe.call(webkaka)
    // or:
    describe.apply(webkaka)

    輸出

    "卡卡網 的域名是 webkaka.com"

    當這些方法被應用,在describewebkaka之間會有一個新的聯系,現在讓我們確認this到底是什么。

    function printThis() {
    console.log(this)
    }
    printThis.call(webkaka)
    // or:
    printThis.apply(webkaka)

    輸出

    {name: "卡卡網", domainName: "webkaka.com"}

     

    在這種情況下,this實際上成為作為參數傳遞的對象。

    這是callapply是如何相同的。

    call和apply的微妙區別

    除了能夠將this上下文作為第一個參數傳遞之外,還可以傳遞其他參數。

    const webkaka = {
    name: '卡卡網',
    domainName: 'webkaka.com',
    }
    function printThis() {
    console.log(this)
    }
    function longDescribe(title, year) {
    console.log(`${this.name} 的域名是 ${this.domainName}, 它的標題是 ${title} , 它創建于 ${year} 年。` )
    }
    longDescribe.call(webkaka, '卡卡測速網', 2009);

    你要傳遞的每個附加值,用call時,它們都作為一個附加參數發送。

    輸出

    卡卡網 的域名是 webkaka.com, 它的標題是 卡卡測速網 , 它創建于 2009 年。

    如果你嘗試使用apply發送完全相同的參數,則會發生以下情況:

    longDescribe.apply(webkaka, '卡卡測速網', 2009);

    輸出

    Uncaught TypeError: second argument to Function.prototype.apply must be an array

    對于apply,你必須傳遞數組中的所有參數。

    longDescribe.apply(webkaka, ['卡卡測速網', 2009]);

    輸出

    卡卡網 的域名是 webkaka.com, 它的標題是 卡卡測速網 , 它創建于 2009 年。

    單獨傳遞參數或以數組形式傳遞參數之間的區別是微妙的,但要注意這一點很重要。使用起來apply可能更簡單方便,因為如果某些參數細節發生變化,它不需要更改函數調用。

    this與bind方法

    callapply都是一次性使用的方法——如果你用this上下文調用方法,它會擁有它,但原始函數將保持不變。

    有時,你可能需要在另一個對象的this上下文中反復使用一個方法,在這種情況下,你可以使用bind方法創建一個具有顯式綁定this的全新函數。

    const webkaka = {
    name: '卡卡網',
    domainName: 'webkaka.com',
    }
    function describe() {
    console.log(`${this.name} 的域名是 ${this.domainName}`)
    }

    const Summary = describe.bind(webkaka);
    Summary();

    輸出

    卡卡網 的域名是 webkaka.com

    在這個例子中,每次你調用 Summary ,它總是會返回綁定到它的this原始值。嘗試將新this上下文綁定到它會失敗,因此你始終可以相信綁定函數返回你期望的this值。

    const webkaka = {
    name: '卡卡網',
    domainName: 'webkaka.com',
    }
    function describe() {
    console.log(`${this.name} 的域名是 ${this.domainName}`)
    }
    const Summary = describe.bind(webkaka);

    const webkaka2 = {
    name: '卡卡網',
    domainName: 'webkaka.com',
    }

    Summary.bind(webkaka2);
    Summary();

    輸出

    卡卡網 的域名是 webkaka.com

    盡管此示例嘗試Summary再次綁定,但它保留了第一次綁定時的原始this上下文。

    總結

    本文詳細介紹了JS里thiscall() apply()bind()的用法相同及區別,我們在使用時應該明白其中的含義,以免用錯方法而得不到期望的結果。

    參考文章

    標簽: this  call方法  apply方法  bind方法  
    • IT熱文
    • 站長推薦
    公与熄电影手婬之手,日本少妇毛多水多的视频,要看肉感BBwBBWBBWBBw高清
    <samp id="wiaeu"><label id="wiaeu"></label></samp>
  • <samp id="wiaeu"><label id="wiaeu"></label></samp>
    <samp id="wiaeu"></samp>
  • <samp id="wiaeu"><sup id="wiaeu"></sup></samp>