详解属性标志和熟悉描述符以及getter和setter

山山呀
VIP.1 初学乍练
394 阅读10分钟

属性标志和属性描述符

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

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

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

属性标志

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

  • writable — 如果为 true，则值可以被修改，否则它是只可读的。
  • enumerable — 如果为 true，则会被在循环中列出，否则不会被列出。
  • configurable — 如果为 true，则此特性可以被删除，这些属性也可以被修改，否则不可以。

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

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

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

语法是：

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。

语法是：

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（但是如果没有可以分配它们）。

在这里，我们将 user.name 设置为“永久密封”的常量：

let user = { };

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

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

“Non-configurable” 并不意味着 “non-writable”

值得注意的例外情况：不可配置但可写的属性的值是可以被更改的。

configurable: false 的思想是防止更改属性标志或删除属性标志，而不是更改它的值。

Object.defineProperties

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

语法是：

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) 方法。

它与 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.isExtensible(obj)

    如果添加属性被禁止，则返回 false，否则返回 true。

  • Object.isSealed(obj)

    如果添加/删除属性被禁止，并且所有现有的属性都具有 configurable: false则返回 true。

  • Object.isFrozen(obj)

    如果添加/删除/更改属性被禁止，并且所有当前属性都是 configurable: false, writable: false，则返回 true。

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

属性的 getter 和 setter

有两种类型的对象属性。

第一种是 数据属性。我们已经知道如何使用它们了。到目前为止，我们使用过的所有属性都是数据属性。

第二种类型的属性是新东西。它是 访问器属性（accessor properties）。它们本质上是用于获取和设置值的函数，但从外部代码来看就像常规属性。

Getter 和 setter

访问器属性由 “getter” 和 “setter” 方法表示。在对象字面量中，它们用 get 和 set 表示：

let obj = {
  get propName() {
    // 当读取 obj.propName 时，getter 起作用
  },

  set propName(value) {
    // 当执行 obj.propName = value 操作时，setter 起作用
  }
};

当读取 obj.propName 时，getter 起作用，当 obj.propName 被赋值时，setter 起作用。

例如，我们有一个具有 name 和 surname 属性的对象 user：

let user = {
  name: "John",
  surname: "Smith"
};

现在我们想添加一个 fullName 属性，该属性值应该为 "John Smith"。当然，我们不想复制粘贴已有的信息，因此我们可以使用访问器来实现：

let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  }
};

alert(user.fullName); // John Smith

从外表看，访问器属性看起来就像一个普通属性。这就是访问器属性的设计思想。我们不以函数的方式 调用user.fullName，我们正常 读取 它：getter 在幕后运行。

截至目前，fullName 只有一个 getter。如果我们尝试赋值操作 user.fullName=，将会出现错误：

let user = {
  get fullName() {
    return `...`;
  }
};

user.fullName = "Test"; // Error（属性只有一个 getter）

让我们通过为 user.fullName 添加一个 setter 来修复它：

let user = {
  name: "John",
  surname: "Smith",

  get fullName() {
    return `${this.name} ${this.surname}`;
  },

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

// set fullName 将以给定值执行
user.fullName = "Alice Cooper";

alert(user.name); // Alice
alert(user.surname); // Cooper

现在，我们就有一个“虚拟”属性。它是可读且可写的。

访问器描述符

访问器属性的描述符与数据属性的不同。

对于访问器属性，没有 value 和 writable，但是有 get 和 set 函数。

所以访问器描述符可能有：

  • get —— 一个没有参数的函数，在读取属性时工作，
  • set —— 带有一个参数的函数，当属性被设置时调用，
  • enumerable —— 与数据属性的相同，
  • configurable —— 与数据属性的相同。

例如，要使用 defineProperty 创建一个 fullName 访问器，我们可以使用 get 和 set 来传递描述符：

let user = {
  name: "John",
  surname: "Smith"
};

Object.defineProperty(user, 'fullName', {
  get() {
    return `${this.name} ${this.surname}`;
  },

  set(value) {
    [this.name, this.surname] = value.split(" ");
  }
});

alert(user.fullName); // John Smith

for(let key in user) alert(key); // name, surname

请注意，一个属性要么是访问器（具有 get/set 方法），要么是数据属性（具有 value），但不能两者都是。

如果我们试图在同一个描述符中同时提供 get 和 value，则会出现错误：

// Error: Invalid property descriptor.
Object.defineProperty({}, 'prop', {
  get() {
    return 1
  },

  value: 2
});

更聪明的 getter/setter

Getter/setter 可以用作“真实”属性值的包装器，以便对它们进行更多的控制。

例如，如果我们想禁止太短的 user 的 name，我们可以创建一个 setter name，并将值存储在一个单独的属性 _name中：

let user = {
  get name() {
    return this._name;
  },

  set name(value) {
    if (value.length < 4) {
      alert("Name is too short, need at least 4 characters");
      return;
    }
    this._name = value;
  }
};

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

user.name = ""; // Name 太短了……

所以，name 被存储在 _name 属性中，并通过 getter 和 setter 进行访问。

从技术上讲，外部代码可以使用 user._name 直接访问 name。但是，这儿有一个众所周知的约定，即以下划线 "_"开头的属性是内部属性，不应该从对象外部进行访问。

兼容性

访问器的一大用途是，它们允许随时通过使用 getter 和 setter 替换“正常的”数据属性，来控制和调整这些属性的行为。

想象一下，我们开始使用数据属性 name 和 age 来实现 user 对象：

function User(name, age) {
  this.name = name;
  this.age = age;
}

let john = new User("John", 25);

alert( john.age ); // 25

……但迟早，情况可能会发生变化。我们可能会决定存储 birthday，而不是 age，因为它更精确，更方便：

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;
}

let john = new User("John", new Date(1992, 6, 1));

现在应该如何处理仍使用 age 属性的旧代码呢？

我们可以尝试找到所有这些地方并修改它们，但这会花费很多时间，而且如果其他很多人都在使用该代码，那么可能很难完成所有修改。而且，user 中有 age 是一件好事，对吧？

那我们就把它保留下来吧。

为 age 添加一个 getter 来解决这个问题：

function User(name, birthday) {
  this.name = name;
  this.birthday = birthday;

  // 年龄是根据当前日期和生日计算得出的
  Object.defineProperty(this, "age", {
    get() {
      let todayYear = new Date().getFullYear();
      return todayYear - this.birthday.getFullYear();
    }
  });
}

let john = new User("John", new Date(1992, 6, 1));

alert( john.birthday ); // birthday 是可访问的
alert( john.age );      // ……age 也是可访问的

现在旧的代码也可以工作，而且我们还拥有了一个不错的附加属性。

avatar
文章
阅读
粉丝
相关推荐
Getter/Setter中那些有意思的小故事
998阅读
 · 
2点赞
我来给你写一个滴水不漏的深拷贝！面试官：怎么把getter和setter拷贝上？😅😅😅
3.2k阅读
 · 
56点赞
nginx 一把梭！（超详细讲解+实操）
41k阅读
 · 
846点赞
js对象属性描述符详细介绍
560阅读
 · 
1点赞
JavaScript进阶----《getter 和 setter 是什么》
609阅读
 · 
6点赞
大专前端，三轮面试，终与阿里无缘
113k阅读
 · 
1.4k点赞
TypeScript 5.1 beta 发布：函数返回值类型优化、Getter/Setter类型优化、JSX 增强
2.9k阅读
 · 
9点赞
“当高启强遇到陈书婷”与TCP协议
308k阅读
 · 
208点赞
（10）Vue 入门——⑤ 计算属性的 getter 和 setter | Vue 基础理论实操
2.0k阅读
 · 
5点赞
基于 ChatGPT 和 React 搭建 JSON 转 TS 的 Web 应用
254k阅读
 · 
214点赞

友情链接：