JS原型链方法获取技巧全解

想要全面了解JavaScript对象原型链上的方法？本文为你提供一份详尽的解析！传统的`for...in`循环存在局限性，无法访问不可枚举属性，也难以区分自有属性与继承属性。本文介绍一种更完善的方法，通过循环遍历原型链，结合`Object.getOwnPropertyNames`和`Object.getOwnPropertySymbols`捕获每一层原型上的自有属性，并筛选出函数类型。该方法能有效避免常见陷阱，如`constructor`属性、`Symbol`属性以及宿主对象异常等问题，适用于各种标准与非标准场景。掌握此方法，你将能够更深入地理解JavaScript原型链机制，提升代码的健壮性和可维护性。立即阅读，解锁JavaScript原型链的秘密！

要获取JavaScript对象原型链上的所有方法，必须沿原型链逐层遍历，使用Object.getOwnPropertyNames和Object.getOwnPropertySymbols获取每层的自有属性（包括不可枚举的），再通过Object.getOwnPropertyDescriptor筛选出值为函数且非constructor的属性，最终去重返回；1. 使用while循环通过Object.getPrototypeOf向上遍历直到null；2. 每层调用Object.getOwnPropertyNames和Object.getOwnPropertySymbols获取所有字符串和Symbol键名；3. 遍历所有键名，用Object.getOwnPropertyDescriptor判断属性值是否为函数并排除constructor；4. 使用try...catch避免因宿主对象或Proxy导致的异常；5. 利用Set去重后转为数组返回。该方法能完整获取原型链上所有方法，解决了for...in无法访问不可枚举属性、无法区分自有与继承属性等问题，适用于绝大多数标准与非标准场景。

要获取JavaScript对象原型链上的所有方法，核心思路是沿着原型链向上遍历，在每一层原型对象上，分别找出其自身定义的所有属性（包括不可枚举的），然后筛选出其中类型为函数的那些。这比你想象的要复杂一点点，因为简单的for...in循环并不能满足要求。

解决方案

要完整地获取一个对象原型链上的所有方法，你需要一个循环来向上追溯原型链，并结合Object.getOwnPropertyNames()和Object.getOwnPropertySymbols()来捕获每一层原型上的自有属性，最后筛选出函数。

function getAllPrototypeMethods(obj) {
    const methods = new Set(); // 使用Set避免重复
    let current = obj;

    // 循环向上遍历原型链，直到current为null（Object.prototype的原型是null）
    while (current) {
        // 获取当前原型对象自身的所有字符串属性名（包括不可枚举的）
        const propNames = Object.getOwnPropertyNames(current);
        // 获取当前原型对象自身的所有Symbol属性名
        const symbolProps = Object.getOwnPropertySymbols(current);

        // 合并所有属性名
        const allProps = [...propNames, ...symbolProps];

        allProps.forEach(prop => {
            // 尝试获取属性描述符，以判断是否是函数
            // 这么做更严谨，因为直接obj[prop]可能会触发getter或报错
            try {
                const descriptor = Object.getOwnPropertyDescriptor(current, prop);
                if (descriptor && typeof descriptor.value === 'function') {
                    // 确保不是构造函数本身（通常我们不关心这个）
                    if (prop !== 'constructor') {
                        methods.add(prop);
                    }
                }
            } catch (e) {
                // 某些特殊属性可能无法获取描述符，这里简单忽略
                // 比如一些宿主对象或Proxy对象
                console.warn(`无法获取属性描述符: ${String(prop)}`, e);
            }
        });

        // 向上移动到下一个原型
        current = Object.getPrototypeOf(current);
    }

    return Array.from(methods); // 返回一个数组
}

// 示例用法：
class MyClass {
    constructor() {
        this.data = 'test';
    }
    methodA() { return 'A'; }
    methodB() { return 'B'; }
    static staticMethod() { return 'static'; } // 静态方法不在原型链上
}

Object.prototype.globalMethod = function() { return 'global'; }; // 添加一个可枚举的全局方法
Array.prototype.myArrayMethod = function() { return 'myArray'; }; // 添加一个不可枚举的数组方法

const instance = new MyClass();
const arr = [];

console.log('MyClass实例的方法:', getAllPrototypeMethods(instance));
// 预期输出可能包括：methodA, methodB, toString, valueOf, hasOwnProperty, isPrototypeOf, etc.
console.log('Array实例的方法:', getAllPrototypeMethods(arr));
// 预期输出可能包括：push, pop, shift, unshift, myArrayMethod, map, filter, etc.
console.log('普通对象的方法:', getAllPrototypeMethods({}));
// 预期输出可能包括：toString, valueOf, hasOwnProperty, isPrototypeOf, etc.

// 清理测试用的全局方法，避免污染环境
delete Object.prototype.globalMethod;
delete Array.prototype.myArrayMethod;

这段代码基本上涵盖了大部分情况，它会沿着原型链一层层地“剥开”每个原型对象，找出它们“自己”定义的所有方法。我个人觉得，理解原型链这事儿，就像在挖宝藏，一层一层往下刨，每层都有惊喜，也有‘坑’。

为什么直接使用for...in循环无法获取原型链上的所有方法？

说实话，直接用for...in来干这事儿，多半是要碰壁的。它确实能遍历对象的属性，但有几个关键的局限性，导致它无法胜任“获取所有原型链方法”的任务：

1. 只遍历可枚举属性： 这是最主要的问题。JavaScript中很多内置方法（比如Array.prototype上的map、forEach，或者Object.prototype上的toString、hasOwnProperty）都是不可枚举的。这意味着它们在for...in循环中根本不会出现。你试试看for (let key in []) { console.log(key); }，你会发现什么都打不出来，尽管数组有很多方法。
2. 遍历自身和继承的属性： for...in会遍历对象自身以及原型链上所有可枚举的属性。这意味着它会把原型链上继承来的属性也列出来。如果你只是想知道“这个对象有哪些方法”，那它会给你一堆你可能不想要的信息，而且你还得手动判断哪些是它自己的，哪些是继承的，以及更重要的是，哪些是函数。
3. 无法区分属性来源： for...in本身并不会告诉你这个属性是对象自己的，还是从原型链上继承来的。你得额外用hasOwnProperty()来判断，但这又回到了问题1，因为它同样受限于可枚举性。

所以，for...in更适合于遍历那些你明确知道是可枚举的、或者你不在乎它是不是继承来的属性，比如一个配置对象的键值对。对于原型链上的方法查找，它就显得力不从心了。

如何区分对象自身的属性和原型链上的方法？

区分对象自身的属性和原型链上的方法，这在JavaScript中是个非常基础但又极其重要的概念。核心思想就是“看它是不是直接长在对象身上的”。

最直接、最常用的方法就是使用Object.prototype.hasOwnProperty.call(obj, propName)。这个方法会检查obj是否拥有名为propName的“自有”属性（own property），不包括继承来的属性。之所以用call来调用，是为了防止obj本身覆盖了hasOwnProperty方法（虽然不常见，但总有那么些刁钻的场景）。

然而，对于我们这个“获取原型链上所有方法”的需求，思路稍微有点不同。我们不是要区分一个实例对象instance的自有属性和它原型上的方法。我们是要：

1. 拿到instance的直接原型（MyClass.prototype）。
2. 拿到MyClass.prototype的直接原型（Object.prototype）。
3. 直到原型链的尽头（null）。

在拿到每一个“原型对象”的时候，我们就要问：“这个原型对象自己有哪些属性？”这时候，Object.getOwnPropertyNames(protoObj)和Object.getOwnPropertySymbols(protoObj)就派上用场了。这两个方法只会返回protoObj“自身”的属性名（包括不可枚举的），而不会去管protoObj自己又继承了什么。

所以，在遍历原型链时，对每个current原型对象使用Object.getOwnPropertyNames(current)和Object.getOwnPropertySymbols(current)，就能准确地获取到该层原型对象上“自有”的所有属性名。然后，我们再对这些属性名进行筛选，找出那些值是function类型的，这就是该层原型对象所贡献的方法。这种方式，巧妙地利用了getOwnPropertyNames的特性，每次都只看当前这一层“自己”的东西，避免了继承的干扰。

获取原型链方法时，需要注意哪些常见陷阱或特殊情况？

在实际操作中，获取原型链上的方法确实会遇到一些小“坑”和需要注意的地方：

1. Object.prototype的原型是null： 这是原型链的终点。你的遍历循环必须能正确处理Object.getPrototypeOf(Object.prototype)返回null的情况，否则会进入无限循环或者报错。我上面提供的while (current)循环就是为了处理这个。
2. Symbol属性和方法： JavaScript中除了字符串键名属性，还有Symbol作为键名的属性。Object.getOwnPropertyNames()只会返回字符串键名的属性，而不会返回Symbol键名的属性。如果你的方法使用了Symbol作为键名（比如Symbol.iterator），那就必须额外使用Object.getOwnPropertySymbols()来获取它们。我的解决方案里已经考虑到了这一点。
3. constructor属性： 几乎所有对象都会有一个constructor属性指向它们的构造函数。这个属性通常也会出现在原型链上。在很多场景下，我们获取“方法”时并不希望包含constructor，因为它不是一个常规意义上的“行为”方法。我的代码中加入了if (prop !== 'constructor')的判断来过滤掉它，你可以根据自己的需求决定是否保留。
4. 属性描述符： 属性不仅有值，还有可写（writable）、可枚举（enumerable）、可配置（configurable）等特性。Object.getOwnPropertyDescriptor()可以获取这些详细信息。虽然在判断是否为函数时，直接typeof obj[prop] === 'function'通常可行，但如果属性是一个getter或setter，直接访问obj[prop]可能会触发副作用，或者在某些特殊情况下（如Proxy）抛出错误。使用descriptor.value来判断会更稳妥一些，虽然增加了代码的复杂性。
5. 性能考量： 对于非常深的原型链，或者需要频繁地对大量对象执行此操作时，每次都遍历整个原型链可能会有轻微的性能开销。如果你的应用场景允许，并且对象结构相对稳定，可以考虑对结果进行缓存。
6. __proto__的滥用： 早期或者一些非标准的环境中，可能会直接使用obj.__proto__来访问和修改原型。虽然它在现代浏览器中广泛支持，但它并不是标准的访问原型链的方式，并且在生产代码中不推荐直接使用。始终坚持使用Object.getPrototypeOf()和Object.setPrototypeOf()来操作原型链，这更符合规范，也更安全。
7. 宿主对象（Host Objects）的特殊性： 在浏览器环境或Node.js环境中，有些内置对象（如DOM元素、window对象）的行为可能与普通JavaScript对象有所不同。它们的一些属性可能无法通过标准方法访问或操作，或者在尝试获取其描述符时抛出错误。我的代码中加入了try...catch来处理这种情况，避免程序中断。

总的来说，获取原型链上的方法，需要你对JavaScript的原型机制、属性特性以及一些内置API有比较深入的理解。这事儿看起来简单，但要做到滴水不漏，还是得细心。

好了，本文到此结束，带大家了解了《JS原型链方法获取技巧全解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！