《JavaScript進階程式設計》讀書筆記

標籤：loaded   logs   object類   nod   body   出錯   讀書筆記   throw   阻塞   

第一章 JavaScipt簡介

完整的Javacript由以下三部分組成：核心（ECMAScript）、文件物件模型（DOM）、 瀏覽器物件模型（BOM）

核心（ECMAScript）:由ECMA-262定義，提供核心語言功能

ECMA-262定義:

（1）文法（2）類型（3）語句（4）關鍵字（5）保留字 （6）操作符

WEB瀏覽器只是ECMAScript的宿主環境，不僅提供基本的ECMAScript的實現，也會提供該語言的拓展，以便語言和環境的互動。

例如：在web宿主環境下的拓展 DOM

註：宿主環境：WEB瀏覽器、Node(服務端javacript平台)和Adobe Flash

文件物件模型（DOM）:文件物件模型。把整個頁面映射為一個多層節點結構。HTML或XML頁面中的每個組成部分都是某種類型的節點，這個節點又包含著不同類型的資料。藉助DOM提供的API,開發人員可以輕鬆地刪除、添加、替換、修改任何節點。

瀏覽器物件模型（BOM):支援訪問和操作瀏覽器視窗

第二章 在HTML中使用JavaScript一、引用方式

        1、內部引用：

<script type="text/javacript"></script>

        註：只需要指定type屬性

       2、外部參考:

<script type="text/javascript" src="example.js"></script>

二、標籤的位置

       <script> 元素內部的代碼將被至上而下依次解釋。在瀏覽器對<script>元素內部的所有代碼求值完畢之前，頁面中的其餘內容都不會被瀏覽器載入或顯示。所有一般放在</body>之前載入。

三、延遲指令碼和非同步指令碼

      1、延遲指令碼：defer屬性工作表明指令碼在執行時不會影響頁面的構造，指令碼會被延遲到整個頁面都解析完畢後再運行

<script type="text/javacript" defer="defer" src="exaple1.js"></script>

       註：

            （1）、只適用於引用外部檔案。

            （2）、HTML5規範要求指令碼按照他們出現的先後順序執行，因此當存在兩個延時指令碼時，第一個延遲指令碼會優先於第二個延遲指令碼執行，而這兩個指令碼會優先於DOMContentLoaded時間觸發前執行

       2、非同步指令碼：async 不讓頁面等待兩個指令碼下載和執行，從而非同步載入頁面其他內同

        註：

             （1）、只適用於引用外部檔案

             （2）、與defer不用，如果存在兩個指令檔，第二個指令檔可能會在第一個指令檔之前執行。非同步指令碼一定會在頁面的load事件前執行，但可能會在DOMContentLoaded事件觸發之前或之後執行。

       小結：

             （1）所有<script>元素都會按照它們在頁面中出現的先後順序被解析。在不使用defer和async屬性的情況下，只有在解析完前面<script>元素的代碼之後，才會開始解析後面<script>元素中的代碼

             （2）使用defer屬性可以讓指令碼在文檔完全呈現之後再執行。延遲指令碼總是按照指定他們的順序執行

             （3）使用async屬性可以表示當前指令碼不必等待其他指令碼，也不必阻塞文檔呈現。不能保證非同步指令碼按照他們在頁面中出現的順序執行。

             （4）使用<noscript>元素可以指定在不支援指令碼的瀏覽器中顯示替代內容。但在啟用了指令碼的情況下，瀏覽器不會顯示<noscript>元素中的任何內容。

四、瀏覽器載入順序

         隨著頁面的載入，在預設情況下，瀏覽器會按照指令碼在HTML中出現順序依次對每個指令碼進行下載，解析和執行。在處理指令碼的過程中，瀏覽器既不會下載該script元素出現的內容，也不會呈現這些內容。這成為阻塞行為。

 

第三章 基本概念一、區分大小寫

         ECMAScript中的一切（變數、函數名和操作符）都區分大小寫

二、標識符（變數、函數、屬性的名字、函數的參數）

       1、第一個字元必須是一個字母、底線（-）或一個貨幣符號（$）

       2、其他字元可以是字母、底線、貨幣符號或者數字

       3、採用駝峰大小寫格式：第一個字母小寫，剩下的每個單詞的首字母大寫

三、注釋

        1、單行注釋： //

        2、多行注釋：

/* * * */

四、strict 模式

      為javacript定義了一種不同的解析與執行模型。在嚴格模型下，一些不確定的行為將得到處理，而且不安全的操作也會拋出錯誤。要在整個指令碼中啟用strict 模式，可以在頂部添加以下代碼："use strict"    （相當於編譯提示）

      在函數內部的上方包含這條編譯提示，也可以在函數strict 模式下執行

function doSomething () {  "use strict";  //函數體}

五、語句

      ECMAScript中語句以一個分號結尾；如果省略分號，則由解析器確定語句的結尾。不要省略；

六、關鍵字和保留字 

      1、關鍵字：

break、do、instanceof、typeof、case、else、new、var、catch、finally、return、void、continue、for、switch、while、debugger、function、this、with、default、if、throw、delete、in、try

      2、保留字：

abstract、enum、int、short、boolean、export、interface、static、byte、extends、long、super、char、final、native、synchronized、class、float、package、throws、const、goto、private、transient、debugger、implements、protected、volatile、double、import、public、let、yield

       3、其他

eval、arguments

七、變數

      定義：ECMA的變數是鬆散型的，可以用來儲存任何類型的資料。每個變數僅僅是一個用於儲存值的預留位置。

      文法：

               1、未經初始化的變數，該變數可以儲存任何值。系統預設給message賦值undefined

var message;

              2、這一初始設定變數並不會把它標記為字串類型。初始化的過程是給變數賦一個值。因此，可以在修改變數值的同時修改值的類型。

var message="hi"；

             3、一條語句定義多個變數

var message="hi",    found=false,    age=29;

      注意：

               用var 定義的變數是局部變數，省略var定義的變數是全域變數（不推薦使用）

八、資料類型

      ECMAScript ： 5種單一資料型別：Undefined、Null、Boolean、Number和String，1種複雜資料類型：object

     1、Undefined：underfined類型只有一個值，它本身。在聲明變數未初始化時，這個變數的值就是undefined。引入目的：引入這個對象是為了正式區分Null 物件指標與未經初始化的指標。typeof檢測為聲明，或者聲明後未被賦值的變數返回的都是undefined

     2、Null： Null 物件指標，如果定義的變數準備在將來用於儲存對象，那麼最好將該變數初始化為null而不是其他值。這樣一來，只要直接檢查null值就可以知道相應的對象是否已經儲存了一個對象的引用。

var car = null;alert(typeof car);typeof檢測null值會返回"object"

          Undefined、Null的區別：undefined值派生自null，儘管null和undefined有這樣的關係，但它們的用途完全不同。只要意在儲存對象的變數還沒有真正儲存對象，就應該明確地讓變數儲存null值。

      3、Boolean類型

           該類型只有兩個字面值：true和false。但是true不一定等於1，而flase不一定等於0。在執行流量控制語句時，系統會自動轉。 強制裝換：Boolean（）。注意：True和False都不是Boolean值，只是標示符

           轉換規則：

資料類型	true	false
Boolean	true	Flase
String	任何非Null 字元串	" "(Null 字元串)
Number	任何非零數字值	0和NaN
Object	任何對象	Null
Undefined	不適用	undefined

       4、Number類型

            （1）數位資料類型：

                     整數：在算術運算時，所有八進位和十進位表示的數值最終都將被轉換成十進位

var intNum = 55;  //  十進位：var octalNum1 = 079;  // 八進位：以0開頭            var hexNum1 = 0xA; // 十六進位：以0x開頭         

                   浮點數：該數值中必須包含一個小數點，並且小數點後面必須至少有一個數字， 由於儲存浮點數值需要的記憶體空間是儲存整數值的兩倍，所以ECMAScript會不失時機地將浮點數值轉換為整數值。

var floatNum1 = 1.1;

             （2）數值轉換

                      有三個函數能把非數值轉換為數值： Number()、parseInt()、 ParseFloat()。Number() :適用於任何資料類型。parseInt()、ParseFloat()：專門把字串轉換成數值

        5、NaN（Not a Number）：這個數值用於表示一個本來要返回數值的運算元未返回數值的情況。

             特點：
                      任何涉及NaN的操作都會返回NaN

                      NaN與任何值都不相等。包括NaN本身

                      isNaN(): 確定這個參數是否“不是數值”。在接收參數後，會嘗試將這個值轉換為數值。某些不是數值的值會直接轉換為數值。例如字串“10”或Boolean

       6、String類型

           （1）表示：

var firstName = "Nichoas";  // 雙引號 “”var lastName= ‘Zakas‘;  // 單引號 ‘ ‘

           （2）、字串面量

字面量	含義
\n	換行
\t	製表
\b	退格
\r	斷行符號
\f	進紙
\\	斜杠
\‘	單引號‘
\"	雙引號“
\xnn	以十六進位代碼nn表示一個字元。\x41 表示"A"
\unnnn	以十六進位代碼nnnn表示的一個Unicode字元

           （3）、特點：串是不可變的，也就是說，字串一點建立，它們的值就不能改變。要改變某變數儲存的字串，首先要銷毀原來的字串，然後再用另一個包含新值得字串填充該變數。

           （4）、常用的屬性和方法

                        屬性：length屬性：計算字串的長度

                        方法： 

                                  toString()  數值、布爾值、對象和字串值都含有這個方法。但是null和undefined值沒有這個方法。在多數情況下，調用tostringI()方法不必傳遞參數。但是，在調用數值的toString()方法時，可以傳遞一個參數：輸出數值的基數。預設情況下，toString()方法以十進位格式返回字串表示。通過傳遞基數，toString()可以輸出以二進位、八進位、十進位乃至其他任意有效進位

var num = 10;alert( num.tostring());  預設十進位// "10"alert( num.tostring(2));  //"1010"alert( num.tostring(8));  //"12"alert( num.tostring(10)); //"10"alert( num.tostring(16)); //"a"

                                 String()：在不知道要轉換的值是不是null和undefined的情況下，還可以使用轉型函數String(),這函數能將任何類型的值轉換為字串。

      7、Object類型

              定義：對象其實就是一組資料和功能的集合。對象可以通過執行new操作符後跟要建立的物件類型的名稱來建立。建立對象的執行個體並為其添加屬性和方法

             例：

var o = new object();// 不給建構函式傳遞參數時，則可以省略後面的那一對圓括弧（不推薦使用）//object的每個執行個體都具有以下屬性和方法。//valueof(): 返回對象的字串、數值、布爾值表示。//toString(): 返回對象的字串表示。 

八、操作符

       算術操作符、位操作符、關係操作符和相等操作符。他們可以使用很多值，例如：字串、數字值、布爾值、甚至對象。在應用於對象時，相應的操作符通常都會調用對象的valueof()方法和（或）toString()方法

第四章 變數、範圍和記憶體問題一、Javascript變數可以用來儲存兩種類型的值：

        1、基礎資料型別 (Elementary Data Type)：Undifined、Null、Boolean、Number、String

        2、引用物件類型

             特點：

                      基本類型值在記憶體中佔據固定大小的空間，被儲存在棧記憶體中

                      參考型別的值是對象，儲存在堆記憶體中

                     從一個變數向另一個變數複製基本類型的值，會建立這個值的一個副本

                     包含參考型別值得變數實際上包含的不是對象本身，而是指向該對象的指標

                     從一個變數向另一個變數複製參考型別的值，複製的是指標，因此兩個變數最終都指向同一個對象

                     確定一個值是那種基本類型可以使用typeof操作符，而確定一個值是哪種參考型別可以使用instanceof操作符。

二、變數的執行環境

        所有的變數都存在一個執行環境（也稱為範圍），這個執行環境決定了變數的生命週期，以及哪一部分代碼可以訪問其中的變數。

       1、環境有全域執行環境（全域環境）和函數執行環境之分；

       2、每次進入一個新執行環境，都會建立一個用於搜尋變數和函數的範圍鏈

       3、函數的局部環境不僅有權訪問函數範圍中的變數，而且有權訪問其包含父環境，乃至全域環境；

       4、全域環境只能訪問在全域環境中定義的變數和函數，而不能直接存取局部環境中的任何資料

三、JavaScript是一門具有自動垃圾收集機制的程式設計語言，開發人員不必擔心記憶體配置和回收問題。

      1、離開範圍的值將被自動標籤為可回收，因此將在垃圾收集期間被刪除

      2、“標記清除”是目前主流的記憶體回收演算法，給當前不使用的值加上標記，然後再回收其記憶體

      3、“引用計數”追蹤記錄所有值被引用的次數。Javascript引擎目前都不再使用這種演算法；但在IE中訪問非原生JavaScipt對象時，這種演算法仍然會導致問題

      4、當代碼中存在循環參考對象時，“引用計數”演算法就會導致問題。

      5、解除變數的引用不僅有助於消除循環參考現象，而且對垃圾收集也有好處。為了確保有效地回收記憶體，應該及時解除不再使用的全域對象、全域對象屬性以及循環參考變數的引用

 

《JavaScript進階程式設計》讀書筆記