<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里this的上下文對象及用法

    作者:admin    時間:2022-5-7 10:53:4    瀏覽:

    在 JavaScript 編程中,this 是經常用到的關鍵字。this 關鍵字是 JavaScript 中一個非常重要的概念,在 JavaScript 中,this 是對對象的引用。在本文中,我們將通過示例了解this基于上下文的隱式引用。

    下面是四個上下文對象,在里面,this的值能被隱式引用。

    全局上下文

    在全局上下文中,this指的是全局對象。當你在瀏覽器中工作時,全局上下文是window. 當你在 Node.js 中工作時,全局上下文是global。

    對于示例,你將在瀏覽器的開發者工具控制臺中練習代碼。如果你不熟悉在瀏覽器中運行 JavaScript 代碼,請閱讀如何使用瀏覽器開發者工具控制臺調試JavaScript。

    如果你在沒有任何其他代碼的情況下記錄this的值,你將看到對象this指的是什么。

    console.log(this)

    輸出

    Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

    可以看到thisWindow,它是瀏覽器的全局對象。

    你編寫一個頂級函數,或者一個不與任何對象關聯的函數,如下所示:

    function printThis() {
      console.log(this)
    }

    printThis()

    輸出

    Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

    即使在函數內,this仍然指的是Window,或全局對象。

    但是,當使用嚴格模式('use strict')時,全局上下文中函數內的this上下文將為undefined。

    'use strict'

    function printThis() {
      console.log(this)
    }

    printThis()

    輸出

    undefined

    通常,使用嚴格模式('use strict')來降低this出現意外范圍的可能性會更安全。

    對象方法

    方法是對象上的函數,或對象可以執行的任務,函數使用this引用對象的屬性。

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

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

    webkaka.describe()

    webkaka是對象,describe()是方法,它是webkaka對象里的一個函數,該函數使用了this引用webkak對象的兩個屬性:namedomainName。

    輸出

    "卡卡網 的域名是 www.organiccannabisseed.com"

    在本例中,thiswebkaka 相同。

    函數構造函數

    當你使用new關鍵字時,它會創建構造函數或類的實例。函數構造函數是初始化用戶定義對象的標準方法。

    function Webkaka(name, domainName) {
      this.name = name;
      this.domainName= domainName;

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

    const myweb = new Webkaka('卡卡網', 'www.organiccannabisseed.com');

    myweb.describe();

    輸出

    "卡卡網 的域名是 www.organiccannabisseed.com"

    在此上下文中,this綁定到Webkaka的實例,該實例包含在myweb常量中。

    類構造函數

    類的構造函數的作用與函數的構造函數相同。

    class Webkaka{
      constructor(name, domainName)
      {
        this.name = name;
        this.domainName = domainName;
      }
      describe = function()
      {
        console.log(`${this.name} 的域名是 ${this.domainName}`);
      }
    }
    const webkaka = new Webkaka('卡卡網', 'www.organiccannabisseed.com');
    webkaka.describe();

    輸出

    "卡卡網 的域名是 www.organiccannabisseed.com"

    DOM 事件處理程序

    在瀏覽器中,事件處理程序有一個特殊的this上下文。在由addEventListener調用的事件處理程序中,this將引用event.currentTarget,通常情況下,開發人員會簡單地使用event.targetevent.currentTarget根據需要訪問 DOM 中的元素,但由于this引用在此上下文中會發生變化,因此了解這一點很重要。 

    在下面的示例中,我們將創建一個按鈕,向其添加文本,并將其附加到DOM中。當我們在事件處理程序中記錄this的值時,它將打印目標。

    const button = document.createElement('button');
    button.textContent = '點擊我';
    document.body.append(button);

    button.addEventListener('click', function (event) {
      console.log(this);
    })

    輸出

    <button>點擊我</button>

    將其粘貼到瀏覽器中后,你會在頁面上看到一個按鈕,上面寫著“點擊我”。如果單擊按鈕,你將看到<button>點擊我</button>出現在控制臺中,因為單擊按鈕會記錄元素,即按鈕本身。因此,如你所見,this指的是目標元素,也就是我們添加了事件監聽器的元素。

    注意:此代碼要放在<body></body>標簽之后,否則會報錯:document.body is null。

    總結

    在前面的所有示例中, this的值是由其上下文決定的——它是全局的、在對象中、在構造函數或類中,還有在 DOM 事件處理程序上。

    通過學習該文,你應該了解了JavaScript中this關鍵字的概念及其具體用法,它是基于上下文的隱式引用。

    相關文章

    標簽: this  
    相關文章
      • 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>