ES5之对象方法

最新推荐文章于 2022-08-10 15:32:39 发布

沁柠

最新推荐文章于 2022-08-10 15:32:39 发布

阅读量316

点赞数

本文链接：https://blog.csdn.net/weixin_45846241/article/details/106989208

版权

ES5简介

ECMAScript 5.1 (或仅 ES5) 是ECMAScript(基于JavaScript的规范)标准最新修正。与HTML5规范进程本质类似，ES5通过对现有JavaScript方法添加语句和原生ECMAScript对象做合并实现标准化。ES5还引入了一个语法的严格变种，被称为”严格模式(strict mode)”。ECMAScript 5 为 JavaScript 添加了大量新的对象方法。

ES5 新的对象方法

// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)

// 添加或更改多个对象属性
Object.defineProperties(object, descriptors)

// 访问属性
Object.getOwnPropertyDescriptor(object, property)

// 以数组返回所有属性
Object.getOwnPropertyNames(object)

// 以数组返回所有可枚举的属性
Object.keys(object)

// 访问原型
Object.getPrototypeOf(object)

// 阻止向对象添加属性
Object.preventExtensions(object)

// 如果可将属性添加到对象，则返回 true
Object.isExtensible(object)

// 防止更改对象属性（而不是值）
Object.seal(object)

// 如果对象被密封，则返回 true
Object.isSealed(object)

// 防止对对象进行任何更改
Object.freeze(object)

// 如果对象被冻结，则返回 true
Object.isFrozen(object)

更改属性值

语法： Object.defineProperty(object, property, {value : value})


<h1>JavaScript Object.defineProperty()</h1>

<p>本例修改了一个属性值。</p>

<p id="demo"></p>

<script>
// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "EN" 
};
// 更改属性：
Object.defineProperty(person, "language", {value:"ZH"})
document.getElementById("demo").innerHTML = person.language;
</script>

更改元数据
ES5 允许更改以下属性元数据：

writable : true      // 属性值可修改
enumerable : true    // 属性可枚举
configurable : true  // 属性可重新配置
writable : false     // 属性值不可修改
enumerable : false   // 属性不可枚举
configurable : false // 属性不可重新配置

ES5 允许更改 getter 和 setter：

// 定义 getter
get: function() { return language }
// 定义 setter
set: function(value) { language = value }

此例使语言为只读：


Object.defineProperty(person, "language", {writable:false});

此例使语言不可枚举：


Object.defineProperty(person, "language", {enumerable:false});

获取所有属性
例：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Object.getOwnPropertyNames()</h1>

<p>此例列出了对象的属性。</p>

<p id="demo"></p>

<script>
// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "EN"
}
// 更改属性：
Object.defineProperty(person, "language", {enumerable:false});
// 显示属性：
document.getElementById("demo").innerHTML = Object.getOwnPropertyNames(person);
</script>

</body>
</html>

获取可枚举的属性
例：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Object.keys()</h1>

<p>此例列出了对象的可枚举属性。</p>

<p id="demo"></p>

<script>
// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "EN"
}
// 更改属性：
Object.defineProperty(person, "language", {enumerable:false});
// 显示属性：
document.getElementById("demo").innerHTML = Object.keys(person);
</script>

</body>
</html>

添加属性
例：

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Object.defineProperty()</h1>

<p>本例为对象添加了一个新属性。</p>

<p id="demo"></p>

<script>
// 创建对象：
var person = {
  firstName: "Bill",
  lastName : "Gates",
  language : "EN"
};
// 添加属性：
Object.defineProperty(person, "year", {value:"2019"})
document.getElementById("demo").innerHTML = person.year;
</script>

</body>
</html>