0

0

js如何获取原型链上的所有方法

小老鼠

小老鼠

发布时间:2025-08-23 14:40:01

|

364人浏览过

|

来源于php中文网

原创

要获取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无法访问不可枚举属性、无法区分自有与继承属性等问题,适用于绝大多数标准与非标准场景。

js如何获取原型链上的所有方法

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

for...in
循环并不能满足要求。

js如何获取原型链上的所有方法

解决方案

要完整地获取一个对象原型链上的所有方法,你需要一个循环来向上追溯原型链,并结合

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;

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

js如何获取原型链上的所有方法

为什么直接使用
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
更适合于遍历那些你明确知道是可枚举的、或者你不在乎它是不是继承来的属性,比如一个配置对象的键值对。对于原型链上的方法查找,它就显得力不从心了。

js如何获取原型链上的所有方法

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

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

BIWEB WMS门户网站PHP开源建站系统5.8.3
BIWEB WMS门户网站PHP开源建站系统5.8.3

BIWEB 门户版几经周折,最终与大家见面了。BIWEB门户版建立在ArthurXF5.8.3底层上,有了更加强大的功能。 BIWEB WMS v5.8.3 (2010.1.29) 更新功能如下: 1.修正了底层getInfo方法中的调用参数,做到可以根据字段进行调用。 2.修正了栏目安装和卸载后,跳转链接的错误。 3.修正所有栏目分类系统,提交信息页面错误。 4.新增后台删除信息后仍停留原分

下载

最直接、最常用的方法就是使用

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获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

536

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

372

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

706

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

470

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

388

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

989

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

652

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

537

2023.09.20

笔记本电脑卡反应很慢处理方法汇总
笔记本电脑卡反应很慢处理方法汇总

本专题整合了笔记本电脑卡反应慢解决方法,阅读专题下面的文章了解更多详细内容。

1

2025.12.25

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
swoole进程树解析
swoole进程树解析

共4课时 | 0.2万人学习

golang和swoole核心底层分析
golang和swoole核心底层分析

共3课时 | 0.1万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号