在 JavaScript 中安全使用“with”[重复]

Question

我能找到的几乎所有记录 with 的资源都警告不要使用它，主要是因为如果未定义变量，它可能会产生不可预知的影响。

我想了解它，以便有效地利用它——毕竟，它的存在是有原因的。即使eval 也有它的非邪恶用途！

因此，考虑到这一点，假设我想从一个元素中删除所有子节点，而不使用 elem.innerHTML = "";

以下是否安全？

with(elem) while(firstChild) removeChild(firstChild);

请注意，此时我关心的不是可读性，而是功能。由于firstChild 是所有元素节点的属性，removeChild 是所有元素节点的方法，所以这样使用with 应该没问题，对吧？

同样，假设我想设置一些样式。

with(elem.style) {
    color = "red";
    backgroundColor = "black";
    fontWeight = "bold";
}

由于所有这些都是样式对象的属性（即使没有在样式表中定义，它们也是空字符串），这样使用with 就可以了，对吧？

我是否遗漏了什么，或者是不断警告不要使用 with 类似于针对 PHP 的 mysql 扩展的警告：防止愚蠢的程序员？

Answer 1

Javascript 中的 with 关键字有点倒退到 90 年代后期它与 VBScript 竞争的时候。它仍然存在，但如果你 'use strict'; 并且几乎所有 Javascript 验证器都认为它存在错误，它就会被禁用。

它有两个主要问题，都与 Javascript 中作用域的工作方式有关：

var color = "green";
var foo = "bar";

with(elem.style) {
    color = "red";
    foo = "something else";
}

color 现在是什么？ foo 是什么？这不仅是令人困惑的代码，而且由于 Javascript 在with 范围内查找变量的方式，它也是非常慢的代码，因为现在每个语句都有一个额外的范围来搜索每个使用的变量。

这是 jQuery 和 Prototype 等现代框架使用链接的原因之一。他们在函数上使用call 和apply 来控制this 代表什么，这意味着您调用this.something 而不是with(this){something}。

所以回答你的问题：在 Javascript 中有一个很好的使用 with - 允许 90 年代编写的 IE4 和 IE5 网站今天仍然有效。

就是这样。您不应该在新代码中使用它。

Answer 2

with 语句只是编写循环访问对象的简写：

对于

foobar.foo.bar.baz = 'bubu';
foobar.foo.bar.buz = 'baba';

你可以写

with(foobar.foo.bar){
    baz = 'bubu';
    buz = 'baba';
}

太好了！但是 foobar.foo.bar 会被修改还是全局变量 baz 和 buz 会被修改？ 在某些情况下，无法确定。

JavaScript 提供了更好的选择

var better = foobar.foo.bar;
better.baz = 'bubu';
better.buz = 'baba';

现在没有歧义了。

Answer 3

with 的唯一安全使用是根本不使用它。没有它就没有任何任务无法完成，现代标准在严格模式下完全禁用它。

出于所有目的，它被视为设计错误，仅为向后兼容而保留。

Answer 4

with 只是将变量放在搜索变量的“映射”堆栈的顶部。

普通堆栈是（从上到下搜索）

• 窗口
• (root - 只需要window)

如果你有

var foo = { document: "doc.pdf" };
window.myFunc = function(){
    with( foo ){
        alert( document );
    }
}

with 内的堆栈是

• 富
• 窗口
• （root - 只拥有window）

它肯定会打印foo.document 而不是window.document。

在这种情况下，很明显您不应该像那样使用document，因为它通常用于浏览器。但是 ECMAScript 规范并没有定义，所以在其他环境中，其他变量可能默认在堆栈上（甚至更多）。

危险在于，无论您在with 语句中调用的任何内容，堆栈中都存在该内容。 这将在document.url 调用中失败：

// Some 3rd-party library
function redirect( url ){
    document.url = url;    // url is undefined in document
}

var bar = { document: "20x20" };

with( bar ){
    redirect(); //
}