with 用法

with

已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它,但也许已从相关的 web 标准中移除,也许正准备移除或出于兼容性而保留。请尽量不要使用该特性,并更新现有的代码;参见本页面底部的兼容性表格以指导你作出决定。请注意,该特性随时可能无法正常工作。

with 语句扩展一个语句的作用域链。

用法

语法

with (expression) {statement
}

简化对象上属性的使用

const obj = {a: 1,b: 2,c: 3,
}with (obj) {console.log(a, b, c) // 1 2 3
}

赋值问题

在给属性赋值时可能会有意料之外的结果

const obj = {a: 1,
}with (obj) {b = {}
}console.log(obj.b) // undefined
console.log(b) // {}
console.log(window.b === b) // true

可以看到,如果 obj 上没有 b 属性,实际上创建了一个全局变量 b。不仅实现了预期的功能,还造成了全局变量污染和内存泄漏。

缺点

  • 严格模式下不允许使用 with 语句
  • 可能会造成全局变量污染和内存泄漏
  • 会造成性能问题,因为 with 语句会在每次执行时都会创建一个新的作用域

vue2 源码使用 with

在 vue2 中,模板编译时会将模板转换为 render 函数,而 render 函数中会使用 with 语句,这样就可以在模板中直接使用 vm 上的属性。

const render = new Function('with(this){return _c("div",{attrs:{"id":"app"}},[_c("span",[_v(_s(message))])])}',
)

为什么在 vue2 中使用 with,尤雨溪的解释是:

为啥呢,因为没有什么太明显的坏处(经测试性能影响几乎可以忽略),但是 with 的作用域和模板的作用域正好契合,可以极大地简化模板编译过程。Vue 1.x 使用的正则替换 identifier path 是一个本质上 unsound 的方案,不能涵盖所有的 edge case;而走正经的 parse 到 AST 的路线会使得编译器代码量爆炸。虽然 Vue 2 的编译器是可以分离的,但凡是可能跑在浏览器里的部分,还是要考虑到尺寸问题。用 with 代码量可以很少,而且把作用域的处理交给 js 引擎来做也更可靠。

用 with 的主要副作用是生成的代码不能在 strict mode / ES module 中运行,但直接在浏览器里编译的时候因为用了 new Function(),等同于 eval,不受这一点影响。

当然,最理想的情况还是可以把 with 去掉,所以在使用预编译的时候(vue-loader 或 vueify),会自动把第一遍编译生成的代码进行一次额外处理,用完整的 AST 分析来处理作用域,把 with 拿掉,顺便支持模板中的 ES2015 语法。也就是说如果用 webpack + vue 的时候,最终生成的代码是没有 with 的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/682258.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

寒假学习记录16:Express框架(Node)

后续会补充 1.引入express 1.先下载express框架 创建一个package.json格式的文件,里面写入 {"dependencies": {"express": "~4.16.1" //express版本号} } 然后打开终端输入 npm i 2.引入express模块 const express require(&quo…

如何使用idea连通服务器上的Redis(详细版本)

这里我使用的是阿里云的服务器 打开阿里云的安全组,设置端口为6379 在redis.conf文件中,注释bind 127.0.0.1 将protected-mode设置为no,即关闭保护模式 更改服务器中的防火墙,放行6379端口 # 放行端口 firewall-cmd --zo…

【python】元组

是python中内置的不可变序列 在python中使用()定义元组,元素与元素之间使用英文的逗号分隔 元组中只有一个元素的时候,逗号也不能省略 y(10,) print(y,type(y))元组的创建方式 使用()直接创建元组 元组名(elem1,elem2,...,elemN)使用内置函数tuple()创…

Nacos 的配置管理和配置热更新

一、配置管理的必要性 1. 存在问题 微服务重复配置过多维护成本高:将各个微服务的配置都写到配置管理服务中,单个微服务不去编写配置,而是到配置管理服务中读取配置,实现配置共享,便于修改和维护 业务配置经常变动&a…

【AI视野·今日CV 计算机视觉论文速览 第299期】Mon, 29 Jan 2024

AI视野今日CS.CV 计算机视觉论文速览 Mon, 29 Jan 2024 Totally 55 papers 👉上期速览✈更多精彩请移步主页 Daily Computer Vision Papers Annotated Hands for Generative Models Authors Yue Yang, Atith N Gandhi, Greg TurkGAN 和扩散模型等生成模型已经展示了…

C++:priority_queue模拟实现

C:priority_queue模拟实现 什么是priority_queue模拟实现向上调整算法向下调整算法插入与删除 仿函数 什么是priority_queue priority_queue称为优先级队列。优先级队列是一种特殊的队列,其中每个元素都有一个相关的优先级。元素的优先级决定了它们在队…

【FTP讲解】

FTP讲解 1. 介绍2. 工作原理3. 传输模式4. 安全5. 设置FTP服务器6. FTP命令 1. 介绍 FTP(File Transfer Protocol)是“文件传输协议”的英文缩写,它是用于在网络上进行数据传输的一种协议。FTP是因特网上使用最广泛的协议之一,它…

Python数学建模之回归分析

1.基本概念及应用场景 回归分析是一种预测性的建模技术,数学建模中常用回归分析技术寻找存在相关关系的变量间的数学表达式,并进行统计推断。例如,司机的鲁莽驾驶与交通事故的数量之间的关系就可以用回归分析研究。回归分析根据变量的…

论文阅读:GamutMLP A Lightweight MLP for Color Loss Recovery

这篇文章是关于色彩恢复的一项工作,发表在 CVPR2023,其中之一的作者是 Michael S. Brown,这个老师是加拿大 York 大学的,也是 ISP 领域的大牛,现在好像也在三星研究院担任兼职,这个老师做了很多这种类似的工…

系统架构25 - 软件架构设计(4)

软件架构复用 软件产品线定义分类原因复用对象及形式基本过程 软件产品线 软件产品线是指一组软件密集型系统,它们共享一个公共的、可管理的特性集,满足某个特定市场或任务的具体需要,是以规定的方式用公共的核心资产集成开发出来的。即围绕…

九、OpenCV自带colormap

项目功能实现&#xff1a;每隔1500ms轮流自动播放不同风格图像显示&#xff0c;按下Esc键退出 按照之前的博文结构来&#xff0c;这里就不在赘述了 一、头文件 colormap.h #pragma once #include<opencv2/opencv.hpp> using namespace cv;class ColorMap { public:vo…

Mybatis开发辅助神器p6spy

Mybatis什么都好&#xff0c;就是不能打印完整的SQL语句&#xff0c;虽然可以根据数据来判断一二&#xff0c;但始终不能直观的看到实际语句。这对我们想用完整语句去数据库里执行&#xff0c;带来了不便。 怎么说呢不管用其他什么方式来实现完整语句&#xff0c;都始终不是Myb…

C++ 11新特性之并发

概述 随着计算机硬件的发展&#xff0c;多核处理器已经成为主流&#xff0c;对程序并发执行能力的需求日益增长。C 11标准引入了一套全面且强大的并发编程支持库&#xff0c;为开发者提供了一个安全、高效地利用多核CPU资源进行并行计算的新框架&#xff0c;极大地简化了多线程…

C#面:Static Nested Class 和 Inner Class 有什么不同

这是两种不同的类嵌套方式。 Static Nested Class &#xff1a; 是一个静态嵌套类&#xff0c;它是在外部类中定义的一个静态类。它可以访问外部类的静态成员和方法&#xff0c;但不能直接访问外部类的非静态成员和方法。静态嵌套类可以独立于外部类实例化&#xff0c;即可以…

《Linux 简易速速上手小册》第6章: 磁盘管理与文件系统(2024 最新版)

文章目录 6.1 磁盘分区与格式化6.1.1 重点基础知识6.1.2 重点案例&#xff1a;为新硬盘配置分区和文件系统6.1.3 拓展案例 1&#xff1a;创建交换分区6.1.4 拓展案例 2&#xff1a;使用 LVM 管理分区 6.2 挂载与卸载文件系统6.2.1 重点基础知识6.2.2 重点案例&#xff1a;挂载新…

近十年金融资产收益率

通过掌握大类资产的历年收益率数据&#xff0c;做基于数据的投资&#xff0c;提高胜率和收益率。 下面是同花顺梳理的2014至2023大类金融资产收益率&#xff1a; 基于这个数据&#xff0c;我们再统计两项指标&#xff1a; 1. 每种资产在近十年的投资胜率&#xff08;收益率为…

牛客2024年情人节比赛 娱乐报告

前言 挺欢乐的比赛&#xff0c;有趣 欢迎关注 珂朵莉 牛客周赛专栏 珂朵莉 牛客小白月赛专栏 A. 第二杯半价 思路: 模拟 分奇偶进行讨论 t int(input())for _ in range(t):n, x list(map(int, input().split()))if n % 2 1:print (n//2 * (x (x 1) // 2) x)else:pr…

Fabric自动化部署

Fabric自动化部署是一种基于Python的自动化部署工具&#xff0c;它可以帮助开发人员自动化地执行一系列部署任务&#xff0c;如代码推送、服务器配置更新、文件传输等。 Fabric自动化部署的核心是一个名为fabfile.py的Python文件&#xff0c;其中定义了要执行的部署任务。通过…

力扣-345. 反转字符串中的元音字母

文章目录 力扣题目代码 力扣题目 给你一个字符串 s &#xff0c;仅反转字符串中的所有元音字母&#xff0c;并返回结果字符串。 元音字母包括 ‘a’、‘e’、‘i’、‘o’、‘u’&#xff0c;且可能以大小写两种形式出现不止一次。 示例 1&#xff1a; 输入&#xff1a;s …

RIDERS: Radar-Infrared Depth Estimation for Robust Sensing

RIDERS: 恶劣天气及环境下鲁棒的密集深度估计 论文链接&#xff1a;https://arxiv.org/pdf/2402.02067.pdf 作者单位&#xff1a;浙江大学, 慕尼黑工业大学 代码链接&#xff1a;https://github.com/MMOCKING/RIDERS 1. 摘要&#xff08;Abstract&#xff09; 恶劣的天气条件, …