Javascript 新類

| | | | | |

JavaScript 基於原型。每次聲明一個對象時,都會創建一個原型屬性,它擴展了與該對象關聯的屬性和方法。

近年來,許多 JavaScript 開發人員一直在尋找方法來定位要嵌入的對象。在他們的代碼中設計對象。這在 JavaScript 中催生了一種新類型的對象,稱為擴展原型的類。

在本指南中,我們將討論什麼是類、使用它們的原因以及如何實現你的代碼中的類。我們將給出一個示例來幫助您開始使用類。

什麼是 JavaScript 類?

類是為對象聲明模型的一種方式。

如果你熟悉面向對象的編程語言,你就會知道它們高度依賴於類和對象。類就像數據類型的模板:它說明可以存儲哪些數據以及可以訪問哪些方法。一個對象就是這個類的一個實例。

一個類的例子是Book。這個類將包含哪些信息可以存儲在書籍上以及如何更改這些數據的藍圖。一個對象可以是一輛叫做慾望的有軌電車,它是一本單獨的書。

在 JavaScript 中,類就是我們所說的語法糖。類的語法很好,但它們不一定會添加新功能。

類通常用於現代 JavaScript 框架,例如 React 和 Next.js。

與函數有關的課程

如果您還記得這篇文章中的一件事,那就是這一點:類是非常正常的函數

類和函數表達式之間的唯一區別是它們的聲明方式,函數使用關鍵字 而類使用類 。技術上的關鍵字,您甚至可以不使用 class 關鍵字來聲明一個類

我們可以通過創建兩個函數並打印它們的原型來說它們是相同的。

p>

我們的類和函數表達式返回:

function()

function()

我們的兩個函數和類使用基於原型的相同弧讀數。

你如何定義一個類?這是一個很好的問題。

您可以使用 關鍵字定義一個類。一旦你定義了一個類,你可以使用構造函數 () 函數用默認值初始化它。

打開一個 JavaScript 控制台並粘貼這段代碼:

p>

這將創建一個名為 Book 的類。我們的類可以存儲我們在類構造方法中定義的兩個值,Title 和 Author。要創建此類的對象,我們可以使用以下代碼:

我們可以像檢索任何對像一樣檢索我們類的值,Äã,Äã:

我們的代碼返回:。在原型上使用類的優點之一是您可以在類中聲明方法。這意味著您不需要使用 prototype 語法來向現有函數添加新方法

我們來看這個例子:

我們已經聲明了一個名為 GetDetails () 的方法,該方法存在於我們的類中。這很好,因為它將我們所有的代碼組合在一起。我們調用我們的函數GetDetails():

我們的代碼返回:

一個叫做有軌電車的願望是田納西威廉姆斯寫的一本書

課程繼承

在任何面向對象的結構中,類可以從其他類繼承屬性。

繼承是指一個過程子類可以訪問父類的方法和數據。要從類繼承,您可以使用 Extend 關鍵字。創建一個 JavaScript 文件或打開 JavaScript 控制台並粘貼以下代碼:

我們創建了一個名為fiction 的類,它使用我們之前聲明為項目的書中的類。在我們的代碼中,我們使用 super() 關鍵字從父類的作者那裡繼承標題和值,即 Book。因此,我們定義了一個新屬性 fiction,其值默認設置為 true

我們將創建一個新的 fiction 類的對象。

我們的代碼返回:true。 fiction 類存儲一個名為 fiction 的元素,默認情況下為 true。如果我們嘗試從 Book 類的實例訪問該值,則不會返回任何內容。事實上,“fiction”可以在我們的小說類中訪問。

Getter 和 Setter

使用類時,您必須使用 getter 和 setter 函數。

Get 函數允許您檢索類的方法。 Setter 函數允許您更改類中特定元素的值。這些函數分別使用關鍵字 gettogether 表示

考慮以下代碼:

在這個例子中,我們聲明了兩個名為author的方法。其中一種方法允許我們檢索 author 的值;這是我們的 get 方法。另一種方法允許我們更改 author

我們可以使用以下代碼查看它的實際效果:

我們的代碼返回:Tennessee Williams

我們初始化了一個名為 tra m 的對象,並給出了標題 A Streetcar Named Desire。然後,我們使用我們在代碼中定義的作曲家獲得 authorTennessee Williams。最後,我們使用控制台打印出 author 值play 方法。

結論

雖然類不對應新的 JavaScript 功能,但如果你習慣了面向對象編程,它們使編寫函數更容易理解。

基於 JavaScript 原型的抽象設計類,使其看起來更加面向對象。 “看”這個詞至關重要,因為請記住,類就是函數。類只不過是語法糖。

您現在可以像 JavaScript 專家一樣開始使用類了!

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method