js中的eval和with

左手的ㄟ右手 2022-05-12 04:12 151阅读 0赞

js中有两个方法可以改变词法作用域，eval(...)和with(...)。前者可以接受一段字符串代码来进行演算，并借此来修改已存在的词法作用域，后者本质上是通过将一个对象的引用当作词法作用域，将对象的属性当作作用域中的标识符来处理，从而创建一个新的词法作用域。

首先我们来理解词法作用域的概念：

![作用域][70]

图中的1和2分别表示两个作用域，这里的b变量只能在作用域1中找到，一般来说，变量所在的作用域都与变量声明的位置有关，但是在JS中的eval和with函数可以改变作用域，让变量的作用域与声明时所在的位置无关，我们再来看下面这个例子：

function test(str) {
        eval(str);
        console.log(a + b); //输出3
    }
    test("var a = 1; var b = 2");

这里按照我们的理解，console.log(a + b)应该报出ReferenceError，但是因为eval的存在并且接受一个声明a和b两个变量的字符串导致程序不是我们预期的结果。而a和b的作用域也变成了test函数内。

我们再来看一下with函数：

//我们给一个对象赋值的方式
    var obj = {
        a: 1,
        b: 2,
        c: 3
    }
    //或者
    obj.a = 1;
    obj.b = 2;
    obj.c = 3;
    //使用with函数
    with(obj) {
        a = 1;
        b = 2;
        c = 3;
    }

这种方式不仅仅可以用来方便的访问属性对象，也可以用来改变词法作用域：

首先，当将o1传递给test时，with函数创建了一个o1对象的作用域，并且在这个作用域中找到了a，然后将2赋给a。当o2传递给test时，with函数创建一个o2对象的作用域，然后在这个作用域中没有找到a，接下来根据LHS查找规则，会向上层作用域查找a，这里with创建的o2作用域的上层作用域是test函数，在test中也没有找到，接下来再向上找，也就是全局作用域，在全局作用域中也没找到，然后就会在最上层作用域中创建一个var a = 2。

上面就是eval和with函数的作用，现在我们一般都尽量不会去使用者两个函数，因为在JS的严格模式下会对这两个函数有限制，并且，因为编译器无法知道eval函数和with函数接受到的参数会是什么，所以编译器在编译时很难对代码进行优化，在程序中出现很多eval和with时会使程序变得非常慢。

总之，eval和with可以在运行时修改或创建新的词法作用域，但是我们要尽量避免使用它们。

[70]: /images/20220512/7df1a5819d1a48bd8a5be365eb351113.png