js里的with，除了剛接觸前端的時(shí)候知道不推薦用以外宇葱，就沒有再有任何的了解和使用。但最近在看阿里巴巴的飛冰項(xiàng)目中的微前端的實(shí)現(xiàn)時(shí)斤彼，在其中沙箱用了with去阻斷沙箱內(nèi)對(duì) window 全局變量的訪問和修改婿滓。在好奇沙箱原理前蜜另，必須溫習(xí)下with
首先with只能在非嚴(yán)格模式中使用古今，通常被當(dāng)做重復(fù)引用同一個(gè)對(duì)象中的多個(gè)屬性的快捷方式闷愤，可以不需要重復(fù)引用對(duì)象本身。
var obj = {
a: 1,
b: 2,
c: void 0
}
with (obj) {
a = a + b;
c = a;
}
console.log(obj.c) // 3
上面看起來寫法確實(shí)簡(jiǎn)潔姆打，但有一個(gè)問題良姆，可能會(huì)導(dǎo)致數(shù)據(jù)泄露，比如：如果上面的obj初始化時(shí)沒有加c這個(gè)變量幔戏，還會(huì)打印出3嗎玛追？結(jié)果是undefined，但c的賦值去哪了闲延？其實(shí)都離不開js的基礎(chǔ)知識(shí)痊剖，這時(shí)涉及的就是作用域鏈了，with里找c屬性垒玲，實(shí)際是找obj.c,下一步發(fā)現(xiàn)沒有這個(gè)屬性陆馁，就往上一個(gè)作用域去找，這時(shí)就是window了合愈，而非嚴(yán)格模式下叮贩，即使沒有聲明c這個(gè)變量，但也會(huì)隱式去聲明并賦值佛析。
或者可以這樣想with里面的運(yùn)行狀況
with (obj) {
a = a + b;
c = a;
}
等于：
function (obj) {
var a = obj.a;
var b = obj.b;
a = a + b;
c = a;
obj.a = a;
obj.b = b;
}()
另外with還有性能問題益老，原因是 瀏覽器JavaScript 引擎會(huì)在編譯階段進(jìn)行數(shù)項(xiàng)的性能優(yōu)化。其中有些優(yōu)化依賴于能夠根據(jù)代碼的詞法進(jìn)行靜態(tài)分析寸莫，并預(yù)先確定所有變量和函數(shù)的定義位置捺萌，才能在執(zhí)行過程中快速找到標(biāo)識(shí)符。但with的話膘茎，無(wú)法確認(rèn)with里的作用域值桃纯。
可以這樣對(duì)比下，性能差距還是挺大的：
function normal() {
console.time("normal");
var obj = {
a: [1, 2, 3]
};
for(var i = 0; i < 100000; i++)
{
var v = obj.a[0];
}
console.timeEnd("normal");
}
normal();
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();
