JavaScript - ES5 对象方法

JavaScript 中的 ES5 对象方法 用于操作和保护对象。ECMAScript 5 (ES5) 是 2009 年推出的 JavaScript 语言的一次重大修订。它为 JavaScript 添加了众多对象方法。

这些方法为我们提供了高效的方法来遍历对象属性、操作值以及对对象执行各种操作。对象操作是 JavaScript 编程的一个基本方面。

JavaScript ES5 对象方法

在 ES5 中，添加了与对象相关的方法来操作和保护对象。下表重点介绍了对象方法及其说明 -

操作对象的方法

JavaScript 包含内置构造函数，我们已在下表中列出。

保护对象的方法

让我们借助一些示例来理解上面列出的每个方法 -

JavaScript Object.create() 方法

JavaScript Object.create() 方法使用指定的原型对象和属性创建一个新对象。它是 JavaScript 中的静态方法。

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

Object.create(proto, propertiesObject) 

Object.create() 方法中的参数如下:

• proto - 用作新对象原型的对象。

• propertiesObejct(可选) - 定义新对象属性的对象。

示例

在下面的示例中，使用 person 对象作为原型创建了 student 对象。

<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.definedProperty() 方法定义对象的单个属性或更新属性值和元数据。它是 JavaScript 中的一个静态方法。

JavaScript 中 Object.definedProperty() 方法的语法如下:-

Object.defineProperty(obj, prop, descriptor)

Object.definedProperty() 方法中的参数如下:-

• 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; // 密封时无法删除
    
    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.isSeal() 方法用于检查给定对象是否已密封。如果对象已密封，则返回 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