ES8 中对于 Object.getOwnPropertyNames 和 Object.keys 的不同处理

在ES8中，Object.getOwnPropertyNames和Object.keys是两个用于获取对象属性名称的方法。尽管这两个方法看起来非常相似，但它们的实现细节以及返回结果却存在一定的区别。本文主要讲述这两个方法的差异，并提供示例代码以便更好的理解。

Object.getOwnPropertyNames

Object.getOwnPropertyNames是一个ES5标准中引入的方法，用于获取对象的所有属性名称，无论属性是否可枚举。在ES8中，对该方法进行了一些补充，它可以返回继承链上的所有属性名称。与Object.keys方法不同，它不会去查找对象的原型链上的属性名称。

示例1：

const obj = {};
Object.defineProperty(obj, 'foo', {
  value: 'foo',
  enumerable: false
});
console.log(Object.getOwnPropertyNames(obj)); // ["foo"]

上述示例中，foo属性虽然设置为不可枚举，但仍然被Object.getOwnPropertyNames方法获取到了。

示例2：

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log('Woof!');
  }
}

const dog = new Dog('Rolo', 'Labrador');
console.log(Object.getOwnPropertyNames(dog)); // ["name", "breed"]

上述示例中，Dog类继承自Animal类，dog对象上除了name和breed属性外，还有一个speak方法。但通过Object.getOwnPropertyNames方法获取到的属性名称中，仅包含对象自身的属性名称。

Object.keys

Object.keys方法是ES5标准引入的另一个用于获取对象属性名称的方法。它只能获取对象自身的可枚举属性名称，并且只返回对象属性名称的数组。

示例1：

const obj = {};
Object.defineProperty(obj, 'foo', {
  value: 'foo',
  enumerable: false
});
console.log(Object.keys(obj)); // []

在上述示例中，由于foo属性设置为不可枚举，它不会出现在Object.keys方法返回的属性名称数组中。

示例2：

// javascriptcn.com 代码示例
class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }

  bark() {
    console.log('Woof!');
  }
}

const dog = new Dog('Rolo', 'Labrador');
console.log(Object.keys(dog)); // ["name", "breed"]

在上述示例中，继承自Animal类的speak方法未被返回。

总结

以上就是ES8中Object.getOwnPropertyNames和Object.keys方法的不同处理。在使用时，需要根据具体情况来确定使用哪一个方法。如果需要获取对象继承链上的所有属性名称或不关心属性是否可枚举，使用Object.getOwnPropertyNames方法；如果只需要获取对象自身的可枚举属性名称，且不需要方法名称，使用Object.keys方法。

需要注意的是，在某些情况下，如使用with语句时，Object.keys方法会返回空数组。因此，为了避免潜在的问题，建议使用Object.getOwnPropertyNames方法。

希望本文能够帮助您更好地理解ES8中Object.getOwnPropertyNames和Object.keys方法的不同处理，并在日常开发中做出更明智的选择。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653b15007d4982a6eb5661a8