当前位置: 首页 > news >正文

Javascript数组研究09_Array.prototype[Symbol.unscopables]

Symbol.unscopables 是 JavaScript 中一个相对较新的符号(Symbol),用于控制对象属性在 with 语句中的可见性。它主要用于内置对象,如 Array.prototype,以防止某些方法被引入到 with 语句的作用域中,避免潜在的命名冲突和意外覆盖。


Symbol.unscopables 简介

  • 符号(Symbol)

    • 在 ECMAScript 6 中引入,符号是一种新的基本数据类型,用于创建独一无二的标识符。
  • Symbol.unscopables

    • 是一个内置符号,用于定义哪些属性在使用 with 语句时 不会 被引入到作用域中。
    • 它的值通常是一个对象,属性名对应要排除的属性,属性值为 true 表示该属性在 with 语句中不可见。
      -Array.prototype[Symbol.unscopables] 的属性特性
属性特性是/否
可写
可枚举
可配置
  • 原型是null
    • 因此不会意外地使 Object.prototype 属性(比如 toString)变为非作用域属性,而令在 with 语句中调用数组的 toString() 方法仍然有效。

为什么需要 Symbol.unscopables

  • with 语句的作用

    • with 语句用于将一个对象的属性作为当前作用域的变量。这在某些情况下可以简化代码,但也可能导致命名冲突和调试困难。
    const obj = { a: 1, b: 2 };
    with (obj) {console.log(a); // 1console.log(b); // 2
    }
    
  • 潜在问题

    • 当对象拥有与当前作用域中已有变量相同名称的属性时,会导致意外覆盖。
    • 为了解决这个问题,JavaScript 提供了 Symbol.unscopables,允许对象指定哪些属性在 with 语句中不可见。

Array.prototype[Symbol.unscopables] 的工作原理

  • 内置排除

    • 为了防止数组方法(如 keys, values, entries 等)在 with 语句中引起冲突,Array.prototype 定义了 Symbol.unscopables 属性。
  • 示例

    console.log(Array.prototype[Symbol.unscopables]);
    // 输出:
    // {
    //   copyWithin: true,
    //   entries: true,
    //   fill: true,
    //   find: true,
    //   findIndex: true,
    //   includes: true,
    //   keys: true,
    //   values: true
    // }
    
    • 这意味着在 with (array) 语句中,这些方法不会被自动引入到作用域中。
  • 目的

    • 确保在使用 with 语句时,数组的方法不会覆盖作用域中已有的变量或函数,避免命名冲突。

使用 Symbol.unscopables 的示例

示例 1:默认行为
const array = [1, 2, 3];with (array) {console.log(length); // 3console.log(keys);    // ReferenceError: keys is not defined
}
  • 解释
    • length 是数组的一个属性,没有被排除,因此可以在 with 语句中直接访问。
    • keys 是数组的方法,并被 Symbol.unscopables 排除,因此在 with 语句中不可见,导致 ReferenceError
示例 2:自定义对象使用 Symbol.unscopables

假设您有一个自定义对象,并希望在 with 语句中排除某些属性:

const myObject = {a: 10,b: 20,c: 30,[Symbol.unscopables]: {b: true}
};with (myObject) {console.log(a); // 10console.log(b); // ReferenceError: b is not definedconsole.log(c); // 30
}
  • 解释
    • 属性 bSymbol.unscopables 排除,因此在 with 语句中无法访问,导致 ReferenceError
    • 属性 ac 没有被排除,可以正常访问。
示例 3:实现自定义 unscopables
const myArray = [1, 2, 3];// 自定义方法
myArray.customMethod = function() {return 'custom';
};// 定义 unscopables
myArray[Symbol.unscopables] = {customMethod: true
};with (myArray) {console.log(customMethod); // ReferenceError: customMethod is not defined
}
  • 解释
    • 尽管 myArray 拥有 customMethod,但通过 Symbol.unscopables 排除了该方法在 with 语句中的可见性。

注意事项

  1. with 语句的局限性

    • with 语句在严格模式下是禁止的,因为它会导致作用域链的不明确和潜在的性能问题。
    'use strict';
    const obj = { a: 1 };
    with (obj) { // SyntaxError: Strict mode code may not include a with statementconsole.log(a);
    }
    
  2. 类数组对象的 unscopables

    • Array.prototype 这样的内置对象通常会定义 Symbol.unscopables,确保其方法不会在 with 语句中意外引入,从而保持代码的健壮性。

总结

Symbol.unscopables 是一个用于控制对象属性在 with 语句中可见性的符号属性。它允许对象明确指定哪些属性在使用 with 语句时应被排除,防止命名冲突和意外覆盖。尽管 with 语句在现代 JavaScript 开发中不推荐使用,理解 Symbol.unscopables 有助于深入了解 JavaScript 语言的设计和内置对象的行为。

如果您正在开发需要处理作用域链或动态属性访问的高级功能,了解并合理使用 Symbol.unscopables 将是有益的。然而,对于大多数日常开发任务,遵循明确的作用域管理和避免使用 with 语句是更好的选择。

相关文章:

Javascript数组研究09_Array.prototype[Symbol.unscopables]

Symbol.unscopables 是 JavaScript 中一个相对较新的符号(Symbol),用于控制对象属性在 with 语句中的可见性。它主要用于内置对象,如 Array.prototype,以防止某些方法被引入到 with 语句的作用域中,避免潜在…...

SkyWalking 自定义链路追踪

对项目中的业务方法&#xff0c;实现链路追踪&#xff0c;方便我们排查问题 引入依赖 <!‐‐ SkyWalking 工具类 ‐‐> <dependency> <groupId>org.apache.skywalking</groupId> <artifactId>apm‐toolkit‐trace</artifactId> <vers…...

Linux驱动开发(速记版)--设备模型

第八十章 设备模型基本框架-kobject 和 kset 80.1 什么是设备模型 设备模型使Linux内核处理复杂设备更高效。 字符设备驱动适用于简单设备&#xff0c;但对于电源管理和热插拔&#xff0c;不够灵活。 设备模型允许开发人员以高级方式描述硬件及关系&#xff0c;提供API处理设备…...

动手学深度学习(李沐)PyTorch 第 6 章 卷积神经网络

李宏毅-卷积神经网络CNN 如果使用全连接层&#xff1a;第一层的weight就有3*10^7个 观察 1&#xff1a;检测模式不需要整张图像 很多重要的pattern只要看小范围即可 简化1&#xff1a;感受野 根据观察1 可以做第1个简化&#xff0c;卷积神经网络会设定一个区域&#xff0c…...

新编英语语法教程

新编英语语法教程 1. 新编英语语法教程 (第 6 版) 学生用书1.1. 目录1.2. 电子课件 References A New English Grammar Coursebook 新编英语语法教程 (第 6 版) 学生用书新编英语语法教程 (第 6 版) 教师用书 1. 新编英语语法教程 (第 6 版) 学生用书 https://erp.sflep.cn/…...

Golang 服务器虚拟化应用案例

推荐学习文档 golang应用级os框架&#xff0c;欢迎stargolang应用级os框架使用案例&#xff0c;欢迎star案例&#xff1a;基于golang开发的一款超有个性的旅游计划app经历golang实战大纲golang优秀开发常用开源库汇总想学习更多golang知识&#xff0c;这里有免费的golang学习笔…...

Elasticsearch基础_4.ES搜索功能

文章目录 一、搜索辅助功能1.1、指定返回的字段1.2、结果计数1.3、结果分页 二、搜索匹配功能2.1、查询所有文档2.2、term级别查询2.2.1、term查询2.2.2、terms查询2.2.3、range查询2.2.4、exists查询 2.3、布尔查询2.3.1、must&#xff0c;should&#xff0c;must_not2.3.2、f…...

Elasticsearch要点简记

Elasticsearch要点简记 1、ES概述2、基础概念&#xff08;1&#xff09;索引、文档、字段&#xff08;2&#xff09;映射&#xff08;3&#xff09;DSL 3、架构原理4、索引字段的数据类型5、ES的三种分页方式&#xff08;1&#xff09;深度分页&#xff08;fromsize&#xff09…...

【通信协议】IIC通信协议详解

IIC&#xff08;Inter-Integrated Circuit&#xff09;通信协议&#xff0c;又称为I2C&#xff08;Inter-Integrated Circuit 2&#xff09;协议&#xff0c;是一种广泛使用的串行通信协议。它由Philips Semiconductor&#xff08;现NXP Semiconductors&#xff09;开发&#x…...

2024年中国科技核心期刊目录(社会科学卷)

2024年中国科技核心期刊目录 &#xff08;社会科学卷&#xff09; 序号 期刊代码 期刊名称 1 SC02 JOURNAL OF S…...

用Python集成免费IP归属地查询API

IP查询的优势是什么&#xff1f; IP查询是一种强大的工具&#xff0c;能够快速提供关于IP地址的信息&#xff0c;如地理位置、互联网服务提供商&#xff08;ISP&#xff09;、连接类型等。这些数据在多种场景下都非常有用&#xff0c;帮助用户理解网络环境和用户行为。 首先&…...

C 数组

C 数组 数组是C语言中的一种基本数据结构&#xff0c;用于存储一系列相同类型的数据。它是连续的内存分配&#xff0c;允许通过索引快速访问元素。本文将详细介绍C数组的概念、使用方法、以及注意事项。 1. 数组的概念 数组是一个集合&#xff0c;可以存储一定数量的元素。在…...

【Unity】unity安卓打包参数(个人复习向/有不足之处欢迎指出/侵删)

1.Texture Compression 纹理压缩 设置发布后的纹理压缩格式 Use Player Settings:使用在播放器设置中设置的纹理压缩格式 ETC&#xff1a;使用ETC格式&#xff08;兼容&#xff09; ETC2&#xff1a;使用ETC2格式&#xff08;很多设备不支持&#xff09; ASTC&#xff1a;使用…...

C0016.Clion中qDebug()打印输出中文时,都是问号??????的解决办法

问题描述 在clion中使用qDebug打印输出中文内容时&#xff0c;都是&#xff1f;&#xff1f;&#xff1f;&#xff1f;&#xff1f;如下图&#xff1a; 注意&#xff1a;修改该文件的编码格式就行&#xff0c;该文件名为apr.cpp&#xff1b; 解决办法...

C++ priority_queue 优先队列构造大根堆和小根堆

priority_queue的三个参数 template <class T, class Container std::vector<T>, class Compare std::less<typename Container::value_type>> class priority_queue;1、元素类型 2、底层容器类型&#xff0c;默认vector 3、比较函数&#xff08;传入的是…...

音视频入门基础:FLV专题(9)——Script Tag简介

一、SCRIPTDATA 根据《video_file_format_spec_v10_1.pdf》第75页到76页&#xff0c;如果某个Tag的Tag header中的TagType值为18&#xff0c;表示该Tag为Script Tag&#xff08;脚本Tag&#xff0c;又称Data Tag、SCRIPTDATA tag&#xff09;。这时如果Filter的值不为1表示未加…...

Vue页面,基础配置

最简单页面 日期范围及字符搜索&#xff0c;监听器处理日期范围搜索控件清空重置问题导出、导出文件文件名称带日期时间表格日期指定格式显示。。。 <template><div class"app-container"><el-form :model"queryParams" ref"queryForm…...

(杨辉三角) 攻防世界--->notsequence

学习笔记。(不想看可以直接跳正文。) 前言&#xff1a;仿佛又回到高中 - - 只不过&#xff0c;是以另一种形式再次出现。 学习思维为主&#xff0c;做题位次。&#xff08;后面再补。&#xff09; 前置知识&#xff1a; 什么是杨辉三角&#xff1a; 杨辉三角_百度百科 (bai…...

【CTF Web】Pikachu CSRF(get) Writeup(CSRF+GET请求+社会工程学)

CSRF(跨站请求伪造)概述 Cross-site request forgery 简称为“CSRF”&#xff0c;在CSRF的攻击场景中攻击者会伪造一个请求&#xff08;这个请求一般是一个链接&#xff09;&#xff0c;然后欺骗目标用户进行点击&#xff0c;用户一旦点击了这个请求&#xff0c;整个攻击就完成…...

智能工厂的软件设计 作为“程序Program”的中台 之2

Q11、现在&#xff0c;我们再重新理解一下前面所说&#xff1a;三种中台&#xff08;数据中台、技术中台和业务中台&#xff09;作为这个整体的三个整子Holon&#xff0c;合起来是一个 融合了三分法&#xff08; 三分部 的三个中台构成三段式 程序框架&#xff0c;分别用 <h…...

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

如何将联系人从 iPhone 转移到 Android

从 iPhone 换到 Android 手机时&#xff0c;你可能需要保留重要的数据&#xff0c;例如通讯录。好在&#xff0c;将通讯录从 iPhone 转移到 Android 手机非常简单&#xff0c;你可以从本文中学习 6 种可靠的方法&#xff0c;确保随时保持连接&#xff0c;不错过任何信息。 第 1…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

IP如何挑?2025年海外专线IP如何购买?

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

处理vxe-table 表尾数据是单独一个接口,表格tableData数据更新后,需要点击两下,表尾才是正确的

修改bug思路&#xff1a; 分别把 tabledata 和 表尾相关数据 console.log() 发现 更新数据先后顺序不对 settimeout延迟查询表格接口 ——测试可行 升级↑&#xff1a;async await 等接口返回后再开始下一个接口查询 ________________________________________________________…...