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
打印页面
上一页
下一页
广告