js里的with，除了剛接觸前端的時(shí)候知道不推薦用以外，就沒有再有任何的了解和使用。但最近在看阿里巴巴的飛冰項(xiàng)目中的微前端的實(shí)現(xiàn)時(shí)，在其中沙箱用了with去阻斷沙箱內(nèi)對 window 全局變量的訪問和修改。在好奇沙箱原理前，必須溫習(xí)下with

首先with只能在非嚴(yán)格模式中使用，通常被當(dāng)做重復(fù)引用同一個(gè)對象中的多個(gè)屬性的快捷方式，可以不需要重復(fù)引用對象本身。

var obj = {
  a: 1,
  b: 2,
  c: void 0
}

with (obj) {
   a = a + b;
   c = a;
}

console.log(obj.c) // 3

上面看起來寫法確實(shí)簡潔，但有一個(gè)問題，可能會導(dǎo)致數(shù)據(jù)泄露，比如：如果上面的obj初始化時(shí)沒有加c這個(gè)變量，還會打印出3嗎？結(jié)果是undefined，但c的賦值去哪了？其實(shí)都離不開js的基礎(chǔ)知識，這時(shí)涉及的就是作用域鏈了，with里找c屬性，實(shí)際是找obj.c,下一步發(fā)現(xiàn)沒有這個(gè)屬性，就往上一個(gè)作用域去找，這時(shí)就是window了，而非嚴(yán)格模式下，即使沒有聲明c這個(gè)變量，但也會隱式去聲明并賦值。

或者可以這樣想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 引擎會在編譯階段進(jìn)行數(shù)項(xiàng)的性能優(yōu)化。其中有些優(yōu)化依賴于能夠根據(jù)代碼的詞法進(jìn)行靜態(tài)分析，并預(yù)先確定所有變量和函數(shù)的定義位置，才能在執(zhí)行過程中快速找到標(biāo)識符。但with的話，無法確認(rèn)with里的作用域值。

可以這樣對比下，性能差距還是挺大的：

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();