JavaScript - ES5 物件方法

上一頁
下一頁

JavaScript 中的ES5 物件方法用於操作和保護物件。ECMAScript 5 (ES5) 是該語言在 2009 年釋出的一個重要修訂版本。它為 JavaScript 添加了許多物件方法。

這些方法為我們提供了有效的方法來迭代物件屬性、操作值以及對物件執行各種操作。物件操作是 JavaScript 程式設計的一個基本方面。

JavaScript ES5 物件方法

在 ES5 中，添加了與物件相關的許多方法來操作和保護物件。下表重點介紹了物件方法及其描述：

操作物件的方法

JavaScript 包含內建的建構函式，我們已將其列在下表中。

序號 方法 描述
1 create() 使用指定的原型物件建立新物件。
2 defineProperty() 克隆物件並將新屬性新增到其原型。
3 defineProperties() 將屬性定義到特定物件中並獲取更新後的物件。
4 getOwnPropertyDescriptor() 獲取物件屬性的屬性描述符。
5 getOwnPropertyNames() 獲取物件屬性。
6 getPrototypeOf() 獲取物件的原型。
7 keys() 以陣列格式獲取物件的所有鍵。

保護物件的方法

序號 方法 描述
1 freeze() 透過凍結物件來防止新增或更新物件屬性。
2 seal() 密封物件。
3 isFrozen() 檢查物件是否已凍結。
4 isSealed() 檢查物件是否已密封。
5 isExtensible() 檢查物件是否可擴充套件。
6 keys() 以陣列格式獲取物件的所有鍵。
7 preventExtensions() 防止物件的原型更新。

讓我們藉助一些示例來了解上面列出的每種方法：

JavaScript Object.create() 方法

JavaScript Object.create() 方法使用指定的原型物件和屬性建立一個新物件。它是 JavaScript 中的靜態方法。

JavaScript 中 Object.create() 方法的語法如下：

Object.create(proto, propertiesObject)

Object.create() 方法中的引數如下：

  • proto − 用作新物件原型的物件。

  • propertiesObject (可選) − 定義新物件屬性的物件。

示例

在下面的示例中，student 物件使用 person 物件作為其原型建立。

<html>
<body>
  <div id = "output"> </div>
  <script>  
    const person = {
      firstName: "John",
      lastName: "Doe"
    };

    const student = Object.create(person);
    student.age = 18;
    
    document.getElementById("output").innerHTML = 
    student.firstName + "<br>" +
    student.lastName + "<br>" +
    student.age;  

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

輸出

John
Doe
18

JavaScript Object.defineProperty() 方法

您可以使用 Object.defineProperty() 方法定義物件的單個屬性或更新屬性值和元資料。它是 JavaScript 中的靜態方法。

JavaScript 中 Object.defineProperty() 方法的語法如下：

Object.defineProperty(obj, prop, descriptor)

Object.defineProperty() 方法的引數如下：

  • obj − 要定義或修改屬性的物件。

  • prop (字串或符號) − 要定義或修改的屬性名稱。

  • descriptor − 定義屬性特性的物件。

示例

下面的例子包含汽車物件的品牌、型號和價格屬性。我們使用 defineProperty() 方法來定義物件中的 'gears' 屬性。

<html>
<body>
    <div id = "output">The obj object is - </div>
    <script>
        const car = {
            brand: "Tata",
            model: "Nexon",
            price: 1000000,
        }

        Object.defineProperty(car, "gears", {
            value: 6,
            writable: true,
            enumerable: true,
            configurable: true
        })
        
        document.getElementById("output").innerHTML += JSON.stringify(car);
    </script>
</body>
</html>

輸出

The obj object is - {"brand":"Tata","model":"Nexon","price":1000000,"gears":6}

JavaScript Object.defineProperties() 方法

JavaScript 中的 Object.defineProperties() 方法是一個靜態方法，用於定義物件的新的屬性或修改其屬性。

JavaScript 中 Object.defineProperties() 方法的語法如下：

Object.defineProperties(obj, props)

Object.defineProperties() 方法的引數如下：

  • obj − 要定義或修改屬性的物件。

  • prop (字串或符號) − 要定義或修改的屬性名稱。

示例

在下面的例子中，我們使用 Object.defineProperties() 方法新增兩個名為 property1 和 property2 的新屬性。property1 可寫，property2 不可寫。

<html>
<body>
  <div id = "output"> </div>
  <script>  

    const object1 = {};

    Object.defineProperties(object1, {
      property1: {
        value: 42,
        writable: true,
      },
      property2: {
      value: "Tutorials Point",
      writable: false,},
    });

    document.getElementById("output").innerHTML = 
    "Property1 : "  + object1.property1 + "<br>" +
    "Property2 : "  + object1.property2;
    
  </script>
</body>
</html>

輸出

Property1 : 42
Property2 : Tutorials Point

JavaScript Object.getOwnPropertyDescriptor() 方法

JavaScript 中的 Object.getOwnPropertyDescriptor() 方法返回物件特定屬性的屬性描述符。返回的屬性描述符是一個 JavaScript 物件。

示例

請嘗試以下示例：

<html>
<body>
  <div id = "output"> </div>
  <script>  

    const object1 = {
      property1: 42,
    };

    const descriptor1 = Object.getOwnPropertyDescriptor(object1, 'property1');

    document.getElementById("output").innerHTML = 
    "descriptor configurable? : "  + descriptor1.configurable + "<br>" +
    "descriptor value : "  + descriptor1.value;

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

輸出

descriptor configurable? : true
descriptor value : 42

JavaScript Object.getOwnPropertyNames() 方法

JavaScript 中的 Object.getOwnPropertyNames() 方法返回給定物件中找到的所有屬性的陣列。這包括可列舉屬性和不可列舉屬性。

示例

在下面的例子中，我們使用 getOwnPropertyNames() 方法獲取建立物件的屬性名稱。

<html>
<body>
  <div id = "output"> </div>
  <script>  
    const obj = {
      a: 10,
      b: 20,
      c: 30,
    };
    document.getElementById("output").innerHTML = Object.getOwnPropertyNames(obj);
  </script>
</body>
</html>

輸出

a,b,c

JavaScript Object.getPrototypeOf() 方法

JavaScript 中的 Object.getPrototypeOf() 方法返回指定物件的原型。它是 ES5 中新增的靜態 JavaScript 方法。

示例

<html>
<body>
  <div id = "output"> </div>
  <script>  
    const prototype1 = {name: "John Doe"};
    const object1 = Object.create(prototype1);
    const prot = Object.getPrototypeOf(object1)
    document.getElementById("output").innerHTML = JSON.stringify(prot);
  </script>
</body>
</html>

輸出

{"name":"John Doe"}

JavaScript Object.keys() 方法

JavaScript 中的 Object.keys() 方法接受一個物件作為引數，並返回一個包含物件自身可列舉屬性名稱的陣列。

<html>
<body>
  <div id = "output"> </div>
  <script>  
     let person = {
       name: "John Doe",
       age: 20,
       profession: "Software Engineer"
      };

    document.getElementById("output").innerHTML = Object.keys(person);
  </script>
</body>
</html>

輸出

name,age,profession

JavaScript Object.freeze() 方法

JavaScript 中的 Object.freeze() 是一個靜態方法，用於凍結物件。凍結的物件不能再更改。不能新增新的屬性，也不能刪除現有的屬性。屬性的值也不能修改。

<html>
<body>
  <div id = "output"> </div>
  <script>  
    const obj = {
      prop: 23,
    };

    Object.freeze(obj);    
    // obj.prop = 33;
    // Throws an error in strict mode
    document.getElementById("output").innerHTML = obj.prop;
  </script>
</body>
</html>

輸出

23

JavaScript Object.seal() 方法

Object.seal() 靜態方法密封物件。在密封的物件中，不能新增新的屬性，也不能刪除屬性。

<html>
<body>
  <div id = "output"> </div>
  <script>  
    const obj = {
      property: 34,
    };

    Object.seal(obj);
    obj.property = 33;
    document.getElementById("output").innerHTML = obj.property;

    delete obj.property; // Cannot delete when sealed
    
    document.getElementById("output").innerHTML = obj.property;
  </script>
</body>
</html>

輸出

33

JavaScript Object.isFrozen() 方法

JavaScript 中的 Object.isFrozen() 方法如果給定物件已凍結則返回 true，否則如果物件未凍結則返回 false。

<html>
<body>
  <div id = "output1"> </div>
  <div id = "output2"> </div>
  <script>  
    const person = {
      age: 21,
    };
    document.getElementById("output1").innerHTML = Object.isFrozen(person);
    // Expected output: false
    Object.freeze(person);
    document.getElementById("output2").innerHTML += Object.isFrozen(person);
    // Expected output: true
  </script>
</body>
</html>

輸出

false
true

JavaScript Object.isSealed() 方法

JavaScript 中的 Object.isSealed() 方法用於檢查給定物件是否已密封。如果物件已密封，則返回 true，否則返回 false。

<html>
<body>
  <div id = "output1"> </div>
  <div id = "output2"> </div>
  <script>  
    const person = {
      name: "John Doe",
    };
    document.getElementById("output1").innerHTML = Object.isFrozen(person);
    // Expected output: false
    Object.seal(person);
    document.getElementById("output2").innerHTML += Object.isSealed(person);
    // Expected output: true
  </script>
</body>
</html>

輸出

false
true

JavaScript Object.preventExtensions() 方法

ES5 Object.preventExtensions() 方法用於防止物件的原型更新。它還可以防止向物件新增新屬性。

<html>
<body>
  <div id = "output"> </div>
  <script>  
    const person = {};
    Object.preventExtensions(person);
    try {
      Object.defineProperty(person, 'name', {
        value: "John Doe",
      });
    } catch (e) {
      document.getElementById("output").innerHTML =e;
    }
  </script>
</body>
</html>

輸出

它將產生以下輸出：

TypeError: Cannot define property name, object is not extensible

JavaScript Object.isExtensible() 方法

JavaScript Object.isExtensible() 方法用於檢查物件是否可擴充套件。如果給定物件可擴充套件，則返回 true，否則返回 false。如果可以向物件新增新屬性，則該物件是可擴充套件的。

<html>
<body>
  <div id = "output1"> </div>
  <div id = "output2"> </div>
  <script>  
    const person = {
      name: "John Doe",
    };
    
    document.getElementById("output1").innerHTML = Object.isExtensible(person);
    // Expected output: false
    Object.preventExtensions(person);
    document.getElementById("output2").innerHTML += Object.isExtensible(person);
    // Expected output: false
  </script>
</body>
</html>

輸出

true
false
列印頁面
上一頁
下一頁
廣告