js如何检测原型上的不可枚举属性

要检测javascript原型上的不可枚举属性,必须遍历原型链并使用object.getownpropertydescriptor检查属性描述符,因为for…in循环仅枚举可枚举属性;1. 使用object.getownpropertynames获取对象自身的所有字符串属性,包括不可枚举的;2. 使用object.getownpropertysymbols获取symbol类型属性,以确保不遗漏;3. 合并两种属性并遍历,通过object.getownpropertydescriptor判断enumerable是否为false;4. 将符合条件的属性及其描述符和所属对象记录到结果数组;5. 沿原型链向上重复该过程直到原型为null;6. 若需避免同名属性覆盖问题,可在添加前检查结果数组中是否已存在同名属性,确保只保留原型链上首次出现的不可枚举属性;该方法完整覆盖了字符串和symbol类型的不可枚举属性检测,并可灵活处理属性重复问题,最终返回包含所有必要信息的非重复结果数组。

js如何检测原型上的不可枚举属性

检测JavaScript原型上的不可枚举属性,关键在于遍历原型链并使用

Object.getOwnPropertyDescriptor

检查每个属性的描述符。这是一个需要细致操作的过程,因为常规的

for...in

循环只会枚举可枚举的属性。

js如何检测原型上的不可枚举属性

解决方案:

要检测JavaScript原型上的不可枚举属性,你需要遍历原型链,并使用

Object.getOwnPropertyDescriptor

来检查每个属性的描述符。下面是一个示例函数,可以实现这个功能:

js如何检测原型上的不可枚举属性

function getNonEnumerableProperties(obj) {  const nonEnumerableProps = [];  let current = obj;  while (current) {    const props = Object.getOwnPropertyNames(current); // 获取所有属性,包括不可枚举的    props.forEach(prop => {      const descriptor = Object.getOwnPropertyDescriptor(current, prop);      if (descriptor && !descriptor.enumerable) {        nonEnumerableProps.push({          object: current, // 属性所在的对象          property: prop,  // 属性名          descriptor: descriptor // 属性描述符        });      }    });    current = Object.getPrototypeOf(current); // 移动到原型链的下一个对象  }  return nonEnumerableProps;}// 示例用法const myObject = {};Object.defineProperty(myObject, 'nonEnumProp', {  value: '这是一个不可枚举的属性',  enumerable: false});const nonEnumProps = getNonEnumerableProperties(myObject);nonEnumProps.forEach(item => {  console.log(`对象: ${item.object.constructor.name || 'Object'}`);  console.log(`属性名: ${item.property}`);  console.log(`属性描述符:`, item.descriptor);  console.log('---');});

这个函数会沿着原型链向上查找,直到到达

null

(原型链的终点)。对于每个对象,它会使用

Object.getOwnPropertyNames

获取所有属性名,包括不可枚举的属性。然后,使用

Object.getOwnPropertyDescriptor

获取每个属性的描述符,并检查

enumerable

属性是否为

false

。如果是,就将该属性添加到结果数组中。

为什么

for...in

循环不行?因为它只会枚举可枚举的属性,而我们的目标是找到 不可枚举 的属性。

js如何检测原型上的不可枚举属性

如何处理Symbol类型的不可枚举属性?

Symbol类型的属性需要单独处理,因为

Object.getOwnPropertyNames

不会返回Symbol类型的属性。你需要使用

Object.getOwnPropertySymbols

来获取Symbol类型的属性,然后像处理字符串类型的属性一样,使用

Object.getOwnPropertyDescriptor

来检查它们的描述符。

function getNonEnumerablePropertiesWithSymbols(obj) {  const nonEnumerableProps = [];  let current = obj;  while (current) {    const stringProps = Object.getOwnPropertyNames(current);    const symbolProps = Object.getOwnPropertySymbols(current);    [...stringProps, ...symbolProps].forEach(prop => {      const descriptor = Object.getOwnPropertyDescriptor(current, prop);      if (descriptor && !descriptor.enumerable) {        nonEnumerableProps.push({          object: current,          property: prop,          descriptor: descriptor        });      }    });    current = Object.getPrototypeOf(current);  }  return nonEnumerableProps;}// 示例用法 (假设我们有一个Symbol类型的不可枚举属性)const mySymbol = Symbol('mySymbol');const myObjectWithSymbol = {};Object.defineProperty(myObjectWithSymbol, mySymbol, {    value: '这是一个Symbol类型的不可枚举属性',    enumerable: false});const nonEnumPropsWithSymbols = getNonEnumerablePropertiesWithSymbols(myObjectWithSymbol);nonEnumPropsWithSymbols.forEach(item => {    console.log(`对象: ${item.object.constructor.name || 'Object'}`);    console.log(`属性名: ${String(item.property)}`); // Symbol需要转换为字符串才能显示    console.log(`属性描述符:`, item.descriptor);    console.log('---');});

这段代码首先使用

Object.getOwnPropertySymbols

获取对象自身的所有Symbol类型的属性。然后,它将字符串类型的属性和Symbol类型的属性合并到一个数组中,并遍历该数组,检查每个属性的描述符,以确定它是否是不可枚举的。注意,Symbol类型的属性需要转换为字符串才能在控制台中显示。

原型链上的属性覆盖问题怎么处理?

当原型链上存在同名属性时,需要注意属性覆盖的问题。例如,如果一个对象自身定义了一个与原型链上的不可枚举属性同名的属性,那么该对象自身的属性会覆盖原型链上的属性。

在检测不可枚举属性时,我们需要明确目标:是查找 所有 原型链上的不可枚举属性,还是只查找 最先找到的 不可枚举属性。 如果只需要最先找到的,那么在找到第一个不可枚举属性后,就可以停止在当前原型链上的搜索。 如果需要查找所有,则需要继续遍历整个原型链。

function getAllNonEnumerableProperties(obj) {    const nonEnumerableProps = [];    let current = obj;    while (current) {        const props = Object.getOwnPropertyNames(current);        props.forEach(prop => {            const descriptor = Object.getOwnPropertyDescriptor(current, prop);            if (descriptor && !descriptor.enumerable) {                // 检查是否已经存在同名属性,如果存在则跳过                if (!nonEnumerableProps.some(item => item.property === prop)) {                    nonEnumerableProps.push({                        object: current,                        property: prop,                        descriptor: descriptor                    });                }            }        });        current = Object.getPrototypeOf(current);    }    return nonEnumerableProps;}

在这个修改后的版本中,我们在将不可枚举属性添加到结果数组之前,首先检查是否已经存在同名属性。如果存在,则跳过该属性,以避免重复添加。 这样,我们就可以确保结果数组中只包含原型链上最先找到的不可枚举属性。

以上就是js如何检测原型上的不可枚举属性的详细内容,更多请关注php中文网其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1514797.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 08:41:52
下一篇 2025年12月20日 08:42:04

相关推荐

  • CSS mask属性无法获取图片:为什么我的图片不见了?

    CSS mask属性无法获取图片 在使用CSS mask属性时,可能会遇到无法获取指定照片的情况。这个问题通常表现为: 网络面板中没有请求图片:尽管CSS代码中指定了图片地址,但网络面板中却找不到图片的请求记录。 问题原因: 此问题的可能原因是浏览器的兼容性问题。某些较旧版本的浏览器可能不支持CSS…

    2025年12月24日
    900
  • 为什么设置 `overflow: hidden` 会导致 `inline-block` 元素错位?

    overflow 导致 inline-block 元素错位解析 当多个 inline-block 元素并列排列时,可能会出现错位显示的问题。这通常是由于其中一个元素设置了 overflow 属性引起的。 问题现象 在不设置 overflow 属性时,元素按预期显示在同一水平线上: 不设置 overf…

    2025年12月24日 好文分享
    400
  • 网页使用本地字体:为什么 CSS 代码中明明指定了“荆南麦圆体”,页面却仍然显示“微软雅黑”?

    网页中使用本地字体 本文将解答如何将本地安装字体应用到网页中,避免使用 src 属性直接引入字体文件。 问题: 想要在网页上使用已安装的“荆南麦圆体”字体,但 css 代码中将其置于第一位的“font-family”属性,页面仍显示“微软雅黑”字体。 立即学习“前端免费学习笔记(深入)”; 答案: …

    2025年12月24日
    000
  • 为什么我的特定 DIV 在 Edge 浏览器中无法显示?

    特定 DIV 无法显示:用户代理样式表的困扰 当你在 Edge 浏览器中打开项目中的某个 div 时,却发现它无法正常显示,仔细检查样式后,发现是由用户代理样式表中的 display none 引起的。但你疑问的是,为什么会出现这样的样式表,而且只针对特定的 div? 背后的原因 用户代理样式表是由…

    2025年12月24日
    200
  • inline-block元素错位了,是为什么?

    inline-block元素错位背后的原因 inline-block元素是一种特殊类型的块级元素,它可以与其他元素行内排列。但是,在某些情况下,inline-block元素可能会出现错位显示的问题。 错位的原因 当inline-block元素设置了overflow:hidden属性时,它会影响元素的…

    2025年12月24日
    000
  • 为什么 CSS mask 属性未请求指定图片?

    解决 css mask 属性未请求图片的问题 在使用 css mask 属性时,指定了图片地址,但网络面板显示未请求获取该图片,这可能是由于浏览器兼容性问题造成的。 问题 如下代码所示: 立即学习“前端免费学习笔记(深入)”; icon [data-icon=”cloud”] { –icon-cl…

    2025年12月24日
    200
  • 为什么使用 inline-block 元素时会错位?

    inline-block 元素错位成因剖析 在使用 inline-block 元素时,可能会遇到它们错位显示的问题。如代码 demo 所示,当设置了 overflow 属性时,a 标签就会错位下沉,而未设置时却不会。 问题根源: overflow:hidden 属性影响了 inline-block …

    2025年12月24日
    000
  • 为什么我的 CSS 元素放大效果无法正常生效?

    css 设置元素放大效果的疑问解答 原提问者在尝试给元素添加 10em 字体大小和过渡效果后,未能在进入页面时看到放大效果。探究发现,原提问者将 CSS 代码直接写在页面中,导致放大效果无法触发。 解决办法如下: 将 CSS 样式写在一个单独的文件中,并使用 标签引入该样式文件。这个操作与原提问者观…

    2025年12月24日
    000
  • 为什么我的 em 和 transition 设置后元素没有放大?

    元素设置 em 和 transition 后不放大 一个 youtube 视频中展示了设置 em 和 transition 的元素在页面加载后会放大,但同样的代码在提问者电脑上没有达到预期效果。 可能原因: 问题在于 css 代码的位置。在视频中,css 被放置在单独的文件中并通过 link 标签引…

    2025年12月24日
    100
  • 为什么在父元素为inline或inline-block时,子元素设置width: 100%会出现不同的显示效果?

    width:100%在父元素为inline或inline-block下的显示问题 问题提出 当父元素为inline或inline-block时,内部元素设置width:100%会出现不同的显示效果。以代码为例: 测试内容 这是inline-block span 效果1:父元素为inline-bloc…

    2025年12月24日
    400
  • 网页设计css样式代码大全,快来收藏吧!

    减少很多不必要的代码,html+css可以很方便的进行网页的排版布局。小伙伴们收藏好哦~ 一.文本设置    1、font-size: 字号参数  2、font-style: 字体格式 3、font-weight: 字体粗细 4、颜色属性 立即学习“前端免费学习笔记(深入)”; color: 参数 …

    2025年12月24日
    000
  • css中id选择器和class选择器有何不同

    之前的文章《什么是CSS语法?详细介绍使用方法及规则》中带了解CSS语法使用方法及规则。下面本篇文章来带大家了解一下CSS中的id选择器与class选择器,介绍一下它们的区别,快来一起学习吧!! id选择器和class选择器介绍 CSS中对html元素的样式进行控制是通过CSS选择器来完成的,最常用…

    2025年12月24日
    000
  • php约瑟夫问题如何解决

    “约瑟夫环”是一个数学的应用问题:一群猴子排成一圈,按1,2,…,n依次编号。然后从第1只开始数,数到第m只,把它踢出圈,从它后面再开始数, 再数到第m只,在把它踢出去…,如此不停的进行下去, 直到最后只剩下一只猴子为止,那只猴子就叫做大王。要求编程模拟此过程,输入m、n, 输出最后那个大王的编号。…

    好文分享 2025年12月24日
    000
  • CSS新手整理的有关CSS使用技巧

    [导读]  1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。  2、无边框。推荐的写法是     1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 …

    好文分享 2025年12月23日
    000
  • CSS中实现图片垂直居中方法详解

    [导读] 在曾经的 淘宝ued 招聘 中有这样一道题目:“使用纯css实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最 在曾经的 淘宝UED 招聘 中有这样一道题目: “使用纯CSS实现未知尺寸…

    好文分享 2025年12月23日
    000
  • CSS派生选择器

    [导读] 派生选择器通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。在 css1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应 派生选择器 通过依据元素在其位置的上下文关系来定义样式,你可以使标…

    好文分享 2025年12月23日
    000
  • CSS 基础语法

    [导读] css 语法 css 规则由两个主要的部分构成:选择器,以及一条或多条声明。selector {declaration1; declaration2;     declarationn }选择器通常是您需要改变样式的 html 元素。每条声明由一个属性和一个 CSS 语法 CSS 规则由两…

    2025年12月23日
    300
  • CSS 高级语法

    [导读] 选择器的分组你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。h1,h2,h3,h4,h5 选择器的分组 你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明…

    好文分享 2025年12月23日
    000
  • CSS id 选择器

    [导读] id 选择器id 选择器可以为标有特定 id 的 html 元素指定特定的样式。id 选择器以 ” ” 来定义。下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色: red {color:re id 选择器 id 选择器可以为标有特…

    好文分享 2025年12月23日
    000
  • 有关css的绝对定位

    [导读] 定位(左边和顶部) css定位属性将是网虫们打开幸福之门的钥匙: h4 { position: absolute; left: 100px; top: 43px }这项css规则让浏览器将 的起始位置精 确地定在距离浏览器左边100象素,距离其 定位(左边和顶部) css定位属性将是网虫们…

    好文分享 2025年12月23日
    000

发表回复

登录后才能评论
关注微信