当前位置:澳门贵宾厅 > 澳门贵宾厅 > 听到不推荐with关键字后,如果没有找到
听到不推荐with关键字后,如果没有找到
2020-05-06

时间: 2019-12-16阅读: 64标签: with

词法作用域就是定义在词法阶段(编译器的第一个阶段)的作用域。换句话说,词法作用域是由你在写代码时将变量和块作用域写在哪里决定的,因此当词法分析器处理代码时会保持作用域不变
当引擎查找变量引用的时候,首先从最内部的作用域开始查找,如果没有找到,就往上一级的作用域继续找。作用域查找会在找到第一个匹配的标识符时停止。在多层嵌套作用域中可以定义同名的标识符,这叫做遮蔽效应(内部的标识符遮蔽了外部的标识符)。

说起js中的with关键字,很多小伙伴们的第一印象可能就是with关键字的作用在于改变作用域,然后最关键的一点是不推荐使用with关键字。听到不推荐with关键字后,我们很多人都会忽略掉with关键字,认为不要去管它用它就可以了。但是有时候,我们在看一些代码或者面试题的时候,其中会有with关键字的相关问题,很多坑是你没接触过的,所以还是有必要说说with这一个关键字。


with的基本用法

全局变量会自动成为全局对象(比如浏览器中的window 对象)的属性,因此
可以不直接通过全局对象的词法名称,而是间接地通过对全局对象属性的引
用来对其进行访问。
window.a
通过这种技术可以访问那些被同名变量所遮蔽的全局变量。但非全局的变量
如果被遮蔽了,无论如何都无法被访问到。

with 语句的原本用意是为逐级的对象访问提供命名空间式的速写方式. 也就是在指定的代码区域, 直接通过节点名称调用对象。with 通常被当做重复引用同一个对象中的多个属性的快捷方式,可以不需要重复引用对象本身。比如,目前现在有一个这样的对象:

欺骗词法

即改变词法作用域(会导致性能下降而且被严格模式限制)

  1. eval()
    JavaScript 中的eval(..) 函数可以接受一个字符串为参数,并将其中的内容视为好像在书写时就存在于程序中这个位置的代码。换句话说,可以在你写的代码中用程序生成代码并运行,就好像代码是写在那个位置的一样。
    通常被用来执行动态创建的代码
    function foo(str, a) {
    eval( str ); // 欺骗!
    console.log( a, b );
    }
    var b = 2;
    foo( "var b = 3;", 1 ); // 1, 3
    eval(..) 调用中的"var b = 3;" 这段代码会被当作本来就在那里一样来处理。由于那段代
    码声明了一个新的变量b,因此它对已经存在的foo(..) 的词法作用域进行了修改。事实
    上,和前面提到的原理一样,这段代码实际上在foo(..) 内部创建了一个变量b,并遮蔽
    了外部(全局)作用域中的同名变量。
    当console.log(..) 被执行时,会在foo(..) 的内部同时找到a 和b,但是永远也无法找到
    外部的b。因此会输出“1, 3”而不是正常情况下会输出的“1, 2”。
  2. with()
    如何解释with():它如何同被它所影响的词法作用域进行交互。
    with 通常被当作重复引用同一个对象中的多个属性的快捷方式,可以不需要重复引用对象本身。
    var obj = {
    a: 1,
    b: 2,
    c: 3
    };
    // 单调乏味的重复"obj"
    obj.a = 2;
    obj.b = 3;
    obj.c = 4;
    // 简单的快捷方式
    with (obj) {
    a = 3;
    b = 4;
    c = 5;
    }
    不仅仅是为了方便的访问对象属性
    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内部其实就是一个LHS引用
    为什么会泄露到全局作用域上呢:
var obj = {a: 1,b: 2,c: 3};

如果想要改变 obj 中每一项的值,一般写法可能会是这样:

// 重复写了3次的“obj”obj.a = 2;obj.b = 3;obj.c = 4;

而用了 with 的写法,会有一个简单的快捷方式

with (obj) {a = 3;b = 4;c = 5;}

在这段代码中,使用了 with 语句关联了 obj 对象,这就以为着在 with 代码块内部,每个变量首先被认为是一个局部变量,如果局部变量与 obj 对象的某个属性同名,则这个局部变量会指向 obj 对象属性。

with的弊端

在上面的例子中,我们可以看到,with 可以很好地帮助我们简化代码。但是为什么不推荐使用呢?下面我们来说说with的缺点:

导致数据泄漏

function foo(obj) {with (obj) {a = 2;}}var o1 = {a: 3};var o2 = {b: 3}foo(o1);console.log(o1.a);//2foo(o2);console.log(o2.a);//underfinedconsole.log(a);//a被泄漏到全局作用域上

首先,我们来分析上面的代码。例子中创建了 o1 和 o2 两个对象。其中一个有 a 属性,另外一个没有。foo(obj) 函数接受一个 obj 的形参,该参数是一个对象引用,并对该对象引用执行了with(obj) {...}。在 with 块内部,对 a 有一个词法引用,实际上是一个LHS引用,将 2 赋值给了它。

当我们将 o1 传递进去,a = 2 赋值操作找到了 o1.a 并将 2 赋值给它。而当 o2 传递进去,o2 并没有 a 的属性,因此不会创建这个属性,o2.a 保持 undefined。

但为什么对 o2的操作会导致数据的泄漏呢?

这里需要回到对 LHS查询 的机制问题(详情可移步 JavaScript中的LHS和RHS查询))。

当我们传递 o2 给 with 时,with 所声明的作用域是 o2, 从这个作用域开始对 a 进行 LHS查询。o2 的作用域、foo(…) 的作用域和全局作用域中都没有找到标识符 a,因此在非严格模式下,会自动在全局作用域创建一个全局变量),在严格模式下,会抛出ReferenceError 异常。

另一个不推荐 with 的原因是。在严格模式下,with 被完全禁止,间接或非安全地使用 eval(…) 也被禁止了。

性能下降

with 会在运行时修改或创建新的作用域,以此来欺骗其他在书写时定义的词法作用域。with 可以使代码更具有扩展性,虽然有着上面的数据泄漏的可能,但只要稍加注意就可以避免,难道不是可以创造出很好地功能吗?答案是否定的,具体原因我们先来看下面的这部分代码。

function func() {console.time("func");var obj = {a: [1, 2, 3]};for(var i = 0; i  100000; i++){var v = obj.a[0];}console.timeEnd("func");}func();function funcWith() {console.time("funcWith");var obj = {a: [1, 2, 3]};with(obj) {for(var i = 0; i  100000; i++) {var v = a[0];}}console.timeEnd("funcWith");}funcWith();

在处理相同逻辑的代码中,没用 with 的运行时间仅为 4.63 ms。而用 with 的运用时间长达 81.87ms。这是为什么呢?

原因是 JavaScript 引擎会在编译阶段进行数项的性能优化。其中有些优化依赖于能够根据代码的词法进行静态分析,并预先确定所有变量和函数的定义位置,才能在执行过程中快速找到标识符。但如果引擎在代码中发现了 with,它只能简单地假设关于标识符位置的判断都是无效的,因为无法知道传递给 with 用来创建新词法作用域的对象的内容到底是什么。

最悲观的情况是如果出现了 with ,所有的优化都可能是无意义的。因此引擎会采取最简单的做法就是完全不做任何优化。如果代码大量使用 with 或者 eval(),那么运行起来一定会变得非常慢。无论引擎多聪明,试图将这些悲观情况的副作用限制在最小范围内,也无法避免如果没有这些优化,代码会运行得更慢的事实。

原文:-with/#with的基本用法