JavaScript - 物件概述

上一頁
下一頁

JavaScript 物件

JavaScript 的物件是一種非原始資料型別，用於以鍵值對的形式儲存資料。鍵值對通常稱為屬性。鍵值對中的鍵，也稱為“屬性名”，是一個字串，而值可以是任何東西。如果屬性的值是一個函式，則該屬性被稱為方法。

物件使用花括號建立，每個屬性之間用逗號分隔。每個屬性都寫成屬性名後跟冒號 (:) 後跟屬性值。鍵值對在物件中不是按特定順序儲存的。因此，物件是屬性的無序集合，寫成鍵值對。

JavaScript 是一種面向物件程式設計 (OOP) 語言。如果一種程式語言為開發者提供了四種基本功能，則可以稱之為面向物件的。

  • 封裝 - 將相關資訊（無論是資料還是方法）儲存在一個物件中的能力。

  • 抽象 - 將物件實現細節隱藏起來的能力。

  • 繼承 - 一個類依賴於另一個類（或多個類）的一些屬性和方法的能力。

  • 多型 - 編寫一個可以在各種不同方式下工作的函式或方法的能力。

讓我們詳細瞭解一下 JavaScript 物件。

物件屬性

物件屬性可以是任何基本資料型別、物件或函式。物件屬性通常是物件方法內部使用的變數，但也可以是全域性可見的變數，在整個頁面中使用。

向物件新增屬性的語法如下：

objectName.objectProperty = propertyValue;

例如 - 以下程式碼使用document物件的"title"屬性獲取文件標題。

var str = document.title;

物件方法

方法是允許物件執行某些操作或允許對物件執行某些操作的函式。函式和方法之間有一個細微的差別——函式是語句的獨立單元，而方法附加到物件上，並且可以透過this關鍵字引用。

方法可用於所有操作，從將物件的內容顯示到螢幕到對一組本地屬性和引數執行復雜的數學運算。

例如 - 以下是一個簡單的示例，演示如何使用document物件的write()方法在文件上寫入任何內容。

document.write("This is test");

建立新物件

所有使用者定義的物件和內建物件都是名為 Object 的物件的子代。

我們可以使用物件字面量來建立一個新的使用者定義的物件。或者，我們可以建立一個建構函式，然後使用 new 關鍵字呼叫此函式來例項化一個物件。

在 JavaScript 中建立物件有不同的方法。在這裡，我們將學習以下所有方法。

  • 使用物件字面量

  • 使用物件建構函式

  • 使用 Object.create() 方法

  • 使用 JavaScript ES6 類

JavaScript 物件字面量

在 JavaScript 中，'{}' 由物件字面量表示。您可以在花括號之間新增鍵值對來定義物件。

您可以按照以下語法使用物件字面量來定義物件。

const obj = {
   key: val,
}

您可以在花括號之間新增鍵值對。每個鍵值對用逗號分隔，您需要在鍵和值之間新增冒號 (:)。

示例

在下面的示例中，我們定義了一個包含 4 個屬性的 wall 物件。每個屬性包含不同資料型別的不同值。

在輸出中，您可以觀察到物件屬性及其值。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const myBook = {
         title: "Perl",
         author: "Mohtashim",
         pages: 355,
      }
      document.getElementById("output").innerHTML =
      "Book name is : " + myBook.title + "<br>"
      +"Book author is : " + myBook.author + "<br>"
      +"Total pages : " + myBook.pages;
   </script>
</body>
</html>

輸出

Book name is : Perl
Book author is : Mohtashim
Total pages : 355

JavaScript new 運算子

new 運算子用於建立物件的例項。要建立物件，new 運算子後跟構造方法。

在下面的示例中，建構函式方法為 Object()、Array() 和 Date()。這些建構函式是內建的 JavaScript 函式。

var employee = new Object();
var books = new Array("C++", "Perl", "Java");
var day = new Date("August 15, 1947");

JavaScript Object() 建構函式

建構函式是一個建立並初始化物件的函式。JavaScript 提供了一個名為 Object() 的特殊建構函式來構建物件。Object() 建構函式的返回值被賦值給一個變數。

該變數包含對新物件的引用。分配給物件的屬性不是變數，並且沒有使用 var 關鍵字定義。

示例

嘗試以下示例；它演示瞭如何建立一個物件。

<html>
<body>  
   <p id = "output"> </p>
   <script>
      var book = new Object();   // Create the object
      book.subject = "Perl";     // Assign properties to the object
      book.author  = "Mohtashim";
      document.getElementById("output").innerHTML = 
      "Book name is : " + book.subject + "<br>" + 
      "Book author is : " + book.author;
   </script>   
</body>
</html>

輸出

Book name is : Perl
Book author is : Mohtashim

JavaScript 建構函式

在 JavaScript 中，您可以定義一個自定義函式並將其用作建構函式來定義一個新物件。在這裡，自定義函式充當模板。

與 Object() 建構函式相比，自定義使用者定義的建構函式的優點是您可以根據需要向自定義函式新增引數。

下面是使用自定義使用者定義的建構函式建立物件的簡單語法。

// Object template
function ConstructorFunc(para) {
    this.para = para;
}
const obj = new ConstructorFunc(arg);

ConstructorFunc() 函式充當物件模板。它使用 'this' 關鍵字訪問函式的上下文並在函式上下文中定義鍵。此外，鍵初始化為 'para' 值。

接下來，您可以使用帶有 'new' 關鍵字的函式作為建構函式來定義物件並將所需的引數傳遞給建構函式。

示例

此示例演示瞭如何使用使用者定義的建構函式建立物件。這裡 this 關鍵字用於引用已傳遞給函式的物件。

<html>
<body>   
   <div id = "output"> </div>
   <script>
      function Book(title, author) {
         this.title = title; 
         this.author  = author;
      }
      const myBook = new Book("Perl", "Mohtashim");
      document.getElementById("output").innerHTML = 
      "Book title is : " + myBook.title + "<br>" +
      "Book author is : " + myBook.author + "<br>";
   </script>      
</body>
</html>

輸出

Book title is : Perl
Book author is : Mohtashim

JavaScript Object.create() 方法

Object.create() 方法根據已定義的物件建立一個新物件。此外，在使用 Object.create() 方法從另一個物件克隆一個物件時，您還可以向物件原型新增一些新屬性。

請按照以下語法使用 Object.create() 方法定義新物件。

const obj = Object.create({}, {
    key: { value: val },
})

  • {} - 它是一個空物件。Object.create() 方法建立它的副本。

  • { key: { value: val }, } - 它是一個包含要新增到克隆物件原型的屬性的物件。

示例

在下面的示例中，我們向空物件的原型添加了多個屬性。但是，如果您列印該物件，您將無法看到任何屬性，因為它們已新增到原型中。

您可以使用點表示法訪問物件屬性。

<html>
<body>
   <p id = "output"> </p>
   <script>
      const myBook = Object.create({}, {
         title: { value: "Perl" },
         author: { value: "Mohtashim" },
      })
        
      document.getElementById("output").innerHTML = 
      "Book title is : " + myBook.title + "<br>" + 
      "Book author is : " + myBook.author + "<br>";

   </script>
</body>
</html>

輸出

Book title is : Perl
Book author is : Mohtashim

JavaScript ES6 類

JavaScript 類在 ES6 中引入。JavaScript 類是建立物件的模板。類使用“class”關鍵字定義。在定義類時，它類似於函式。“class”關鍵字後跟類名，然後是類體。

class MyClass{
  //class body
}

您可以使用 new 運算子使用類建立物件 -

const myObj = new MyClass();

這裡 ClassName 是類的名稱，myObject 是使用此類建立的物件的名稱。

我們在下一章詳細討論了 JavaScript 類。

為物件定義方法

前面的示例演示了建構函式如何建立物件並分配屬性。但我們需要透過為其分配方法來完成物件的定義。

示例

嘗試以下示例；它顯示瞭如何新增函式以及物件。

<html>   
  <head>
    <title>User-defined objects</title>
    <script>
      // Define a function which will work as a method
      function addPrice(amount) {
        this.price = amount; 
      }

      function Book(title, author) {
        this.title = title;
        this.author  = author;
        this.addPrice = addPrice;  // Assign that method as property.
      }
    </script>      
  </head>

  <body>   
    <div id = "output"> </div>
    <script>
      var myBook = new Book("Perl", "Mohtashim");
      myBook.addPrice(100);

      document.getElementById("output").innerHTML = 
      "Book title is : " + myBook.title + "<br>"
      +"Book author is : " + myBook.author + "<br>"
      +"Book price is : " + myBook.price + "<br>";
    </script>      
  </body>
</html>

輸出

Book title is : Perl 
Book author is : Mohtashim 
Book price is : 100

with 關鍵字

‘with’ 關鍵字用作引用物件屬性或方法的簡寫。

指定為 with 引數的物件成為後續程式碼塊持續時間內的預設物件。可以不命名物件即可使用該物件的屬性和方法。

語法

with 物件的語法如下 -

with (object) {
   properties used without the object name and dot
}

示例

嘗試以下示例。

<html>
<head>
  <script>
    // Define a function which will work as a method
    function addPrice(amount) {
      with(this) {
        price = amount;
      }
    }
    function Book(title, author) {
      this.title = title;
      this.author = author;
      this.price = 0;
      this.addPrice = addPrice;  // Assign that method as property.
    }
  </script>      
</head>
<body>   
  <div id = "output"></div>
  <script>
    var myBook = new Book("Perl", "Mohtashim");
    myBook.addPrice(100);
         
    document.getElementById("output").innerHTML = 
    "Book title is : " + myBook.title + "<br>"
    +"Book author is : " + myBook.author + "<br>"
    +"Book price is : " + myBook.price + "<br>";
    
  </script>      
</body>
</html>

輸出

Book title is : Perl 
Book author is : Mohtashim 
Book price is : 100

JavaScript 原生物件

JavaScript 有幾個內建或原生物件。這些物件可以在程式的任何地方訪問，並且在任何瀏覽器中執行在任何作業系統上都將以相同的方式工作。

以下是所有重要的 JavaScript 原生物件的列表 -

JavaScript 物件方法

這裡，我們列出了 JavaScript 物件的方法。

靜態方法

這些方法使用 Object 類本身呼叫。

序號 方法 描述
1 assign() 將屬性及其值從一個物件複製到另一個物件。
2 create() 使用現有物件作為原型建立新物件。
3 defineProperty() 克隆物件並向其原型新增新屬性。
4 defineProperties() 將屬性定義到特定物件中並獲取更新後的物件。
5 entries() 它返回一個包含 [鍵，值] 對的陣列。
6 freeze() 透過凍結物件來防止新增或更新物件屬性。
7 fromEntries() 根據 [鍵，值] 對的陣列建立新物件。
8 getOwnPropertyDescriptor() 獲取物件屬性的屬性描述符。
9 getOwnPropertyNames() 獲取物件屬性。
10 getOwnPropertySymbols() 獲取物件中以陣列形式存在的全部符號。
11 getPrototypeOf() 獲取物件的原型。
12 hasOwn() 檢查特定屬性是否存在於物件中。
13 Object.is() 檢查兩個物件是否包含類似的值。
14 isExtensible() 檢查物件是否可擴充套件。
15 isFrozen() 檢查物件是否已凍結。
16 isSealed() 檢查物件是否已密封。
17 keys() 以陣列格式獲取物件的所有鍵。
18 preventExtensions() 防止物件原型的更新。
19 seal() 密封物件。
20 setPrototypeOf() 設定物件的原型。
21 toLocaleString() 以字串格式獲取物件。
22 values() 以陣列格式獲取物件的所有值。

例項方法

這些方法使用物件的例項呼叫。

序號 方法 描述
1 defineGetter() 定義 getter 以獲取特定屬性值。
2 hasOwnProperty() 檢查物件是否具有特定屬性作為其自身屬性。
3 isPrototypeOf() 檢查特定物件是否作為另一個物件的原型存在。
4 propertyIsEnumerable() 檢查物件的屬性是否可列舉。

物件屬性

序號 屬性 描述
1 constructor 獲取對物件建構函式的引用。
列印頁面
上一頁
下一頁
廣告