【轉】javascript：with的用法以及延長作用域鏈

weapon 發布于2019-08-23 17:03 / 1708人閱讀

摘要：來看一下語句的作用通俗的說，就是引用對象，并對該對象上的屬性進行操作，其作用是可以省略重復書寫該對象名稱，起到簡化書寫的作用。

原文鏈接：https://www.cnblogs.com/zz334...

《Javascript高級程序設計（第二版）》第66頁中提到：“由于with語句的變量對象是只讀的，結果url就成了函數執行環境的一部分，因而可以作為函數的值被返回?！?，不知道誰看完覺得一頭霧水？

第三版中75頁則更是難懂：“至于with語句內部，則定義了一個url的變量，因此url就成了函數執行環境的一部分，所以可以作為函數的值被返回”

首先來看看他舉的例子：

function buildUrl(){  
     var qs="?debug=true";  
     with(location){  
          var url=href+qs;  
     }  
     return url;  
}  
var result=buildUrl();  
  
alert(result);

如果你沒讀過著本書，并且需要學習javascript，請思考并嘗試運行該例子。
最后彈出的不是undefined，而是你的靜態頁地址+qs的值。

來看一下with語句的作用：

通俗的說，就是引用對象，并對該對象上的屬性進行操作，其作用是可以省略重復書寫該對象名稱，起到簡化書寫的作用。

但是有幾個問題需要注意：

1、with代碼塊中，javascript引擎對變量的處理方式是：先查找是不是該對象的屬性，如果是，則停止。如果不是繼續查找是不是局部變量。（在《Javascript高級程序設計（第二版）》中提到的觀點，跟這一點恰好相反，但是實例可證明其是錯誤的，會在接下來介紹）

2、就算在with語句中使用 var 運算符重新定義變量（該變量是with引用對象的屬性），如果該屬性是可寫屬性，那么也會給對象的屬性賦值。

3、如果你想通過with語句，對引用對象添加多個屬性，并為每個屬性賦值，這是不可能的！也就是說，要賦值的只能是對象已經存在并且可以寫入的屬性（不能是只讀屬性）。

再來看看開頭提到的那句話

“由于with語句的變量對象是只讀的，結果url就成了函數執行環境的一部分，因而可以作為函數的值被返回?！?/p>

反過來：如果with語句的變量對象是可寫入的…… 剛才第3點提過，不能給對象寫入原來不存在的屬性，先這樣理解，下面還有另外的含義。

那延長作用域鏈又是怎么回事？

一般的，“由于with語句塊中作用域的‘變量對象’是只讀的，所以在他本層定義的標識符，不能存儲到本層，而是存儲到它的上一層作用域”。這里又要理解有一層“只讀”的含義。

在Javascript的作用域中（作用域，想想就是函數塊，每個函數都會有個函數名，就算是匿名函數也有個空函數名），那么創建作用域的時候，本層的標識符就可以寄托在這個作用域下，而with語句塊中作用域的‘變量對象’是只讀的，不能存儲標識符，只能存儲在其上一層，這就是延長作用域鏈。其實，這和上面說的不能給對象添加屬性有同工之處。

其實，完全可以這樣理解，在Javascript中，沒有塊級作用域，就是說除了函數，其他的塊級代碼都沒有自己的作用域。

現在說一下之前提到的with代碼塊中變量處理方式的問題

用事實說話：

var o={href:"sssss"};  
var href="1111";  
function buildUrl(){  
     var qs="?debug=true";       
     with(o){  
          href="2222";  
          var url=href+qs;  
     }      
     return url;  
}  
var result=buildUrl();  
alert(result);  //2222?debug=true
alert(href);  //1111

很明顯，with語句中并沒有更改變量href的值，而是更改了 o 對象的 href 屬性。

就是說，with中首先查找的是相關對象的屬性，如果沒有，才改變變量的值。

將以上例子o對象的href屬性去掉

var o={};  
var href="1111";  
function buildUrl(){  
     var qs="?debug=true";       
     with(o){  
          href="2222";  
          var url=href+qs;  
     }      
     return url;  
}  
var result=buildUrl();  
alert(result);  //2222?debug=true
alert(href); //2222

GPU云服務器云服務器 javascript作用域鏈作用域鏈 With語句用法 javascript的作用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103727.html

JavaScript之作用域鏈

摘要：而作用域鏈則控制著變量與函數的可見性和生命周期。三延長作用域鏈在中，和關鍵字能延長作用域鏈，對來說，將會指定一個只讀對象添加到作用域鏈中。本文共 1200 字，讀完只需 4 分鐘概述 JavaScript 中的可執行代碼有其執行上下文，在執行上下文中，有三個重要的元素：變量對象(variable object) 作用域鏈(scope chain) this 其中，變量對象是上...

Karrdy 2019-08-23 12:25 評論0 收藏0
Javascript執行環境和作用域的注意要點

摘要：所以，全局執行環境的變量對象始終都是作用域鏈中的最后一個對象。搜索過程從作用域鏈的最前端開始，逐級向后回溯，直到找到標識符為止。查詢標識符搜索過程就是沿作用域鏈向上查詢的過程。執行環境執行環境就是環境，是js中最重要的概念。執行環境定義了變量或函數有權訪問的其他數據。每個執行環境都有一個與之相關的變量對象（我們編寫的代碼無法訪問這個對象）。全局執行環境（是最外圍的執行環境。在W...

CKJOKER 2019-08-21 10:46 評論0 收藏0
【JS. ES5重點筆記】執行環境和作用域

摘要：作用域鏈的用途，是保證對執行環境有權訪問的所有變量和函數的有序訪問。這樣，一直延續到全局執行環境全局執行環境的變量對象始終都是作用域鏈中的最后一個對象。如果在局部環境中沒有找到該變量名，則繼續沿作用域鏈向上搜索。【JavaScript.ES5】執行環境和作用域參考文獻： Nicholas C.Zakas 《JavaScript》高級程序設計僅為個人學習參考文獻的內容記錄的筆記。存...

Jeffrrey 2019-08-20 15:50 評論0 收藏0
JavaScript基礎系列---執行環境與作用域鏈

摘要：延長作用域鏈下面兩種語句可以在作用域鏈的前端臨時增加一個變量對象以延長作用域鏈，問題今天看筆記發現自己之前記了一個關于同名標識符優先級的內容，具體是下面這樣的：形參優先級高于當前函數名，低于內部函數名形參優先級高于arguments 形參優先級高于只聲明卻未賦值的局部變量，但是低于聲明且賦值的局部變量函數和變量都會聲明提升，函數名和變量名同名時，函數名的優先級要高。執行代...

J4ck_Chan 2019-08-22 17:19 評論0 收藏0
《JavaScript高級程序設計（第3版）》——變量、作用域和內存問題（四）

摘要：執行環境的類型有兩種全局全局執行環境局部函數執行環境每個環境都可以向上搜索作用域鏈，以查詢變量和函數名但任何環境都不能通過向下搜索作用域鏈而進入另一個執行環境。內部可通過作用域鏈訪問外部，外部不能訪問內部。變量、作用域和內存問題 ECMAScript 數據類型基本類型（5種）： Undefined，Null，Boolean，Number，String typeof() 檢測...

YacaToy 2019-08-23 16:44 評論0 收藏0