JavaScript with 語句用法

對於with語句的評價莫衷一是，有的說能夠有效的節省程式碼，有的說破壞作用域鏈造成程式碼執行效率下降等，這些姑且不去深究，這下面介紹一下它用法，對它的概念和用法有初步的瞭解。

一.with語句的基本概念:

此語句可以為一個或者一組語句指定預設物件，可以縮小程式碼量。

語法結構：

[JavaScript] 純文字檢視 複製程式碼
with (object){
  statements 
}

（1）.object:指定的預設物件。

（2）.statements：一個或者一組語句，使用指定的object作為預設物件。

程式碼例項如下:

[JavaScript] 純文字檢視 複製程式碼
var a=document.getElementById("x");
var b=document.getElementById("y");
document.write("大家好")

以上程式碼是document物件呼叫它的方法，使用with語句，程式碼可以修改如下:

[JavaScript] 純文字檢視 複製程式碼
with(document){
  var a=getElementById("x");
  var b=getElementById("y");
  write("大家好")
}

可以看到，with語句可以為大括號（{}）中的語句指定預設物件，於是大括號中使用getElementById方法或者write方法時，可以省略doucment。再來看一個例項鞏固一下:

[JavaScript] 純文字檢視 複製程式碼
with(document.forms[0]){
  username.value="";
  pw.value="";
  phone.value="";
}

以上程式碼中將第一個表單設定為大括號中所有語句的預設物件，這樣就不用在每一條語句前面都新增document.forms[0]。由此可見with語句確實能夠省略不少程式碼量，讓內碼表比較整潔。

二.with語句能夠暫時修改作用域鏈：

[JavaScript] 純文字檢視 複製程式碼
with (object){
   statements
}

with語句能夠暫時擴充套件作用域鏈，它會把object物件暫時放置於作用域鏈的頂端，然後去執行大括號中的程式碼主體部分，這時候當需要解析識別符號的時候，就會在object物件中查詢。程式碼主體部分執行完畢，此臨時作用域鏈就會被清除，作用域鏈恢復到原來狀態。下面分一下一段程式碼例項：

[JavaScript] 純文字檢視 複製程式碼
with(document.forms[0]){
  username.value="";
  pw.value="";
  phone.value="";
}

以上程式碼中，with語句會把document.forms[0]物件新增到作用域的頂端，當查詢username、pw和phone這些識別符號的時候就會在document.forms[0]物件中查詢，一旦with語句執行完畢，作用域鏈恢復到原來狀態。

注意：with語句中，只有在查詢識別符號的時候才會用到這個臨時作用域，其他比如建立變數等操作中，with將會被當做一個普通程式碼塊，也就不具有臨時作用域效果。例項程式碼如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
var person={
    a:"北京",
    b:"歡迎您",
  }
  function fn(){
    with(person){
      a="美國";
      c="日本";
    }
  }
fn()
console.log(person.a);//美國
console.log(person.c);//undefined
console.log(c);//日本

person物件具有a屬性，所以在with語句中，可以將屬性a的值改為“美國”，但是由於person物件不具有屬性c，所以這個時候就屬於建立一個變數並賦值，這是with語句僅相當於一個普通的塊（和for語句一個性質）由於c前面沒有使用var顯式宣告，所以c是一個全域性變數。