深入淺析With的使用

with用于擴展一個語句的作用域鏈，但一般情況下不建議使用with語句，因為它可能是引起混淆錯誤和兼容性問題的根源。在Vue源碼中有使用with語句的功能點，因此在這里將簡介其功能，以助于閱讀框架源碼。

性能的利與弊

利

with語句可以在不造成性能損失的情況下，減少變量的長度。其造成的附加計算量很少。使用'with'可以減少不必要的指針路徑解析運算。但是在大部分情況下，即使不使用with，使用臨時變量來保存指針或者使用call，也能達到同樣的效果。

弊

with語句使得程序在查找變量值時，都是先在指定的對象中查找。所以那些本來不是這個對象的屬性的變量，查找起來將會很慢。

示例

let obj = {     a: 1,     b: 2,     c: 3 } with(obj){     console.log(a)    //1     console.log(b)    //2     console.log(c)    //3 }

這段代碼中，with關聯的obj對象，在with代碼塊中，每個變量都首選被認為是一個局部變量，如果這個局部變量與obj對象的某個屬性同名，則這個局部變量會指向obj對象屬性。

function fn(obj){     with(obj){         a = 1;     } } let obj1 = {     a: 2 } let obj2 = {     b: 3 }  fn(obj1); console.log(obj1.a)     //1  fn(obj2) console.log(obj2.a)     //undefined console.log(a)          //1，變量a被泄漏到全局作用域鏈上

上例中，obj1存在a屬性，obj2沒有a屬性。fn(obj)接收一個obj形參，是一個對象引用，并執行了with(obj)。在with代碼塊的內部，對a實際上是一個引用，將1賦值給了a。

當傳遞obj2給with時，with所聲明的作用域就是obj2，從這個作用域下開始對a進行查詢。obj2的作用域、fn的作用域和全局作用域中都沒有查找到標識符a，因此在非嚴格模式下會自動在全局作用域創建一個全局變量，而嚴格模式下則會拋出ReferenceError錯誤。

性能降低

如果在代碼中使用了with，那么JS引擎在編譯階段只能簡單地假設關于標識符的判斷都將無效，因為編譯器也不能知道傳遞給with的作用域對象到底是誰。因此JS引擎在編譯階段進行的性能優化都將無效。最糟糕的情況，那就是如果出現了with，所有的優化都將變得無意義。最簡單的做法就是不做任何優化，那么運行起來一定會很慢，這將是無法避免的事實。

Vue中的with

Vue 在 compile 的時候，會把 template 生成對應的 render function，而這個 render function中又正好使用了with語句。按照上文來說，不建議使用with語句，為什么在Vue中又會使用到呢？