[JS] 动态执行JS与修改词法作用域
cnblogs 2024-06-17 14:11:00 阅读 95
JS中有一些操作可以动态地执行JS代码,并修改或新建词法作用域,这种操作虽然带来了更多的灵活性,但是会严重地影响到性能。
相关可行的操作
eval
: 同步执行,当前作用域;setTimeout
: 异步执行,全局作用域;
第1个参数可以传入函数对象,也可以传入字符串,即要执行的代码。
script
: 同步执行,全局作用域;
创建script标签,并设置
innerHTML
为要执行的代码。
Function
: 同步执行,全局作用域。
Function构造函数可以传入字符串,生成一个函数对象。
对词法作用域的影响
eval
eval
可以通过动态地执行JS代码从而修改(欺骗)当前的词法作用域,观察如下代码:
function foo(str, a){
eval(str);
console.log(a, b);
}
var b = 2;
foo("var b=3;", 1); // 1, 3
在函数中,执行eval(..)
将var b=3;
带入该词法作用域,导致console.log(..)
中对b
的右值引用找到的是3
,而不会查询到外部的b=2
。
在默认情况下,eval
会对所处的词法作用域进行修改。
在严格模式下,eval
在运行时有其自己的词法作用域,即其动态执行的JS声明语句不会影响到eval
语句所处的词法作用域。
function foo(str){
"use strict";
eval(str);
console.log(a); // ReferenceError: a is not defined
}
foo("var a = 2;");
with
除了eval
另外可以修改词法作用域的语法是with
关键字。
function foo(obj){
with(obj){
a = 2;
}
}
var o1 = {a: 3};
var o2 = {b: 3};
foo(o1);
console.log(o1.a); // 2
foo(o2);
console.log(o2.a); // undefined
console.log(a); // 2 (a被泄露到全局作用域了)
with
接受一个对象,并将这个对象处理为一个完全隔离的词法作用域,这个对象的属性会被处理为定义在这个作用域内的词法标识符。
所以当o1
传递给with
时,with
声明的作用域是o1
,包含了同o1.a
对应的标识符a
,这个左值引用可以找到目标,并成功完成赋值操作。
当o2
传递给with
时,with
声明的词法作用域会包含同o2.b
对应的标识符b
,但是没有标识符a
,此时赋值操作会进行LHS标识符查询,向外层作用域查找。
由于在o2
的作用域、foo
的函数作用域、全局作用域都没有找到标识符a
,因此当a = 2
执行时,会在全局作用域自动创建一个全局变量(如果是严格模式则不会)。
性能问题
JS引擎会在编译阶段进行性能优化,其中部分优化依赖于根据代码的词法进行静态分析,并预先确定所有变量和函数的定义位置,才能在执行过程中快速找到标识符。
eval
和with
这种可能动态更改词法作用域的操作会导致JS引擎无法在词法分析阶段明确标识符的位置,因此所有优化可能都是无意义的,甚至JS引擎可能在读取代码中使用了eval
和with
,就放弃优化了。
因此,在开发中应该避免使用eval
和with
。
引用
[1] Scope and Closures, Kyle Simpson著(O'Reilly, 2014) 978-1-491-33558-8。
声明
本文内容仅代表作者观点,或转载于其他网站,本站不以此文作为商业用途
如有涉及侵权,请联系本站进行删除
转载本站原创文章,请注明来源及作者。