获取对象所有属性方法详解

想全面了解 JavaScript 对象的所有属性和方法？本文深入解析了 `Object.keys()`、`Object.getOwnPropertyNames()`、`Reflect.ownKeys()` 以及 `for...in` 循环等关键方法，助你掌握获取对象属性的各种技巧。通过 `Reflect.ownKeys()` 与 `for...in` 结合，可以全面获取对象自身及原型链上的属性，包括可枚举和不可枚举的字符串及 Symbol 属性。此外，文章还介绍了如何利用 `typeof` 区分属性和方法，并探讨了这些技术在调试、序列化、元编程以及框架开发等实际场景中的应用。掌握这些方法，能让你更深入地理解 JavaScript 对象的内部结构，提升开发效率和代码质量。

答案：获取对象所有属性和方法需结合Reflect.ownKeys()和for...in。Reflect.ownKeys()返回对象自身所有键（包括字符串和Symbol，可枚举与不可枚举），而for...in可遍历原型链上的可枚举属性，配合hasOwnProperty()可区分自身与继承属性。Object.keys()仅返回自身可枚举字符串属性，Object.getOwnPropertyNames()返回所有自身字符串属性（含不可枚举），Object.getOwnPropertySymbols()返回所有自身Symbol属性。方法本质是值为函数的属性，可用typeof判断。实际应用于调试、序列化、元编程、框架开发等场景。

在JavaScript中，要获取一个对象的所有属性和方法，我们通常会用到Object.keys()、Object.getOwnPropertyNames()、Object.getOwnPropertySymbols()，以及遍历原型链的for...in循环配合hasOwnProperty()。这些工具各有侧重，理解它们的差异是关键。

解决方案

获取一个对象的所有属性和方法，这听起来简单，但实际上根据你“所有”的定义，方法会有些许不同。我们来一步步拆解。

最直接也是最常用的方式，是利用JavaScript内置的几个Object静态方法：

1. Object.keys(obj)：这个方法会返回一个由给定对象自身可枚举字符串属性组成的数组。它非常适合获取那些你通常会直接操作的、可见的属性。

   const myObject = {
       name: 'Alice',
       age: 30,
       greet() {
           console.log(`Hello, I'm ${this.name}`);
       }
   };
   Object.defineProperty(myObject, 'secret', {
       value: 'shhh',
       enumerable: false // 不可枚举
   });
   console.log(Object.keys(myObject)); // ['name', 'age', 'greet']

   你会发现secret并没有被包含在内，因为它是不可枚举的。

2. Object.getOwnPropertyNames(obj)：如果你需要获取对象自身所有字符串属性（包括不可枚举的），那么这个方法就是你的首选。

   console.log(Object.getOwnPropertyNames(myObject)); // ['name', 'age', 'greet', 'secret']

   这次，secret就被找出来了。在我看来，这个方法在进行一些更深层次的反射或调试时特别有用。

3. Object.getOwnPropertySymbols(obj)：ES6引入了Symbol作为一种新的原始数据类型，它们也可以作为对象的属性键。Object.getOwnPropertySymbols()专门用来获取对象自身的所有Symbol属性。

   const mySymbol = Symbol('id');
   myObject[mySymbol] = 123;
   console.log(Object.getOwnPropertySymbols(myObject)); // [Symbol(id)]

4. Reflect.ownKeys(obj)：这是一个更现代、更全面的方法，它能返回对象自身的所有属性键，无论是字符串还是Symbol，无论是可枚举还是不可枚举。它基本上是Object.getOwnPropertyNames()和Object.getOwnPropertySymbols()的合集。

   console.log(Reflect.ownKeys(myObject)); // ['name', 'age', 'greet', 'secret', Symbol(id)]

   这个方法是我个人比较偏爱的一个，因为它提供了一站式的解决方案，省去了我们自己合并数组的麻烦。

5. for...in循环配合hasOwnProperty()：如果你还需要获取对象原型链上的可枚举属性（包括方法），for...in循环是必不可少的。但要小心，for...in会遍历原型链上的可枚举属性，如果你只想获取对象自身的属性，就必须结合Object.prototype.hasOwnProperty.call(obj, key)来过滤。

   function Parent() {
       this.parentProp = 'parentValue';
   }
   Parent.prototype.parentMethod = function() { console.log('Parent method'); };
   
   function Child() {
       this.childProp = 'childValue';
   }
   Child.prototype = Object.create(Parent.prototype);
   Child.prototype.constructor = Child;
   
   const childInstance = new Child();
   childInstance.ownMethod = function() { console.log('Own method'); };
   
   console.log('--- Using for...in ---');
   for (const key in childInstance) {
       // 过滤掉原型链上的属性，只保留自身属性
       if (Object.prototype.hasOwnProperty.call(childInstance, key)) {
           console.log(`Own property: ${key}`);
       } else {
           console.log(`Inherited property (from prototype chain): ${key}`);
       }
   }
   // 输出：
   // Own property: childProp
   // Own property: ownMethod
   // Inherited property (from prototype chain): parentMethod

   你会发现parentProp没有被for...in列出，因为它不是childInstance自身的属性，而是通过原型链继承自Parent实例的属性。而parentMethod作为原型链上的可枚举方法则被列出。

总的来说，要“获取所有属性和方法”，你需要根据你的具体需求来组合使用这些方法。如果是只关心对象自身的属性和方法，Reflect.ownKeys()通常是最全面的。如果需要包含原型链上的可枚举方法，那就得配合for...in。

为什么Object.keys()、Object.getOwnPropertyNames()和for...in的结果会不同？

这确实是初学者常常感到困惑的地方，它们之间的差异主要源于JavaScript中“属性”的几个核心概念：可枚举性（enumerable）、自身属性（own property）以及原型链（prototype chain）。理解这三点，就能明白它们各自的用途和局限。

首先，我们得知道，一个对象的属性并不仅仅是“有”或“没有”这么简单。每个属性都有一个内部的“描述符”（descriptor），其中就包含了一个enumerable标志。当enumerable为true时，这个属性就是可枚举的；反之，则是不可枚举。比如，我们用Object.defineProperty创建属性时，默认就是不可枚举的，而直接赋值创建的属性通常是可枚举的。很多内置对象的方法（比如Object.prototype.toString）也是不可枚举的。

• Object.keys(obj)： 它只关心那些自身的、可枚举的、字符串键的属性。这意味着：

  1. 它不会去原型链上找。
  2. 那些用Object.defineProperty设置为enumerable: false的属性，它会视而不见。
  3. Symbol作为键的属性，它也看不到。 所以，它的结果是最“精简”的，通常是我们最常关注的那些“数据”属性和“公共”方法。

• Object.getOwnPropertyNames(obj)： 这个方法比Object.keys()更“全面”一些，它返回对象自身所有字符串键的属性，无论它们是否可枚举。 所以，如果你的对象有一些通过Object.defineProperty定义为不可枚举的字符串属性，Object.keys()会忽略它们，但Object.getOwnPropertyNames()会把它们找出来。这在需要对对象进行更彻底的检查，比如序列化或调试时非常有用。

• for...in循环： 这是最“古老”的遍历方式之一，它的行为也最特殊。for...in会遍历对象自身以及其原型链上所有可枚举的字符串属性。 所以，它的结果可能包含从原型继承而来的属性和方法。为了只获取对象自身的属性，我们几乎总是需要配合hasOwnProperty()方法来过滤。 举个例子，如果你有一个Child对象继承自Parent，for...in会列出Child自身的属性，也会列出Parent.prototype上那些可枚举的属性。这在某些场景下很有用，比如你想遍历一个对象及其所有祖先的可配置属性，但更多时候，我们只是想看对象“自己”有什么。

简而言之，它们的设计初衷和应用场景不同：Object.keys()用于快速获取常用属性；Object.getOwnPropertyNames()用于更深入地检查对象自身的全部字符串属性；而for...in则是一个可以遍历原型链的工具，但使用时需要注意过滤，以免获取到不必要的继承属性。

如何区分对象的属性和方法？

区分对象的属性和方法，其实比你想象的要简单，因为在JavaScript中，方法本质上就是值为函数的属性。所以，核心的判断依据就是检查属性的值是否是一个函数。

最直接的方法就是使用typeof操作符：

const myObject = {
    name: 'Bob',
    age: 40,
    sayHello: function() {
        console.log(`Hello, ${this.name}`);
    },
    calculate: (a, b) => a + b,
    data: [1, 2, 3]
};

const allKeys = Reflect.ownKeys(myObject); // 获取所有自身属性键

allKeys.forEach(key => {
    const value = myObject[key];
    if (typeof value === 'function') {
        console.log(`Method: ${String(key)}`);
    } else {
        console.log(`Property: ${String(key)}`);
    }
});
// 输出：
// Property: name
// Property: age
// Method: sayHello
// Method: calculate
// Property: data

这里有几点值得我们思考：

1. 箭头函数与普通函数：无论是传统的function声明的函数，还是ES6的箭头函数，typeof它们的结果都是'function'。所以，这个判断方法是通用的。

2. 函数也是值：在JavaScript里，函数是一等公民，它们可以被当作变量赋值、当作参数传递，也可以作为对象的属性值。所以，一个“方法”其实就是一个“值为函数的属性”。这个概念很重要，它让我们能以统一的方式处理数据和行为。

3. 区分“方法”和“函数属性”：在某些语境下，我们可能会将一个纯粹的工具函数作为属性存储在对象中，它并不直接操作对象的状态。例如：

   const utils = {
       add: (a, b) => a + b,
       subtract: (a, b) => a - b
   };
   // 这里的add和subtract虽然是函数，但它们更多是工具，而不是传统意义上操作utils对象本身的“方法”。

   但从编程语言层面来看，它们依然是值为函数的属性。typeof并不会区分这种语义上的差异，它只看数据类型。在大多数情况下，只要属性值是函数，我们就可以将其视为方法。

4. 原型链上的方法：如果你是通过for...in遍历，并且没有用hasOwnProperty()过滤，那么你也会获取到原型链上的方法（如果它们是可枚举的）。typeof同样适用于这些继承来的方法。

所以，当你需要区分时，只需简单地检查typeof obj[key] === 'function'即可。这是一种非常实用且可靠的方式。

在实际开发中，何时需要获取对象的所有属性和方法？

在日常的业务逻辑开发中，我们可能很少直接去遍历一个对象的所有属性和方法。但这并不意味着它不重要。相反，在一些特定的、更底层或更通用的场景下，这种能力变得至关重要。我个人觉得，掌握这些知识，能让你在遇到复杂问题时有更多的思路。

1. 调试和日志记录： 当程序出现异常，或者你想深入了解一个复杂对象在某个时刻的状态时，获取它的所有属性和方法是快速诊断问题的有效手段。你可以将一个对象的所有信息打印出来，帮助你理解数据流和行为。 例如，在Node.js环境中，console.dir(obj, { depth: null })就能提供非常详细的对象信息，这背后就涉及到了对对象属性的深度遍历。

2. 序列化和反序列化： 虽然JSON.stringify()能处理大部分情况，但它有局限性，比如无法序列化函数、Symbol属性、循环引用等。如果你需要实现一个自定义的深度克隆或持久化机制，尤其是要保留那些不可枚举的属性或者Symbol属性时，你就需要手动遍历并处理这些属性。 想象一下，你要保存一个包含复杂对象和方法的配置，常规的JSON就搞不定了，你可能需要自己写一个序列化器，这时就得用Reflect.ownKeys等方法。

3. 元编程（Meta-programming）和代理（Proxy）： ES6的Proxy对象是一个强大的工具，它允许你拦截对目标对象的操作，比如属性的读取、设置、方法的调用等。在实现Proxy的get、set、ownKeys等陷阱（trap）时，你需要知道如何获取和操作目标对象的属性。 例如，你可以创建一个Proxy，当访问一个不存在的属性时，自动返回一个默认值，或者记录下所有属性访问的行为。这都需要对对象属性有细致的感知。

4. 框架和库的开发： 在开发一些通用性较强的框架或库时，比如ORM（对象关系映射）、数据绑定库、DI（依赖注入）容器等，经常需要“反射”对象的结构。

   • ORM：可能需要遍历模型对象的所有属性，将其映射到数据库表的字段。
   • 数据绑定：需要知道哪些属性是可观察的，以便在它们改变时更新UI。
   • 模板引擎：在渲染模板时，可能需要遍历数据对象，将属性值填充到模板中。

5. 对象合并、克隆和比较： 当你需要深度合并两个对象，或者进行一个对象的深度克隆时，仅仅使用Object.assign()或展开运算符是不够的，因为它们只处理自身可枚举的字符串属性。你需要遍历所有类型的属性，包括Symbol和不可枚举的，才能确保完整性。在进行对象比较时，如果需要比较所有属性（包括原型链上的），也需要用到这些遍历方法。

6. 插件系统或扩展机制： 如果你在构建一个允许用户自定义插件的系统，插件可能需要通过反射机制来了解宿主对象或其它插件提供的接口（属性和方法），从而进行交互。

在我看来，这些方法更多的是工具箱里的“高级工具”，不是每天都用，但一旦需要，它们就能帮你解决那些常规手段无法处理的复杂问题。它们体现了JavaScript作为一种动态语言的强大灵活性。

理论要掌握，实操不能落！以上关于《获取对象所有属性方法详解》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！