ECMAScript 5(ES5)是2009年引入的语言的重要修订版。它增加了许多对象方法到JavaScript中,这些方法用于操作和保护对象。这些方法为我们提供了有效遍历对象属性、操作值以及对对象执行各种操作的方式。对象操作是JavaScript编程的基本方面。
JavaScript ES5 对象方法
在 ES5 中,添加了与对象相关的方法来操作和保护对象。下表列出了这些对象方法及其描述:
操纵对象的方法
序号 |
方法 |
描述 |
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 中 Object.create() 方法的语法如下:
Object.create(proto, propertiesObject)
Object.create() 方法的参数如下:
-
-
propertiesObject
(可选) - 定义新对象属性的对象。
示例
在下面的示例中,使用 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.defineProperty() 方法定义对象的单一属性或更新属性值和元数据。这是一个静态方法。
JavaScript 中 Object.defineProperty() 方法的语法如下:
Object.defineProperty(obj, prop, descriptor)
Object.defineProperty() 方法的参数如下:
-
-
prop
(字符串或符号) - 要定义或修改的属性名称。
-
示例
下面的示例包含 car 对象的品牌、型号和价格属性。我们使用 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() 方法的参数如下:
-
-
props
(字符串或符号) - 要定义或修改的属性名称。
示例
在下面的示例中,我们使用 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 对象。
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);
document.getElementById("output").innerHTML = obj.prop;
</script>
</body>
</html>
输出:
23
JavaScript Object.seal() 方法
JavaScript 中的 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);
Object.freeze(person);
document.getElementById("output2").innerHTML += Object.isFrozen(person);
</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);
Object.seal(person);
document.getElementById("output2").innerHTML += Object.isSealed(person);
</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);
Object.preventExtensions(person);
document.getElementById("output2").innerHTML += Object.isExtensible(person);
</script>
</body>
</html>
输出:
true
false