with 語法可以達到簡化撰寫存取屬性的目的，不需要重複寫上包含屬性的物件名稱，得以簡化程式碼。但也可以造成變數的使用混淆。

這章想學到什麼？

• 在 with 範圍內參照屬性
• 在 with 屬性範圍內指派
• 為了麼不用 with？ 其一為效能考量

程式碼閱讀練習與撰寫

在 with 範圍內參照屬性

在 with 範圍內會以物件屬性的變數名稱為最高優先權

var katana = {
    isSharp: true,
    use: function(){
        this.isSharp = !this.isSharp;
    }
}

var use = "other"
var show = "me"

with (katana) {
    console.log(use) //ƒ (){
        this.isSharp = !this.isSharp;
    }
    console.log(show)
}

在 with 屬性範圍內指派

在 with 裡面儲存屬性，也會直接更動到物件

var katana = {
    isSharp: true,
    use: function(){
        this.isSharp = !this.isSharp;
    }
}

with (katana) {
    isSharp = false;
    console.log(katana.isSharp) //false
    
    cut = function(){
        console.log("cut!!")
    }
}

katana.cut()

效能考量

with 的使用備受爭議，除了屬性名稱造成混淆外，還有效能問題。下面同樣是一個 for 迴圈，使用物件屬性花了 5 ms, 但使用 with 述句則花了多達 113ms。

var ninja = { foo: "bar" }, value, maxCount = 100000,n, start, elapsed;

start = new Date().getTime();
for (n = 0; n < maxCount; n++) {
    value = ninja.foo;
}
elapsed = new Date().getTime() - start;
console.log("it take ", elapsed) //5

start = new Date().getTime();
with(ninja) {
    for (n = 0; n < maxCount; n++) {
        value = foo;
    }
}
elapsed = new Date().getTime() - start;
console.log("it take ", elapsed) //113

參考資料

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/with