js中的with了解一下

官方提示:已弃用, 不再推荐使用该特性。
虽然一些浏览器仍然支持它，但也许已从相关的 web 标准中移除，也许正准备移除或出于兼容性而保留。

来了解一下为啥要弃用的理由:

语法: with(expression){…}

expression: 将给定的表达式添加到在评估语句时使用的作用域链上。with会创建一个新的作用域，

就是说,with 代码块内部，每个变量首先会指向 expression 对象属性,如果expression 对象上面没有这个属性,那么就会依次向上找,如果一直找不到,最终就会在顶层定义一个属性名的变量,这时候就会发生变量的泄漏

上代码演示吧:

function test(obj){
    with(obj){
        age = 100;
    }
}

我们定义了一个函数,参数为一个对象,我们想通过with的形式给传入的obj对象修改age属性

let obj1 = { name: 'mike', age: 18}
let obj2 = { name: 'lili' }

我们分别定义了两个对象,一个包含age属性,另一个不包含age属性

下面我们来运行一下test方法吧

test(obj1)
obj1 // {name: 'mike', age: 100}
test(obj2)
obj2 // {name: 'lili'}
age // 100

通过代码的执行,我们看到包含age属性的对象,通过with中的执行语句修改了对象的age属性,但是不包含age属性的对象,并没有修改

实际上with中的age = 100,开始的时候会找obj2上面时候有age属性,如果没有,他会往上面找,显然test方法中也没有这个age,那么就会再次往上找,直到全局作用域,还是没有,这时候就会新建一个age属性,然后赋值为100了
显然上面操作obj2的时候是有问题的,我们并不是要在全局新建一个age的属性,而且函数的数据也被泄漏到全局中了

所以,弃用是必须的