对象属性描述符和访问器属性 getter setter writable configurable enumerable

---

title: 对象属性描述符和访问器属性
date: 2021-07-27 15:49:28
tags: javascript

本笔记基于：https://zh.javascript.info/property-descriptors

属性标识与属性描述符

对象可以存储属性，对象的属性不仅仅只是简单的“键值”对。

属性标识

对象属性（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');
console.log(descriptor);
// { value: 'John', writable: true, enumerable: true, configurable: true }

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

语法

Object.defineProperty(obj, propertyName, descriptor)

• obj，propertyName

  要应用描述符的对象及其属性。

• descriptor

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

如果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'

只在严格模式下会出现 Errors

不可枚举

如果在 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

不可配置

不可配置标志（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" 的用途是防止更改和删除属性标志，但是允许更改对象的值。

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)，允许一次定义多个属性。

语法

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 类型的属性在内的 所有 属性描述符。

属性的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）

let user={
    name:'John',
    surname:'Smith',
    get fullname(){
        return `${this.name} ${this.surname}`;
    },
    set fullname(value){
        // 将获取的值解构赋值给对象的name和surname属性
        [this.name,this.surname]=value.split(' ');
    }
}

user.fullname='alice cooper';
console.log(user.name);
console.log(user.fullname);

访问器描述符

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

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

• 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。但是，这儿有一个众所周知的约定，即以下划线 "_" 开头的属性是内部属性，不应该从对象外部进行访问。