ES11 (即 ECMAScript 2020) 的 with 关键字是许多前端开发人员想要掌握的一个重要技能。在本文中，我们将深入了解 with 关键字及其特性，并给出一些实际使用的示例。
with 关键字
with 关键字允许我们在代码块内部访问对象属性，并且不需要显式地指定该属性所属对象的名称。这样可以简化代码，提高可读性。
例如，我们有一个如下所示的对象：
const person = {
firstName: 'John',
lastName: 'Doe'
}使用 with 关键字，我们可以这样访问对象属性：
with (person) {
console.log(firstName + ' ' + lastName);
}以上代码将输出 John Doe。
需要注意的是，with 关键字只在代码块内部有效。因此，在代码块外部访问对象属性时，仍需要显式地指定属性所属的对象。
使用 with 关键字的注意事项
尽管 with 关键字可以简化代码，但也存在一些潜在风险。以下是应该注意的几点：
- with 关键字可能导致命名空间的污染。如果引入的外部库具有与代码块内使用的变量相同的变量名称，则会修改该变量的值，从而导致未知的行为。
- with 关键字可能导致不必要的性能损失。由于 JavaScript 的作用域查找机制，访问对象的属性可能比直接访问具有更多的开销。因此，在需要高性能的代码中，应避免使用 with 关键字。
因此，在使用 with 关键字之前，需要认真考虑其实际应用场景，并做出权衡。
实际应用示例
下面展示两个使用 with 关键字的实际例子。
1. 使用 with 关键字简化访问 DOM 元素
在处理 DOM 元素时，我们经常需要频繁地访问它们的属性和方法。使用 with 关键字可以简化这个过程。
例如，我们有一个 HTML 页面中包含一个 canvas 元素。要获取该元素的 2D 上下文，我们通常使用以下代码：
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');使用 with 关键字，我们可以改写为：
const canvas = document.getElementById('myCanvas');
with (canvas.getContext('2d')) {
fillStyle = 'red';
fillRect(10, 10, 100, 100);
}以上代码将在画布上绘制一个红色矩形。
2. 使用 with 关键字简化访问多层嵌套的对象
在 JavaScript 中，我们有时需要访问多层嵌套的对象。使用 with 关键字可以简化这个过程。
例如，我们有一个嵌套的对象：
-- -------------------- ---- -------
----- ------- - -
----- --- ------
------- -
---------- -------
--------- ------
-------- -
------ ----------------------
-
-
--我们要访问 author 对象中的 contact 对象中的 email 属性，可以使用以下代码：
console.log(website.author.contact.email);
使用 with 关键字，我们可以改写为：
with (website.author.contact) {
console.log(email);
}以上代码将输出 john.doe@example.com。
结论
在本文中，我们介绍了 ES11 中的 with 关键字，讨论了使用它的潜在问题，并展示了一些实际的使用示例。
需要注意的是，with 关键字不是万能的，应该在实际应用场景中进行权衡和选择。尽管如此，with 关键字仍然是一个有用的工具，可以提高代码的可读性和简洁性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6718956cad1e889fe22c9969