JavaScript with
with 语句就可以扩展语句的作用域链。——MDN
with 可以指定块的作用域,特别是在访问对象成员时,它使得非常简洁。
with (表达式) {
块;
}
表达式通常会直接给定对象。
var person = {
name: '小明',
age: ,
major: 'english',
};
with (person) {
console.log(name); // :"小明"
console.log(age); // :666
console.log(major); // :"english"
}
可以看到,with 块内的变量,实际上是 person
对象的。
在 with 语句中,访问变量会先去看这个变量是不是在给定的对象中作为存在,如果存在,则取对象中的值,否则继续往上层找。
尽管 with 很方便,但 with 会造成诸多的问题。
先看这段:
function fn(block, height) {
with (block) {
console.log(height);
}
}
这样的,有点让阅读的人难以理解具体含义。
阅读的时候,无法确定 height 要取 block 下的,还是要取形参 height。
function fn(obj) {
with (obj) {
b = ;
}
}
这个场景其实和上面的类似,假如 obj 中没有 b ,则会造成上层作用域的污染。
事实上很少有前端开发者会使用 with,在很长篇幅的中,with 会让逻辑变得不清晰,需要反复确认作用域。
尽可能的避免使用 with ,使用短变量名和合理的空行来使变得整洁易懂。
var family = [
{
seniority: '子',
name: '小明',
detail: {
birth: '1192/01/22',
sex: 'man',
hand: ,
leg: ,
deposit: ,
},
},
];
// 不好的表述形式
family[].detail.birth = '1122/22/11';
family[].detail.sex = '?';
var deposit = family[].detail.family[].detail;
// 取出要操作的数据 并控制空行
var detail = family[].detail;
detail.birth = '2312/22/33';
detail.sex = '未知性别';
var deposit = detail.deposit;
with 的使用需要谨慎,尽量在可控范围内使用。
使用 with 常见的遇到问题的情况,都是恰巧污染了上层作用域,又恰巧污染的是同名的变量,这也产生的 bug 定位也相对困难。
前端框架 Vue 将 template 转化成 render 的时候就用到了 with。