电脑技术学习

JavaScript慎用with

dn001

像我这样最初并不是系统学习JavaScript的人,看到with这个东西的第一感觉是兴奋——不用再重复地写“element.style.xxx = …”了,只需要

view plaincopy to clipboardprint?
with (element.style) {
xxx = ...;
yyy = ...;
...
};

with (element.style) {
xxx = ...;
yyy = ...;
...
}但是作为解释型语言,JavaScript都需要在运行时来决定xxx/yyy到底是什么东西。对每一个名字(不仅仅是被赋值的,也包括读取的变量!)它会首先去在with括号里的对象的属性里去寻找,然后才会找局部变量,最后是全局变量。在JavaScript的虚拟机、JIT技术普及之前,这种性能问题需要非常的注意。

正确的做法是给element.style做一个local variable的cache:

view plaincopy to clipboardprint?
var es = element.style;
es.xxx = ...;
es.yyy = ...;
...;

var es = element.style;
es.xxx = ...;
es.yyy = ...;
...这样不仅相对减少了代码大小,同时性能上也比element.style.xxx = … 要好得多。