javascript中的with關鍵字

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");//88.260ms
}
funcWith();

這段代碼將with語句作用到了obj對象上，然后直接使用a訪問obj的a屬性，按照前面說到的觀點，訪問a屬性時，是一次性就可以在obj上找到該屬性的，但是為什么代碼性能依舊降低了呢。

真正的原因是： 使用了with關鍵字后，JS引擎對這段代碼進行優化 。

JS引擎在代碼之前之前有一個編譯階段，在不使用with關鍵字的時候，js引擎知道a是obj上的一個屬性，它就可以靜態分析代碼來增強標識符的解析，從而優化了代碼，因此代碼執行的效率就提高了。使用了with關鍵字后，js引擎無法分辨出a變量是局部變量還是obj的一個屬性，因此，js引擎在遇到with關鍵字后，它就會對這段代碼放棄優化，所以執行效率就降低了。

使用with關鍵字對性能的影響還有一點就是js壓縮工具，它無法對這段代碼進行壓縮，這也是影響性能的一個因素。

function foo(obj) {
    with (obj) {
        a = 2;
    }
}

var o1 = {
    a: 3
};
var o2 = {
    b: 3
};

foo(o1);
console.log(o1.a); // 2

foo(o2);
console.log( o2.a ); // undefined
console.log( a ); // 2

</div>

這段代碼很容易理解了，在foo函數內，使用了with關鍵字來訪問傳進來的obj對象，然后修改a屬性。當傳入o1對象時，因為o1對象存在著a屬性，所以這樣沒有問題。傳入o2對象時，在修改a屬性時，由于o2對象沒有a這個屬性，所以被修改的a屬性則變成了全局變量。這就造成了潛在的bug。

延伸分析

前面說了那么多，相信大家已經理解了為什么不推薦使用with關鍵字以及可能存在的問題。下面我們來看看一些更復雜的情況，看下面的代碼：

var obj = {
    x: 10,
    foo: function () {
        with (this) {
            var x = 20;
            var y = 30;
            console.log(y);//30
        }
    }
};
obj.foo();
console.log(obj.x);//20
console.log(obj.y);//undefined

var obj = {
    x: 10,
    foo: function () {
        var x;//聲明局部變量x
        var y;//聲明局部變量y
        with (obj) {
            x = 20;//訪問變量x，在obj上找到x，則修改為20
            y = 30;//訪問變量y，在bojg上找不到y，則進一步查找，找到局部變量y，修改為30
            console.log(y);//30//直接輸出局部變量y，
        }
    }
};
obj.foo();
console.log(obj.x);//20，obj.x已被修改為20
console.log(obj.y);//undefined，obj不存在y屬性，則為undefined

({
x: 10,
foo: function () {
    function bar() {
        console.log(x);
        console.log(y);
        console.log(this.x);
    }
    with (this) {
        var x = 20;
        var y = 30;
        bar.call(this);
    }
}
}).foo();