详解 JavaScript 的属性标志和属性描述符

最新推荐文章于 2023-12-12 08:22:59 发布
最新推荐文章于 2023-12-12 08:22:59 发布
阅读量437 收藏
点赞数
文章标签： java 编程语言 html redis python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leviding/article/details/110212695
版权

属性标志和属性描述符

我们知道，对象可以存储属性。

到目前为止，属性对我们来说只是一个简单的“键值”对。但对象属性实际上是更灵活且更强大的东西。

在本章中，我们将学习其他配置选项，在下一章中，我们将学习如何将它们无形地转换为 getter/setter 函数。

属性标志

对象属性（properties），除 value 外，还有三个特殊的特性（attributes），也就是所谓的“标志”：

  • writable —— 如果为 true，则值可以被修改，否则它是只可读的。

  • enumerable —— 如果为 true，则会被在循环中列出，否则不会被列出。

  • configurable —— 如果为 true，则此特性可以被删除，这些属性也可以被修改，否则不可以。

我们到现在还没看到它们，是因为它们通常不会出现。当我们用“常用的方式”创建一个属性时，它们都为 true。但我们也可以随时更改它们。

首先，让我们来看看如何获得这些标志。

Object.getOwnPropertyDescriptor[1] 方法允许查询有关属性的 完整 信息。

语法是：

let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);

obj：需要从中获取信息的对象。

propertyName：属性的名称。

返回值是一个所谓的“属性描述符”对象：它包含值和所有的标志。

例如：

let user = {
  name: "John"
};

let descriptor = Object.getOwnPropertyDescriptor(user, 'name');

alert( JSON.stringify(descriptor, null, 2 ) );
/* 属性描述符：
{
  "value": "John",
  "writable": true,
  "enumerable": true,
  "configurable": true
}
*/

为了修改标志，我们可以使用 Object.defineProperty[2]。

语法是：

Object.defineProperty(obj, propertyName, descriptor)

obj，propertyName：要应用描述符的对象及其属性。

descriptor：要应用的属性描述符对象。

如果该属性存在，defineProperty 会更新其标志。否则，它会使用给定的值和标志创建属性；在这种情况下，如果没有提供标志，则会假定它是 false。

例如，这里创建了一个属性 name，该属性的所有标志都为 false：

let user = {};

Object.defineProperty(user, "name", {
  value: "John"
});

let descriptor = Object.getOwnPropertyDescriptor(user, 'name');

alert( JSON.stringify(descriptor, null, 2 ) );
/*
{
  "value": "John",
  "writable": false,
  "enumerable": false,
  "configurable": false
}
 */

将它与上面的“以常用方式创建的” user.name 进行比较：现在所有标志都为 false。如果这不是我们想要的，那么我们最好在 descriptor 中将它们设置为 true。

现在让我们通过示例来看看标志的影响。

只读

让我们通过更改 writable 标志来把 user.name 设置为只读（user.name 不能被重新赋值）：

let user = {
  name: "John"
};

Object.defineProperty(user, "name", {
  writable: false
});

user.name = "Pete"; // Error: Cannot assign to read only property 'name'

现在没有人可以改变我们 user 的 name，除非它们应用自己的 defineProperty 来覆盖我们的 user 的 name。

只在严格模式下会出现 Errors

在非严格模式下，在对不可写的属性等进行写入操作时，不会出现错误。但是操作仍然不会成功。在非严格模式下，违反标志的行为（flag-violating action）只会被默默地忽略掉。

这是相同的示例，但针对的是属性不存在的情况：

let user = { };

Object.defineProperty(user, "name", {
  value: "John",
  // 对于新属性，我们需要明确地列出哪些是 true
  enumerable: true,
  configurable: true
});

alert(user.name); // John
user.name = "Pete"; // Error

不可枚举

现在让我们向 user 添加一个自定义的 toString。

通常，对象的内置 toString 是不可枚举的，它不会显示在 for..in 中。但是如果我们添加我们自己的 toString，那么默认情况下它将显示在 for..in 中，如下所示：

let user = {
  name: "John",
  toString() {
    return this.name;
  }
};

// 默认情况下，我们的两个属性都会被列出：
for (let key in user) alert(key); // name, toString

如果我们不喜欢它，那么我们可以设置 enumerable:false。之后它就不会出现在 for..in 循环中了，就像内建的 toString 一样：

let user = {
  name: "John",
  toString() {
    return this.name;
  }
};

Object.defineProperty(user, "toString", {
  enumerable: false
});

// 现在我们的 toString 消失了：
for (let key in user) alert(key); // name

不可枚举的属性也会被 Object.keys 排除：

alert(Object.keys(user)); // name

不可配置

不可配置标志（configurable:false）有时会预设在内建对象和属性中。

不可配置的属性不能被删除。

例如，Math.PI 是只读的、不可枚举和不可配置的：

let descriptor = Object.getOwnPropertyDescriptor(Math, 'PI');

alert( JSON.stringify(descriptor, null, 2 ) );
/*
{
  "value": 3.141592653589793,
  "writable": false,
  "enumerable": false,
  "configurable": false
}
*/

因此，开发人员无法修改 Math.PI 的值或覆盖它。

Math.PI = 3; // Error

// 删除 Math.PI 也不会起作用

使属性变成不可配置是一条单行道。我们无法使用 defineProperty 把它改回去。

确切地说，不可配置性对 defineProperty 施加了一些限制：

  1. 不能修改 configurable 标志。

  2. 不能修改 enumerable 标志。

  3. 不能将 writable: false 修改为 true（反过来则可以）。

  4. 不能修改访问者属性的 get/set（但是如果没有可以分配它们）。

"configurable: false" 的用途是防止更改和删除属性标志，但是允许更改对象的值。

这里的 user.name 是不可配置的，但是我们仍然可以更改它，因为它是可写的：

let user = {
  name: "John"
};

Object.defineProperty(user, "name", {
  configurable: false
});

user.name = "Pete"; // 正常工作
delete user.name; // Error

现在，我们将 user.name 设置为一个“永不可改”的常量：

let user = {
  name: "John"
};

Object.defineProperty(user, "name", {
  writable: false,
  configurable: false
});

// 不能修改 user.name 或它的标志
// 下面的所有操作都不起作用：
user.name = "Pete";
delete user.name;
Object.defineProperty(user, "name", { value: "Pete" });

Object.defineProperties

有一个方法 Object.defineProperties(obj, descriptors)[3]，允许一次定义多个属性。

语法是：

Object.defineProperties(obj, {
  prop1: descriptor1,
  prop2: descriptor2
  // ...
});

例如：

Object.defineProperties(user, {
  name: { value: "John", writable: false },
  surname: { value: "Smith", writable: false },
  // ...
});

所以，我们可以一次性设置多个属性。

Object.getOwnPropertyDescriptors

要一次获取所有属性描述符，我们可以使用 Object.getOwnPropertyDescriptors(obj)[4] 方法。

它与 Object.defineProperties 一起可以用作克隆对象的“标志感知”方式：

let clone = Object.defineProperties({}, Object.getOwnPropertyDescriptors(obj));

通常，当我们克隆一个对象时，我们使用赋值的方式来复制属性，像这样：

for (let key in user) {
  clone[key] = user[key]
}

……但是，这并不能复制标志。所以如果我们想要一个“更好”的克隆，那么 Object.defineProperties 是首选。

另一个区别是 for..in 会忽略 symbol 类型的属性，但是 Object.getOwnPropertyDescriptors 返回包含 symbol 类型的属性在内的 所有 属性描述符。

设定一个全局的密封对象

属性描述符在单个属性的级别上工作。

还有一些限制访问 整个 对象的方法：

Object.preventExtensions(obj)[5]：禁止向对象添加新属性。

Object.seal(obj)[6]：禁止添加/删除属性。为所有现有的属性设置 configurable: false。

Object.freeze(obj)[7]：禁止添加/删除/更改属性。为所有现有的属性设置 configurable: false, writable: false。

还有针对它们的测试：

Object.isExtensible(obj)[8]：如果添加属性被禁止，则返回 false，否则返回 true。

Object.isSealed(obj)[9]：如果添加/删除属性被禁止，并且所有现有的属性都具有 configurable: false则返回 true。

Object.isFrozen(obj)[10]：如果添加/删除/更改属性被禁止，并且所有当前属性都是 configurable: false, writable: false，则返回 true。

这些方法在实际中很少使用。

现代 JavaScript 教程：开源的现代 JavaScript 从入门到进阶的优质教程。React 官方文档推荐，与 MDN 并列的 JavaScript 学习教程[11]。

在线免费阅读：https://zh.javascript.info

参考资料

[1]

Object.getOwnPropertyDescriptor: https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptormdn

[2]

Object.defineProperty: https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

[3]

Object.defineProperties(obj, descriptors): https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperties

[4]

Object.getOwnPropertyDescriptors(obj): https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptors

[5]

Object.preventExtensions(obj): https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/preventExtensions

[6]

Object.seal(obj): https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/seal

[7]

Object.freeze(obj): https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

[8]

Object.isExtensible(obj): https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/isExtensible

[9]

Object.isSealed(obj): https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/isSealed

[10]

Object.isFrozen(obj): https://developer.mozilla.org/zh/docs/Web/JavaScript/Reference/Global_Objects/Object/isFrozen

[11]

React 官方文档推荐，与 MDN 并列的 JavaScript 学习教程: https://zh-hans.reactjs.org/docs/getting-started.html#javascript-resources

看完三件事

如果你觉得本文对你有帮助，我想请你帮个忙：

  1. 转发本文，点赞或者点个「在看」，是对我最大的认可和支持；

  2. 关注公众号「技术漫谈」，订阅更多精彩内容，获取更多学习资料；

  3. 公众号后台回复「加群」，加入算法和技术交流群，与更多读者交流。

 

LeviDing
关注
什么是 rest 参数？
weixin_47450807的博客
03-10 5873
一、什么是rest参数(…rest) ES6中引入rest参数(形式为'...变量名')，用于获取函数的多余参数。rest参数之后不能再有其他参数(即只 能是最后一个参数)。 二、函数的rest参数 1、rest参数是真正意义上的数组，可以使用数组的任何方法 ES5 function fn() { console.log(arguments) //[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4 } } fn(1,2,3,4) ES6 function f
ES6 系列：你不知道的 Rest 参数与 Spread 语法细节
LeviDing的博客
11-25 685
Rest 参数与 Spread 语法在 JavaScript 中，很多内建函数都支持传入任意数量的参数。例如：Math.max(arg1, arg2, ..., argN) —— 返回入...
ES6中扩展运算符(spread)和剩余运算符(rest)详解
MH.的博客
03-06 1966
原文链接 在ES6中。 三个点(...) 有2个含义。分别表示 扩展运算符 和 剩余运算符。写了几个demo测试。 /******************扩展运算符(spread)********************/ //demo 1 传递数据代替多个字符串的形式 function test(a,b,c){ console....
ES6 展开语法（Spread syntax）
会飞De琥珀
10-10 735
展开语法，属于es6的新语法，可以在函数调用、数组构造、构造字面量对象时, 将数据展开赋值。 1、函数调用，展开数组参数 function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers); 2、构造数组，展开数组 const arr1 = [3,4,5]; const arr...
ES6的rest参数与spread扩展运算符
Jadon_z的个人博客
09-02 235
S6的rest参数与spread扩展运算符
ECMAScript 5中的属性描述符详解
09-03
本文将深入探讨其中的关键概念，包括`Object.defineProperty`、数据描述符和存取描述符。 首先，`Object.defineProperty`是ECMAScript 5中用于定义或修改对象属性的方法。它的基本语法如下： ```javascript Object...
javascript动态创建对象的属性详解
10-17
- `configurable`定义是否可以删除属性或修改属性描述符的特性。 综上所述，JavaScript提供了多种方法来动态创建和定义对象属性，从而允许开发者在代码执行时根据需要灵活地操作对象。动态属性的创建是JavaScript...
javascript属性详解
04-09
1. `configurable`：如果为`true`，表示属性可以通过`delete`删除，且属性的描述符（除`value`和`writable`外）可变。 2. `enumerable`：如果为`true`，属性将出现在`for...in`循环中。 3. `writable`：如果为`...
JavaScript数组类型Array相关的属性与方法详解
10-14
JavaScript中的数组类型Array是编程中不可或缺的一部分，它允许开发者存储任意数量和类型的值，并提供了丰富的属性和方法来处理数组中的数据。以下是对标题和描述中提及的数组相关知识点的详细说明： 1. **数组的...
JavaScript属性描述对象详解与集控系统的应用
- `Object.getOwnPropertyDescriptor()`：用于获取指定对象的属性描述符，包括value（属性值）、writable（可写性）、enumerable（可枚举性）和configurable（可配置性）等元属性。 - `Object.getOwnPropertyNames...
ES6语法：rest&spread基本使用
qq_43641110的博客
09-05 250
spread与rest语法的基本使用与应用
ES6学习——新的语法：函数参数Spread
Challenge Next Challenge
12-23 5470
Spread操作符（...）是比较新的特性，但是在ES6的规范中，没有找到单独的章节对这个操作符进行说明，这个操作符主要用在两种情况下：函数传参和数组生成，这节主要讲解第一种情况。 规范的12.3.6.1中对函数参数列表的解释如下： ArgumentList : ... AssignmentExpression 1. Let list be an empty List. 2. Le
ES6之后 --- spread 或 rest 运算符
SoulRonin
10-16 209
ES6之后 — spread 或 rest 运算符 … ES6 引入了一个新的运算符 …，通常称为 spread 或 rest（展开或收集）运算符，取决于它在哪 / 如何使用。 用在数组（实际上是任何iterable）之前，把这个变量展开为各个独立的值 function foo (x, y, z) { console.log(x, y, z) } foo(...[1, 2, 3]) // 1 2 3 // 替代之前ES6之前apply(..)的写法 foo.apply(null, [1, 2, 3
JS语法之：rest参数
热门推荐
王同学Leo的专栏
11-20 1万+
《JavaScript高级程序设计》在讲Function类型时说： 说起来ECMAScript中什么最有意思，我想那莫过于函数了。 今天来看看有意思的地方之一：rest参数。 我们知道，ES6支持类(class)这种写法了： class A { constructor(x, y) { this._x = x; this._y = y; ...
JS对象的 rest/spread 属性指南
qf2019的博客
04-19 485
为了保证的可读性，本文采用意译而非直译。 在ES5中，咱们合并对象通常使用Lodash的 _.extend(target,[sources]) 方法，在ES6中咱们使用 Object.assign(target,[sources])来合并对象，当然现在最常用应该是使用 Rest/Spread(展开运算符与剩余操作符)。 来个例子： 在上面的示例中， …cat将 cat的属性复制到新的对象 dog中， .sound属性接收最终值 ‘woof’。 本文将介绍对象 spread 和 rest语法，包括对象传播如何
JS对象的 rest/spread 属性
ysds20211402的博客
01-31 166
转自：微点阅读 https://www.weidianyuedu.com/content/5817458999616.html 为了保证的可读性，本文采用意译而非直译。 在ES5中，咱们合并对象通常使用Lodash的_.extend(target,[sources])方法，在ES6中咱们使用Object.assign(target,[sources])来合并对象，当然现在最常用应该是使用Rest/Spread(展开运算符与剩余操作符)。 来个例子： const cat =...
ES6基础-----rest、spread的使用
最新发布
weixin_69190490的博客
12-12 772
rest参数、spread扩展运算符、rest 和 spread 的区别
JS对象的 rest/spread 属性浅谈
hdxx2022的博客
03-08 196
如果设为 false，将阻止某些操作改写该属性，比如无法删除该属性，也不得改变该属性的属性描述对象（ value属性除外）。更新嵌套对象的高度 box.size需要一个额外的对象字面量 {...box.size，height：200}。咱们可以使用 object.keys()(访问自有和可枚举的属性)枚举对象属性，例如，在 for..in语句中(访问所有可枚举属性)等等。其目的是以一种浅显的方式扩展自己的和可枚举的属性，因此忽略原型的方法似乎是合理的。这与后一个属性使用相同的键覆盖最早的属性的规则相匹配。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值