JavaScript >> Javascript 文檔 >  >> Tags >> object

JavaScript 中的“this”關鍵字是什麼(面向對象編程)

'這個 ' JavaScript 中的關鍵字對某些人來說是一個令人困惑的概念——'this 的含義 ' 根據上下文變化。這篇文章解釋了“這個 '是。

什麼是面向對象編程

面向對象編程 是一種結構化代碼的方式,以便將數據組織到對象中 . JavaScript 支持面向對象的編程並提供各種工具來幫助實現它。

簡而言之,不是用一堆單獨的抽像變量來描述一個項目,而是將它們組合成一個代表該項目的對象。您還可以向對象添加函數以使其執行某些操作,例如更新存儲在對像中的值或與其他對象交互。

例如 ,如果您正在構建一個記錄您曾經擁有的所有汽車的應用程序,而不是使用單獨的變量來保存每輛汽車的所有品牌、型號、顏色等,那麼您就有一個汽車對象 它保存了一輛汽車的數據。這使得處理大量數據變得容易,並使您的應用程序更易於構建。如果您想獲取某輛車的所有信息,您可以抓取該對象並知道它包含您需要了解的有關該特定項目的所有信息。

範圍和上下文

雖然經常可以互換使用,但作用域上下文 略有不同。

一個範圍 定義變量訪問——應用程序當前部分的代碼是否可以訪問變量。例如,在函數內部聲明的變量不能在函數外部訪問,因為它們是不同的作用域 .

一個上下文, 但是,是正在運行的代碼的父對象。由於一個對象可以包含多個方法(即函數),因此每個方法都有不同的作用域 (函數本身)具有相同的上下文 (父對象)。

在此處查看有關變量和範圍的更多信息。

那麼這是什麼 ?

這個 是 JavaScript 中的關鍵字。就像使用任何變量一樣使用它。

這個您現在正在使用的這個對象,其中 this 是寫在代碼裡的 .也就是說,它指的是當前的上下文 .

如果您正在使用函數這個 指函數的父對象。如果您在一個對象中工作 , 這個 指對象。

JavaScript 將許多事物視為對象 ,所以這裡簡要介紹一下這個 指在每個場景中。

這個 在方法、函數、對象之外

如果這個 單獨使用,在任何父類、對象、函數之外,它指的是全局對象。

var testVar = 9;
console.log(this.testVar); // Prints 9

上面是一個全局變量 testVar 被定義為。證明這個 指的是全局對象,你可以嘗試訪問 this.testVar – 返回 9。

這個 在方法中(對象方法綁定)

JavaScript 中的對象屬於不同的類。類可以有方法 – 可以在給定類的每個對像上執行的函數來處理它。

為方法編寫代碼時,this 將始終引用對象。

例如:

class Car {
    constructor(make, model) {
        this.make = make;
        this.model = model;
    }
}

var fordCar = new Car('Ford', 'Model T');

上圖是一輛汽車 類已定義。然後可以使用此類創建對象。 構造函數 方法(一個函數)用於設置 Car 的值 類在創建時為變量 this 設置屬性 .

在這種情況下,一個名為 fordCar 的對象 被建造。當構造函數運行時,this 指的是福特汽車 對象並為其設置作為參數傳遞的品牌/型號值。

顯式函數綁定

可以更改這個 使用 call() 引用對象內部的方法 和 apply() 該對象的方法。 調用()apply() 是可供所有使用的內置 JavaScript 方法 任何類的對象。這兩種方法的工作方式相似,但在提供上下文後如何將附加參數傳遞給它們的方式不同。

class Car {
    constructor(make, model) {
        this.make = make;
        this.model = model;
    }

    // makeModel method will return the make of model of the current object
    makeModel(){
        return this.make + ' ' + this.model;
    }
}

var fordCar = new Car('Ford', 'Model T');
var toyotaCar = new Car('Toyota', 'Hilux');

fordCar.makeModel.call(toyotaCar);  // Will return "Toyota Hilux" - even though it was called from the fordCar model, as the call method changed the context
fordCar.makeModel.apply(toyotaCar);  // Will return "Toyota Hilux" - even though it was called from the fordCar model, as the apply method changed the context

這個 在函數中

如上所述,函數範圍 但不提供上下文 .因此,在沒有父對像或類的獨立函數中,this 將引用全局上下文。

var testVar = 9;

function testFunction(){
    console.log(this.testVar); // Prints 9
}

testFunction(); // Run the function defined above

函數和嚴格模式

嚴格模式 是一個可以在 JavaScript 中啟用的可選設置,它限制你做一些你通常可以做的事情。這些東西往往要么是將從 JavaScript 的未來修訂版中刪除的東西,要么是被認為是“草率”的東西——有效但以可能導致錯誤或難以解釋的方式編寫的代碼。

因此,在嚴格模式下,this 在獨立函數中使用時引用全局對象。它不引用任何東西,並且會返回 undefined .

'use strict';

var testVar = 9;

function testFunction(){
    console.log(this.testVar); // undefined
}

testFunction(); // Run the function defined above

這個 在 HTML 事件處理程序中

這個 從 HTML 元素的事件處理程序中調用,它指的是 HTML 元素本身。

<button onclick="console.log(this);">
    Print information on this HTML element
</button>

上面的 HTML 代碼將在

Tutorial JavaScript 教程
  1. 初學者的 Javascript

  2. Vue.js 組件介紹

  3. 最高值回文

  4. JavaScript class 和 Object 的實際例子通過製作一個待辦事項列表應用程序

  5. 構建 Twilio 應用程序以獲取 COVID-19 病例數

  6. 使用 NodeJS + Multer 上傳文件

  7. 自定義 React Hook 以動態獲取內容條目

  1. 教程地獄:逃生(第一部分)

  2. 使用 Javascript 檢查互聯網速度

  3. 雪碧動畫:吸血鬼小貓的生活

  4. (三.js)如何緩慢旋轉網格直到達到特定值

  5. 如何使用 Strapi、Nuxt (Vue) 和 Apollo 構建博客

  6. 經過 4 個月的求職和大量拒絕後,我是如何最終獲得全職職位的。

  7. 開發過程中自動填充條紋元素

  1. 學習Golang加解密

  2. 出版書籍:亞馬遜 Kindle(免費)

  3. 選擇 React Native 進行應用程序開發的 14 個理由

  4. JavaScript 中的異步代碼