深入探究 JS 中可枚举与不可枚举属性：理解和扩展

2024-01-28 06:32:18

可枚举与不可枚举属性的深层探究

在 JavaScript 中，对象的属性本质上分为两种：可枚举属性和不可枚举属性。属性的可枚举性由其 enumerable 属性决定，该属性是一个布尔值。

可枚举属性 顾名思义，它们是可以通过 for...in 循环遍历到的属性。这些属性在对象中具有直接存在的可见性。

不可枚举属性 相反，它们不能被 for...in 循环枚举。它们通常是对象的内部属性或受限属性，旨在以非标准方式使用。

揭示不可枚举属性的奥秘

JavaScript 中的内置对象通常包含许多不可枚举属性。这是一种常见的做法，可以保护这些内部属性免受意外修改或滥用。例如：

const obj = {
  name: 'John Doe',
  age: 30,
  // 不可枚举的内部属性
  __proto__: { ... }
};

for (const key in obj) {
  console.log(key); // 只会输出 "name" 和 "age"
}

要访问不可枚举属性，可以使用 Object.getOwnPropertyNames() 方法。它返回一个包含对象所有属性名称（包括不可枚举属性）的数组：

console.log(Object.getOwnPropertyNames(obj)); // 输出 ["name", "age", "__proto__"]

揭开 `Object.keys()` 和 `for...in` 之间的差异

在 JavaScript 中，还有另一个函数 Object.keys() 可以返回对象中可枚举属性的名称列表：

console.log(Object.keys(obj)); // 输出 ["name", "age"]

需要注意的是，Object.keys() 仅返回可枚举属性，而 for...in 还会枚举不可枚举属性。

扩展 JavaScript 对象：代理与扩展机制

JavaScript 提供了强大的机制来扩展对象，从而允许我们添加自己的属性和行为。我们可以使用代理或扩展机制来实现这一点：

代理 (Proxy)： 代理允许我们在访问对象属性时拦截并自定义行为。我们可以创建代理对象，该对象将包装基础对象并提供额外的功能，例如属性访问控制或属性拦截。

const obj = {
  name: 'John Doe',
  age: 30
};

const proxy = new Proxy(obj, {
  get: function(target, prop) {
    if (prop === 'age') {
      return target[prop] + 1; // 拦截 "age" 属性并返回年龄加 1
    }
    return target[prop];
  }
});

console.log(proxy.age); // 输出 31

扩展 (Extension)： 扩展允许我们为对象动态添加新的属性或方法。我们可以使用 Object.defineProperty() 方法来定义新属性，或者使用 Object.assign() 方法将新属性或方法合并到现有对象中：

Object.defineProperty(obj, 'job', {
  value: 'Software Engineer',
  enumerable: true
});

Object.assign(obj, {
  greet: function() { console.log('Hello!') }
});

console.log(obj.job); // 输出 "Software Engineer"
obj.greet(); // 输出 "Hello!"