JavaScript内核与高级编程之：`JavaScript` 的 `Property Descriptors`：其在 `Object.defineProperty` 中的底层作用。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷们，大家好！今天咱们聊点刺激的，深入JavaScript的骨髓——Property Descriptors，也就是属性描述符。别怕，这玩意儿听着吓人，其实就是给对象的属性穿上不同款式的衣服，让它们表现得不一样。

开场白：属性的“三六九等”

在JavaScript的世界里，对象的属性可不是一视同仁的。有些属性你想改就改，想删就删，活得那叫一个自由自在；有些属性则被下了“紧箍咒”，动都动不了，老实得像个鹌鹑。这一切，都得归功于Property Descriptors。

Property Descriptors就像是属性的“户口本”，记录了属性的各种信息，决定了它有哪些特权，又有哪些限制。而Object.defineProperty，就是那个负责给属性上户口的“派出所所长”，它可以让你自定义属性的各种属性描述符，从而控制属性的行为。

第一幕：认识Property Descriptors

Property Descriptors本质上是一个对象，它包含了以下几个关键的“字段”（也就是属性）：

configurable: 这个属性表示是否可以删除目标属性或是否可以再次修改属性的特性（writable, enumerable, configurable）。
- 如果为true，则可以删除属性，也可以修改其特性。
- 如果为false，则不能删除属性，也不能修改其特性。注意，writable可以从true修改为false，但是不能从false修改为true。
- 默认值为false。
enumerable: 这个属性表示是否可以通过for...in循环迭代该属性。
- 如果为true，则可以通过for...in循环迭代该属性。
- 如果为false，则不能通过for...in循环迭代该属性。
- 默认值为false。
writable: 这个属性表示是否可以修改属性的值。
- 如果为true，则可以修改属性的值。
- 如果为false，则不能修改属性的值。
- 默认值为false。
value: 属性的值。可以是任何有效的JavaScript值（数字，对象，函数等）。
- 默认值为undefined。
get: 一个getter函数，当获取属性时，会调用此函数。
- 默认值为undefined。
set: 一个setter函数，当设置属性时，会调用此函数。
- 默认值为undefined。

注意，value和writable与get和set是互斥的。也就是说，如果你定义了get或set，就不能同时定义value和writable。反之亦然。这是因为value和writable用于描述数据属性，而get和set用于描述访问器属性。

用表格总结一下：

属性名	含义	默认值
`configurable`	是否可配置：决定了属性是否可以被删除，以及除了`writable: true -> false`之外的描述符是否可以被修改。	`false`
`enumerable`	是否可枚举：决定了属性是否可以通过`for...in`循环、`Object.keys()`等方法枚举出来。	`false`
`writable`	是否可写：决定了属性的值是否可以被修改。	`false`
`value`	属性的值：可以是任何合法的JavaScript值。	`undefined`
`get`	getter函数：一个在读取属性时调用的函数。	`undefined`
`set`	setter函数：一个在设置属性时调用的函数。	`undefined`

第二幕：Object.defineProperty的妙用

现在，让我们来看看Object.defineProperty这个“派出所所长”是怎么工作的。它的基本语法如下：

Object.defineProperty(obj, prop, descriptor)

obj: 要在其上定义属性的对象。
prop: 要定义或修改的属性的名称。
descriptor: 要定义或修改的属性描述符。

举个例子，假设我们有一个空对象，想给它添加一个名为name的属性，并让它不可修改、不可枚举、不可删除：

const person = {};

Object.defineProperty(person, 'name', {
  value: '张三',
  writable: false,
  enumerable: false,
  configurable: false
});

console.log(person.name); // 输出：张三

person.name = '李四'; // 尝试修改属性值

console.log(person.name); // 仍然输出：张三 (严格模式下会报错)

for (let key in person) {
  console.log(key); // 不会输出任何内容，因为name属性不可枚举
}

delete person.name; // 尝试删除属性

console.log(person.name); // 仍然输出：张三，属性没有被删除

在这个例子中，我们通过Object.defineProperty给person对象的name属性设置了“三不准”：不准修改、不准枚举、不准删除。于是，无论我们怎么折腾，name属性的值始终是“张三”，也无法通过for...in循环枚举出来，更无法删除它。

第三幕：数据属性与访问器属性

前面我们提到，value和writable与get和set是互斥的。这是因为属性有两种类型：数据属性和访问器属性。

数据属性：通过value和writable来描述，直接存储数据。
访问器属性：通过get和set来描述，不直接存储数据，而是通过getter和setter函数来控制对属性的访问。

举个例子，假设我们想给person对象添加一个fullName属性，它的值由firstName和lastName两个属性拼接而成。我们可以使用访问器属性来实现：

const person = {
  firstName: '张',
  lastName: '三'
};

Object.defineProperty(person, 'fullName', {
  get: function() {
    return this.firstName + this.lastName;
  },
  set: function(value) {
    const parts = value.split(' ');
    this.firstName = parts[0];
    this.lastName = parts[1];
  },
  enumerable: true,
  configurable: true
});

console.log(person.fullName); // 输出：张三

person.fullName = '李 四';

console.log(person.firstName); // 输出：李
console.log(person.lastName);  // 输出：四
console.log(person.fullName); // 输出：李四

在这个例子中，fullName属性并没有直接存储数据，而是通过get和set函数来控制对firstName和lastName属性的访问。当我们读取fullName属性时，get函数会被调用，它会将firstName和lastName属性的值拼接起来并返回。当我们设置fullName属性时，set函数会被调用，它会将传入的值拆分成firstName和lastName两部分，并分别赋值给对应的属性。

第四幕：应用场景举例

Property Descriptors在实际开发中有很多用途，下面列举几个常见的例子：

数据校验：可以通过set函数对属性的值进行校验，防止非法数据进入对象。

const person = {};

Object.defineProperty(person, 'age', {
  set: function(value) {
    if (typeof value !== 'number' || value < 0 || value > 150) {
      throw new Error('年龄必须是0-150之间的数字');
    }
    this._age = value; // 使用_age存储实际的值
  },
  get: function() {
    return this._age;
  }
});

person.age = 25; // 正常赋值
console.log(person.age); // 输出: 25

try {
  person.age = -10; // 尝试赋非法值
} catch (error) {
  console.error(error.message); // 输出：年龄必须是0-150之间的数字
}

创建只读属性：可以将writable设置为false，防止属性被修改。

const config = {};

Object.defineProperty(config, 'apiUrl', {
  value: 'https://api.example.com',
  writable: false,
  configurable: false
});

config.apiUrl = 'https://newapi.example.com'; // 尝试修改属性值 (严格模式会报错)
console.log(config.apiUrl); // 仍然输出：https://api.example.com

实现单例模式：可以通过闭包和defineProperty来创建一个单例对象。

const Singleton = (function() {
  let instance;

  function createInstance() {
    return {
      data: '单例数据'
    };
  }

  return {
    getInstance: function() {
      if (!instance) {
        instance = createInstance();
        Object.defineProperty(this, 'getInstance', { // 修改getInstance的configurable为false，防止被覆盖
           configurable: false,
           writable: false
        });
      }
      return instance;
    }
  };
})();

const instance1 = Singleton.getInstance();
const instance2 = Singleton.getInstance();

console.log(instance1 === instance2); // 输出：true
console.log(instance1.data); // 输出: 单例数据

控制属性的枚举行为：可以通过enumerable设置为false来隐藏一些内部属性，防止它们被for...in循环或Object.keys()方法枚举出来。

const person = {
  name: '张三',
  age: 30
};

Object.defineProperty(person, '_internalId', {
  value: '123456',
  enumerable: false // 将_internalId设置为不可枚举
});

for (let key in person) {
  console.log(key); // 只会输出：name 和 age
}

console.log(Object.keys(person)); // 输出：[ 'name', 'age' ]

冻结对象：可以使用Object.freeze()方法冻结一个对象，使其所有属性都变为只读和不可配置。这实际上就是将所有属性的writable和configurable都设置为false。

const person = {
  name: '张三',
  age: 30
};

Object.freeze(person);

person.name = '李四'; // 尝试修改属性值 (严格模式下会报错)
delete person.age; // 尝试删除属性 (严格模式下会报错)

console.log(person.name); // 仍然输出：张三
console.log(person.age);  // 仍然输出：30

第五幕：获取属性描述符

JavaScript提供了两个方法来获取属性描述符：

Object.getOwnPropertyDescriptor(obj, prop): 获取对象自身属性的描述符。
Object.getOwnPropertyDescriptors(obj): 获取对象所有自身属性的描述符。

举个例子：

const person = {
  name: '张三',
  age: 30
};

Object.defineProperty(person, 'address', {
  value: '北京市',
  enumerable: false
});

const nameDescriptor = Object.getOwnPropertyDescriptor(person, 'name');
console.log(nameDescriptor);
// 输出:
// {
//   value: '张三',
//   writable: true,
//   enumerable: true,
//   configurable: true
// }

const addressDescriptor = Object.getOwnPropertyDescriptor(person, 'address');
console.log(addressDescriptor);
// 输出:
// {
//   value: '北京市',
//   writable: false,
//   enumerable: false,
//   configurable: false
// }

const allDescriptors = Object.getOwnPropertyDescriptors(person);
console.log(allDescriptors);
// 输出:
// {
//   name: {value: '张三', writable: true, enumerable: true, configurable: true},
//   age: {value: 30, writable: true, enumerable: true, configurable: true},
//   address: {value: '北京市', writable: false, enumerable: false, configurable: false}
// }

第六幕：注意事项

严格模式：在严格模式下，对不可写属性进行赋值或删除不可配置属性会抛出TypeError错误。
继承属性：Object.defineProperty只能定义或修改对象自身属性的描述符，无法直接修改继承属性的描述符。如果要修改继承属性的描述符，需要在原型对象上进行操作。
性能：过度使用Object.defineProperty可能会影响性能，因为它会阻止JavaScript引擎对属性进行优化。因此，应该谨慎使用，只在必要的时候才使用。

总结：掌控属性，掌控对象

Property Descriptors是JavaScript中一个非常强大的工具，它可以让你精细地控制对象的属性行为，实现各种高级特性。虽然它可能会让代码变得稍微复杂一些，但它可以让你更好地理解JavaScript的底层机制，写出更健壮、更灵活的代码。

希望今天的讲座能让你对Property Descriptors有更深入的了解。记住，掌控属性，就能掌控对象！感谢各位观众老爷们的收看！下次再见！

发表回复 取消回复

发表回复取消回复