关于js with语句的一些理解

**注：本文是转载自博客园名为“siwenyu”博主的文章，原文链接地址(https://www.cnblogs.com/siwy/p/4882757.html)** 看红皮书时，发现延长作用域部分，使用with语句延长作用域的原理有些许疑问。一直认为with语句块中也是相当于一个局部作用域，为什么下面这个例子可以返回with语句块中定义的对象呢？

function buildUrl{
    var qs = "?debug=true";

    with(location){
       var url = href + qs;
    }
    return url; //为什么可以访问到with语句块里定义的url呢？？
}

红皮书中解释的是：with语句中接收的对象location变量被添加到了作用域链的前端，慌张的我就认为with语句块也是一个局部作用域，外边环境不可以访问到里面的url。其实看掉了，书中最后一句话的解释：定义的变量就成了环境执行环境的一部分，所以可以作为函数的值被返回！嗯，说的确实很清楚，不过开始的我直接忽略了，自我感觉对初学者来说是比较隐晦的。还好，下面这篇文章解释的清晰易懂，很开心的是终于搞清楚了^_^

今天看到js的with语句部分，书中写到，with语句接收的对象会添加到作用域链的前端并在代码执行完之后移除。看到这里，我有两点疑问，添加到作用域链前端是不是指对象会被放置到作用域链的最底部，然后查找变量时最先查找这个对象（按照我的理解，js的作用域链查找变量的过程是一个冒泡的过程，底部开始往上走，找到了就停止冒泡），第二点就是，执行之后移除是不是指with语句之后就移除那个对象。于是写了一个简单的例子来验证一下。

var b = {a:2};

function sayA(){
    var a = 1;
    with(b){alert(a);}
    alert(a);
}

sayA();

代码运行结果是2和1。这证实了我之前的猜想，因为正常情况，位于作用域链底部的应该是函数的局部变量a，然而with语句中的a却是对象b的字段a，这证明对象b占据了作用域链中最底部的位置。而with语句之后的a的值又变成了1，说明对象b已从作用域链最底部移除。我自己认为在with语句中，这时的执行环境就是对象b，而不是函数，所以首先访问b中的a值。

我尝试在函数外直接访问a，结果当然是undefined，因为这时的执行环境应该是全局环境，而全局环境并没有这个a值，只有通过b.a才可以访问b中的a，所以可以这样说with语句其实还提供了简写访问对象字段的途径。假设b中有50个字段，你要全部访问，正常情况你要写50个b.xxx，而使用with语句只要直接写字段名就行了。

然而，我又有了一个疑问，我在with语句中创建一个变量，这个变量究竟属于谁。如果按照我的理解，这个变量应该属于对象b。

var b = {a:2};

function sayA(obj){
    var a = 1;
    with(b){a=5;c = 6;}
    alert(c);
}

sayA();
alert(b.c);
alert(b.a);

但是，运行结果是6、undefined和5。这说明with语句中的对象并不是作为执行环境添加到作用域链中的，仅仅是作为一个变量添加到with语句所在的执行环境之中，with语句中的变量还是属于with语句所在的执行环境（这里是函数sayA），而对b的字段的改变也会真正影响到b。

总结

在with语句块中，只是改变了对变量的遍历顺序，由原本的从执行环境开始变为从with语句的对象开始。当尝试在with语句块中修改变量时，会搜索with语句的对象是否有该变量，有就改变对象的值，没有就创建，但是创建的变量依然属于with语句块所在的执行环境，并不属于with对象。
离开with语句块后，遍历顺序就会再次变成从执行环境开始。
其实概括来说，和书本所总结的是一致的，with语句接收的对象会添加到作用域链的前端并在代码执行完之后移除。

var b = {a:2};

function sayA(){
    var a = 1;
    with(b){alert(a);}
    alert(a);
}

sayA();

然而，我又有了一个疑问，我在with语句中创建一个变量，这个变量究竟属于谁。如果按照我的理解，这个变量应该属于对象b。

var b = {a:2};

function sayA(obj){
    var a = 1;
    with(b){a=5;c = 6;}
    alert(c);
}

sayA();
alert(b.c);
alert(b.a);

总结

在with语句块中，只是改变了对变量的遍历顺序，由原本的从执行环境开始变为从with语句的对象开始。当尝试在with语句块中修改变量时，会搜索with语句的对象是否有该变量，有就改变对象的值，没有就创建，但是创建的变量依然属于with语句块所在的执行环境，并不属于with对象。
离开with语句块后，遍历顺序就会再次变成从执行环境开始。
其实概括来说，和书本所总结的是一致的，with语句接收的对象会添加到作用域链的前端并在代码执行完之后移除。

关于js with语句的一些理解

总结

总结

猜你喜欢