JavaScript with

with

作用(两点):

  • 改变作用域链
<script type = "text/javascript"> 
    var obj = {
        name : "obj"
    }
    var name = 'window';
    function test(){
        var name = "scope";
        var age = "123";
        with(obj){
            console.log(name);
            console.log(age);
        }
    }
    test();
</script>
//obj 123
<script type = "text/javascript"> 
    var obj = {
        name : "obj"
        var age = "123"
    }
    var name = 'window';
    function test(){
        var name = "scope";
        var age = "123";
        with(obj){
            console.log(name);
            console.log(age);
        }
    }
    test();
</script>
//obj 234

步骤:先找obj里面的AO,再找test里面的AO,最后找GO。

它会改变作用域链,可以让with函数里面的代码的作用域链的最底端变成with括号里面的对象,也就是说这个对象充当了函数块里面的最直接的AO。

with里面的代码会按照正常顺序执行,但是with的括号里面一但添了对象的话,它会把这个对象当做with要执行的代码体的作用域链的最顶端,也就是说它会改变作用域链。

  • 简化代码
<script type = "text/javascript"> 
 var obj = {
    dp1 : {
        xiaozhang : {
            name : "abc",
            age : 123
            },
        xiaoli : {
            name : "bcd",
            age : 234,
            }
        },
    dp2 : {
        xioa'wan : {
            name : "chong",
            age : 22,
            },
        },
}
with(obj.dp1.xiaozhang){
    console.log(name);
    console.log(age);
}
</script>
//abc bcd
  • 但是通过with修改了作用域链,消耗了大量的内存,效率是很慢的。
### 关于 JavaScript 中 `with` 语句的使用 #### 定义与功能 `with` 语句用于为一组语句创建一个新的作用域,该作用域基于指定的对象。在这个新作用域中,属性名可以直接访问而无需通过对象前缀来限定[^3]。 ```javascript var obj = { property1: "value1", property2: "value2" }; // 使用 with 语句简化写法 with (obj) { console.log(property1); // 输出 value1 console.log(property2); // 输出 value2 } ``` 尽管这种语法可以减少重复书写对象名称的工作量,但它也带来了潜在的风险和不推荐使用的理由。 #### 不推荐的原因 ECMAScript 标准委员会以及许多开发者社区都不建议使用 `with` 语句。主要原因在于它可能导致代码难以维护并引发意外行为。具体来说: - **性能问题**:解析器需要额外的时间去查找变量是在局部还是全局范围内定义的,这会降低执行效率[^4]。 - **可读性和调试困难**:当嵌套多个 `with` 或者与其他复杂逻辑混合时,理解程序流变得非常棘手。 - **模块化开发中的冲突**:现代前端框架提倡组件化的编程方式,在这样的环境中滥用 `with` 可能引起命名空间污染等问题。 因此,《JavaScript权威指南》第六版提到:“由于这些原因,应该避免使用 `with`。”[^5] #### 替代方案 如果目的是为了减少冗余路径表达,则可以通过临时赋值实现相同效果而不引入副作用: ```javascript function process(obj){ var p = obj.property; // 明确声明本地副本 doSomething(p); } process({ property:"exampleValue" }); ``` 或者利用解构赋值特性(ES6+),这是更简洁安全的方法之一: ```javascript const {property} = someObject; console.log(property); ``` 以上方法不仅保持了清晰度还提高了兼容性与稳定性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值