Javascript 简明教程

JavaScript - ES5 Object Methods

JavaScript 中的 ES5 Object methods 用于操作和保护对象。ECMAScript 5 (ES5) 是 2009 年引入的语言的重要修订版。它已向 JavaScript 添加了许多对象方法。

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

JavaScript ES5 Object Methods

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

Methods to Manipulate the Object

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

Sr.No.

Method

Description

create()

创建具有指定原型对象的新对象。

defineProperty()

克隆对象以将与它相关的属性新添到其原型中。

defineProperties()

将属性定义到某个特定对象并获取更新后的对象。

getOwnPropertyDescriptor()

获取对象特性的属性描述符。

getOwnPropertyNames()

To get object properties.

getPrototypeOf()

获取对象的原型。

keys()

以数组格式获取对象的所有键。

Methods to Protect the Object

Sr.No.

Method

Description

freeze()

冻结对象以防止添加或更新对象属性。

seal()

To seal the object.

isFrozen()

检查对象是否已被冻结。

isSealed()

检查对象是否已被密封。

isExtensible()

检查对象是否可扩展。

keys()

以数组格式获取对象的所有键。

preventExtensions()

阻止更新对象的原型。

让我们在几个示例的帮助下理解上面列出的每种方法——

JavaScript Object.create() Method

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

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

Object.create(proto, propertiesObject)

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

proto − 它用作新对象的原型对象。
propertiesObejct (optaional) − 它定义新对象的属性的对象。

Example

在下面的示例中，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() Method

您可以使用 Object.definedProperty() 方法定义对象的单个属性或更新该属性的值和元数据。它是 JavaScript 中的一个静态方法。

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

Object.defineProperty(obj, prop, descriptor)

Object.defineProperty() 方法的参数如下：

obj - 要定义或修改属性的对象。
prop (string or symbol) - 要定义或修改的属性名称。
descriptor - 定义属性属性的对象。

Example

以下示例包含汽车对象的 brand、model 和 price 属性。我们使用 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() Method

JavaScript 中的 Object.defineProperties() 方法是一个静态方法，可以定义对象的属性或修改属性。

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

Object.defineProperties(obj, props)

Object.defineProperties() 方法的参数如下：

obj - 要定义或修改属性的对象。
prop (string or symbol) - 要定义或修改的属性名称。

Example

在以下示例中，我们使用 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() Method

JavaScript 中的 Object.getOwnPropertyDescriptor() 方法返回一个指定对象属性的属性描述符。返回的属性描述符是一个 JavaScript 对象。

Example

尝试以下示例：

<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() Method

JavaScript 中的 Object.getOwnPropertyNames() 方法返回给定对象中所有属性的数组。这包括可枚举和不可枚举属性。

Example

在以下示例中，我们使用 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() Method

JavaScript 中的 Object.getPrototypeOf() 方法返回指定对象的原型。它是 ES5 中添加的静态 JavaScript 方法。

Example

<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"}

JavaScrip Object.keys() Method

Object.keys() 方法在 javaScript 中把对象作为参数并且返回一个包含对象自己的可枚举属性名称的数组。

<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() Method

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>

JavaScript Object.seal() Method

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>

JavaScript Object.isFrozen() Method

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() Method

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() Method

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() Method

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