通過使用Chrome的開發人員工具來學習JavaScript，chromejavascript

通過使用Chrome的開發人員工具來學習JavaScript，chromejavascript

本文作者是Peter Rybin,Chrome開發人員工具團隊成員.

本文中,我們將通過使用Chrome的開發人員工具,來學習JavaScript中的兩個重要概念"閉包"和"內部屬性".

閉包

首先要講的是閉包(closure) – JavaScript中最有名的東西之一.一個閉包就是一個使用了外部變數的函數.查看下面的例子:

function A(a, b, c) {   var ar = [a, b, c];   return function B(i) {     return ar[i];   }; }    var b = A('Here', 'I', 'am'); console.log( b(1) );

 

console.log( b(1) );

函式宣告之後的第一條語句調用了函數A,函數A建立了一個值為數組[a,b,c]的局部變數ar,返回了一個函數B(儲存在了變數b中),然後運行結束.

第二條語句調用了函數B(b),返回並列印出了數組ar.這就意味著A中的數組ar在A結束執行後仍然存在.但是它儲存在什麼地方呢?當然,在b上!但是究竟是存在b的哪裡呢?某個屬性中?不是的.精心開發5年的UI前端架構！

這是JavaScript語言的一個核心特性:一個函數可以持有外層範圍的變數,並且除了調用該函數以外沒有任何其他方法可以訪問到這些變數.

從現在開始,chrome的開發人員工具可以讓閉包中的外部變數現形.在監控運算式(Watch Expressions)面板中查看函數執行個體b,展開它的屬性後,應該會有一個稱為<function scope>的子節點.所有被綁定的閉包變數都能在這裡看到,這些變數就是在函數調用時可能會被用到的變數.

內部屬性

開發人員工具還能顯示出另外一個東西,叫做內部屬性(internal property).

假設你的代碼中有個變數s,而且還執行了下面這樣的操作:

s.substring(1, 4)  // 返回'ell'

 

你覺得s肯定是個字串值嗎? 這可不一定.它也有可能是個字串封裝對象.嘗試下面的監控運算式:

"hello"Object("hello")

 

第一個運算式是一個普通的字串字面量,第二個是一個功能完整(full-featured)的對象.令人費解的是,這兩個值幾乎有完全相同的表現.但是第二個運算式才真正的擁有自己的屬性,並且你也可以在它身上添加自訂的屬性.展開它的所有屬性你會看到,它不是一個完全常規的對象:它有一個內部屬性[[PrimitiveValue]] ,被封裝的字串值就儲存在這個屬性裡面.你不能在JavaScript代碼中訪問到這個內部屬性,但是你能在開發人員工具的中看到它.精心開發5年的UI前端架構！

還有哪些值擁有內部屬性?那就是綁定函數(bound function).綁定函數也算是一種封裝對象,只不過被封裝的是個函數.嘗試執行下面的兩條語句:

function Sum(a, b) { return a + b; } var inc = Sum.bind(null, 1); // 將形參a綁定為1,this綁定為null

 

如果你把Sum和inc放在監控運算式面板中對比一下,你會看到,它們都是函數,但inc是一個不透明(non-transparent )的函數:你看不到它的函數體內容,也不能看到它定義時的範圍.精心開發5年的UI前端架構！

這就是綁定函數的工作原理.在開發人員工具中,你會看到[[TargetFunction]], [[BoundArgs]]以及[[BoundThis]]這三個內部屬性.它們都表明了inc是一個綁定函數,以及一些更具體的資訊:inc綁定的目標函數是Sum,綁定了一個參數1,綁定的this值是null.精心開發5年的UI前端架構！

Google瀏覽器的Google瀏覽器的javascript怎啟用

在Google瀏覽器右上方有個“扳手”形狀的表徵圖，點擊之後出現下拉內容，點擊“選項”，出現Google瀏覽器的選項設定視窗，然後選擇“進階選項”頁面下的“內容設定”，左側選中“JavaScript”，右側就會顯示出JavaScript的選項，選中“允許所有網站運行JavaScript”，然後一次關閉各個視窗就可以了。Google瀏覽器預設是開啟這個功能的，參考圖片：



 
Google瀏覽器的開發人員工具怎關閉

　Google收購Apture之後，不再提供單獨的Apture功能，而是將其整合到Chrome裡面。這樣CloudFlare就不得不面臨兩種選擇：放棄使用Apture或者做出同樣的工具。CloudFlare首席執行官馬修·普林斯表示，該公司將會開發與Apture功能類似的工具。 　　CloudFlare目前已經開發出了名為Highlight的服務。在過去的一周當中，一些CloudFlare使用者已經對Highlight服務進行了測試。目前，CloudFlare使用者已能夠通過應用面板下載Highlight。