event、this、 that 和 window

  • event 代表當前觸發(fā)的事件對象。它是一個 JavaScript原生對象,包含有關(guān)事件的信息,例如事件類型、目標元素、鼠標位置等。通過訪問event 對象,可以獲取和修改這些信息,例如:
function handleClick(event) {
  console.log('Event type:', event.type);
  console.log('Target element:', event.target);
  console.log('Mouse position:', event.clientX, event.clientY);
}

  • this 代表當前執(zhí)行上下文中的當前對象。在不同的執(zhí)行上下文中,this 可以指向不同的對象。例如,當你在對象方法中使用this 時,它將指向該對象,例如:
var person = {
  name: 'Alice',
  sayHello: function() {
    console.log('Hello, my name is', this.name);
  }
};

person.sayHello(); // Hello, my name is Alice

this 是一個在運行時確定的關(guān)鍵字,它通常指向當前執(zhí)行上下文中的當前對象。在不同的執(zhí)行上下文中,this 可以指向不同的對象。

  • that 通常用作一個變量名,它是在函數(shù)作用域中保存 this 引用的一個常用技巧。這是因為在 JavaScript 中,this 的值會根據(jù)執(zhí)行上下文的不同而改變,可能會導致一些意想不到的錯誤。通過使用 that 可以解決這個問題,例如:
var person = {
  name: 'Alice',
  sayHello: function() {
    var that = this;
    setTimeout(function() {
      console.log('Hello, my name is', that.name);
    }, 1000);
  }
};

person.sayHello(); // Hello, my name is Alice

由于setTimeout() 方法會創(chuàng)建一個新的執(zhí)行上下文,如果不使用 that 來保存this,在內(nèi)部函數(shù)中,this 的值將不再是對象person,而是全局對象或undefined,導致錯誤的結(jié)果。通過使用 that,可以在內(nèi)部函數(shù)中訪問 person 對象,并正確地打印出 "Hello, my name is Alice"。

  • window 是瀏覽器中的全局對象,它包含了瀏覽器中所有的全局屬性和方法。在瀏覽器中,所有的 JavaScript 代碼都運行在一個全局的上下文中,該上下文中的 this 默認指向window 對象。例如:
console.log(this === window); // true

它們都指向同一個對象,所以這個比較表達式的結(jié)果是 true

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 函數(shù)和對象 1、函數(shù) 1.1 函數(shù)概述 函數(shù)對于任何一門語言來說都是核心的概念。通過函數(shù)可以封裝任意多條語句,而且...
    道無虛閱讀 4,950評論 0 5
  • 1. undefined 和 null 有什么區(qū)別? 相似之處: 它們屬于 JavaScript 的 7 種基本類...
    耶啵_閱讀 347評論 0 0
  • 1.數(shù)據(jù)類型 1.1概念篇 7種原始數(shù)據(jù)類型 引用類型 null是對象嗎?為什么? 結(jié)論: null不是對象 解釋...
    859z閱讀 456評論 0 0
  • javaScript 基礎鞏固之閉包來實例化對象 在 JavaScript 中,我們可以很簡單的創(chuàng)建兩個完全獨立的...
    人話博客閱讀 365評論 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 28,825評論 1 45

友情鏈接更多精彩內(nèi)容