JavaScript - ES5 对象方法

上一页
下一页

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

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

JavaScript ES5 对象方法

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

操作对象的方法

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

Sr.No. 方法 描述
1 create() 使用指定的原型对象创建新对象。
2 defineProperty() 克隆对象并向其原型添加新属性。
3 defineProperties() 将属性定义到特定对象中并获取更新的对象。
4 getOwnPropertyDescriptor() 获取对象属性的属性描述符。
5 getOwnPropertyNames() 获取对象属性。
6 getPrototypeOf() 获取对象的原型。
7 keys() 以数组格式获取对象的所有键。

保护对象的方法

Sr.No. 方法 描述
1 freeze() 防止通过封装对象来添加或更新对象属性。
2 seal() 封装对象。
3 isFrozen() 检查对象是否已封装。
4 isSealed() 检查对象是否封装。
5 isExtensible() 检查对象是否可扩展。
6 keys() 以数组格式获取对象的所有键。
7 preventExtensions() 防止对象的原型更新.

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

JavaScript Object.create（） 方法

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

JavaScript 中 Object.create（） 方法的语法如下 –


 Object.create(proto, propertiesObject)

Object.create（） 方法中的参数如下 -

  • proto - 用作新对象原型的对象。
  • propertiesObejct （optaional） - 一个定义新对象属性的对象。
例

在下面的示例中，使用 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 中的Static（静态）方法。

JavaScript 中 Object.definedProperty（） 方法的语法如下 -


 Object.defineProperty(obj, prop, descriptor)

Object.definedProperty（） 方法中的参数如下 -

  • obj − 它是要定义或修改属性的对象。
  • prop （字符串或符号） − 它是要定义或修改的属性的名称。
  • descriptor − 它是一个定义属性属性的对象。
例

以下示例包含 car 对象的 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（） 方法

JavaScript 中的 Object.defineProperties（） 方法是一种Static（静态）方法。，用于定义对象的新属性或修改属性。

JavaScript 中 Object.defineProperties（） 方法的语法如下：


 Object.defineProperties(obj, props)

Object.defineProperties（） 方法中的参数如下 -

  • obj − 它是要定义或修改属性的对象。
  • prop （字符串或符号） − 它是要定义或修改的属性的名称。
例

在下面的示例中，我们使用 Object.defineProperties（） 方法添加两个名为 property1 和 property2 的 mew 属性。property1 是可写的，property2 是不可写的。


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

	 	 const object1 = {};

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

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

输出

Property1 : 42
Property2 : qikepu com

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

JavaScrip 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.isSeal（） 方法用于检查给定的对象是否被封装。如果对象是封装的，则返回 true，否则它会重新显示。


<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
打印本页
上一页
下一页