1 JavaScript中的with語句的作用是為逐級的對象訪問提供命名空間式的速寫方式， 也就是在指定的代碼區域, 直接通過節點名稱調用對象 初次接觸到with用法，是這樣一段代碼： 1 2 3 4 5 6 7 8 9 10 11 12 function validate_email(field,
1 JavaScript中的with語句的作用是為逐級的對象訪問提供命名空間式的速寫方式， 也就是在指定的代碼區域, 直接通過節點名稱調用對象
初次接觸到with用法，是這樣一段代碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 |
function validate_email(field,alerttxt){
with (field){
apos=value.indexOf(@)
dotpos=value.lastIndexOf(.)
if (apos<1||dotpos-apos<2){
alert(alerttxt);
return false;
}else {
return true;
}
}
}
|
with的用法總結如下：
with對象能夠使我們很方便的使用某個對象的一些屬性，而不用每次都去寫對象名.屬性 的形式，直接使用對象名。就像上面的代碼，field是對象，而value是對象的值。若不是有with，我們應該是field.value的形式來使用屬性。使用with去除了多次寫with對象只能使用屬性，而不能改變屬性。
這裡有個很簡單的例子：
傳統的寫法
| 1 2 3 4 5 6 7 8 9 10 11 |
function Lakers(){
this.name = "kobe bryant";
this.age = 28;
this.gender = "boy";
}
//傳統寫法
var people=new Lakers();
var str = "姓名：" + people.name + "<br />";
str += "年齡：" + people.age + "<br />";
str += "性別：" + people.gender;
document.write(str);
|
with寫法
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function Lakers(){
this.name = "kobe bryant";
this.age = 28;
this.gender = "boy";
}
//with寫法
var people=new Lakers();
with(people){
var str = "姓名：" + name + "<br />";
str += "年齡：" + age + "<br />";
str += "性別：" + gender;
document.write(str);
}
|
這樣使用，會得到結果：
姓名: kobe bryant
年齡：28
性別：boy
從下例可以看出with語句的簡潔明瞭，不過在代碼的世界里是很難找到真正的完美。
| 1 2 3 4 5 |
with(document.forms[0]){
name.value = "lee king";
address.value = "Peking";
zipcode.value = "10000";
}
|
對應的傳統寫法：
| 1 2 3 |
document.forms[0].name.value = "lee king";
document.forms[0].address.value = "Peking";
document.forms[0].zipcode.value = "10000";
|
但是，js的解釋器需要檢查with塊中的變數是否屬於with包含的對象，這將使with語句執行速度大大下降，並且導致js語句很難被優化。為了兼顧速度與代碼量可以找到一個比較折衷的方案：
| 1 2 3 4 |
var form = document.forms[0];
form.name.value = "lee king";
form.address.value = "Peking";
form.zipcode.value = "10000";
|
所以在以後的高效代碼開發中我們應該儘可能的避免使用with語句。
2 with方式也可以用來進行樣式的賦值。
js進行樣式的賦值方法大家可以參考JavaScript中用cssText設置css樣式
其中一種方法是：cssText方法:
| 1 2 3 |
var t=document.getElementById(dd);
t.style.cssText=width:200px;height:300px;
|
還可以
| 1 2 3 4 |
with(t.style){
width='300px';
height='300px';
}
|
