《javascript高級程序設計》（第三版）讀書筆記

時間  2019-12-13
標籤 javascript 高級 程序設計 第三 讀書 筆記 欄目 JavaScript 简体版
原文   原文鏈接

書的連接送上~若是掛了請私信哦~javascript

連接: https://pan.baidu.com/s/1iYC1x4DFFX05X48P_Wn9Hw html

提取碼: muzphtml5

--------------------------------如下正文--------------------------------java

ch01 javascript簡介c++

1.1  簡史web

javascript是在1995年由netspace公司開發的，後由ecma協會定義了腳本語言的統一標準。chrome

1.2  實現typescript

javascript的實現主要分爲三個部分：核心ECMAScript、文檔對象模型DOM、瀏覽器對象模型BOMapi

>ECMAScript瀏覽器

web瀏覽器是ECMAScript的宿主環境之一，它提供了基本的ECMAScript實現以及擴展，以便語言與環境之間對接交互。其餘的宿主環境如Node和Adobe Flash。

>DOM

DOM全稱Document Object Model文檔對象模型，是針對xml但通過擴展用於html的api，它把整個web頁面映射爲一個多層節點結構，這些節點包含着不一樣類型的數據，經過DOM，咱們能夠對文檔節點進行操做（增刪改）等，DOM根據級別能夠分爲DOM一、DOM二、DOM3幾個級別

>BOM

BOM全稱Browser Object Model瀏覽器對象模型，經過BOM咱們能夠控制瀏覽器顯示的頁面的之外的部分，習慣上咱們把全部針對瀏覽器的javascript擴展算做BOM的一部分，如

通常來講，BOM主要是對window對象和navigator對象的實現，在html5以後，bom實現的標準愈來愈統一

 

ch02 在html中使用javascript

2.1  <script>元素

<script>標籤是由netspace創造的，後來它被加入正式的html標準裏，它也是向html頁面插入javascript的主要方法。

>標籤屬性

在html4.01中，<script>主要有如下六個屬性：

  • async（異步）：可選。這個屬性只適用於外部腳本文件，它的目的是不讓頁面等待外來腳本的下載和執行，從而異步加載頁面其餘內容，所以在使用了async的異步腳本里不要在加載期間修改DOM。異步腳本不必定會按照它出現的順序執行，所以引入的多個異步腳本不該該存在依賴關係，它必定會在頁面的load事件觸發以前加載。
  • defer（延遲）：可選。這個屬性一樣只適用於外部腳本文件，告訴瀏覽器先下載，但延遲執行，應用了這個屬性的腳本會被延遲到整個頁面都解析完畢後（即在</html>後）再運行。一個延遲腳本的順序會先於DOMContentLoaded事件觸發，多個延遲腳本會按照出現順序執行，（但實際上多是不肯定的）所以最好最包含一個延遲腳本。
  • language：已廢棄
  • src：可選。表示包含要執行代碼的外部文件
  • type：可選。表示編寫代碼使用的腳本語言的內容類型（MIME）。若是不指定，默認值是text/javascript。在非IE瀏覽器中還可使用application/javascript和application/ecmascript。
  • charset：可選。表示經過src屬性指定的代碼的字符集，不多用

>標籤位置

傳統的來講，<script>標籤的位置應該是放在<head>裏面的，可是這樣作覺得這必須等到所有js代碼都被下載、解析、執行完成以後才能開始渲染頁面內容（瀏覽器遇到<body>標籤纔開始呈現內容），這樣無疑會致使瀏覽器在渲染頁面時會出現明顯的延遲。所以最好的作法是把js代碼放在主要內容以後，</body>以前，這樣在解析js代碼以前會優先渲染頁面，用戶也會感到頁面打開速度變快了。

2.2  嵌入代碼與外部文件

通常認爲最好的作法仍是儘量使用外部文件來包含js代碼，優勢以下：

  • 可維護性：分佈在不一樣html文件裏的js維護起來可能會很是麻煩，可是若是把全部js文件都放在一個文件夾裏，維護起來比較輕鬆
  • 可緩存：若是有兩個頁面都使用一個js文件，那麼這個文件只須要被下載一次，這樣能夠加快頁面加載的速度。
  • 適應將來：經過外部文件來包含js無須使用前面提到的XHTML或者註釋hack

2.3  文檔模式

文檔模式最初是由IE5.5引入的，能夠經過文檔類型doctype切換實現，通常提到文檔模式會有混雜模式和標準模式，混雜模式會讓IE的行爲與IE5相同，而標準模式會讓IE的行爲更接近標準行爲。

不一樣的文檔模式主要影響CSS內容的顯示，可是在某些狀況下也會影響到js的解釋執行。若是在文檔開始處沒有發現文檔類型聲明，默認開啓混雜模式，這樣在不一樣瀏覽器下的行爲差別特別大，能夠經過如下代碼切換文檔模式

<!-- HTML 4.01 嚴格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 嚴格型 -->
<!DOCTYPE html PUBLIC
"-//W3X//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd">

<!-- HTML 5 -->
<！DOCTYPE html>

2.4  <noscript>元素

該元素用於在不支持js的瀏覽器或者瀏覽器支持可是js被禁用的狀況下，他能夠顯示替代的內容。這個元素能夠包含可以出如今<body>中的任何html元素，除了<script>。

例子：

<html>
<body>
   <noscript>
         <p>本頁面須要瀏覽器支持（啓用）JavaScript</p>
   </noscript>
</body>
</html>

在腳本無效的狀況下，用戶能夠看到這條提示消息，然而在啓用了腳本的瀏覽器中，用戶不會看到它

 

ch03  基本概念

3.1  語法

>命名規則

  • 區分大小寫，駝峯大小寫格式（第一個字母小寫，剩下的每一個單詞的首字母大寫）
  • 第一個字符必須是一個字母、下劃線（_）或者一個美圓符號（$）
  • 其餘字符能夠是字母、下劃線、美圓符號或者數字
  • 不能是關鍵字

>註釋

分爲行級註釋和塊級註釋

//單行註釋

/*
*一個多行
*（塊級）註釋
*/

>嚴格模式

它爲js定義了一種更嚴格的解釋與執行模型，在嚴格模式下，ES3中的一個寫不肯定的行爲將獲得處理，並且對於某些不安全的操做也會拋出錯誤，執行結果會有很大不一樣。在頂部註明

"use strict";

將會在整個腳本中啓用嚴格模式。也能夠在函數內部的上方註明這條編譯指示

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

支持嚴格模式的瀏覽器包括IE10+、Firefox 4+、Safari 5.1+、Opera 12+和Chrome

>語句

js語句能夠省略分號;，可是建議仍是加上;，加上它能夠避免不少錯誤，開發人員也能夠放心的經過喊出多餘的空格來壓縮ECMAScript代碼，一樣解析器就能夠沒必要再花時間推測應該在哪裏插入分號了。

條件控制語句在執行一條代碼時最好也要加上花括號{}，這樣可讓編碼意圖更加清晰，也能下降修改代碼時出錯的概率

3.2  變量

Js變量是鬆散類型的，能夠用來保存任何類型的數據，定義時要使用var（ES5）、let或者const（ES6），未初始化時保存值是undefined，初始化時變量也不會被標記爲任何類型，所以能夠修改變量爲任何其餘數據類型

>做用域（我的補的，書上並無過多解釋）

提到var、let和const就不得不來談一下js的做用域問題。做用域在ES5和ES6中是不太同樣的，在ES5中，只存在全局做用域和函數（局部）做用域，並不存在塊做用域，所以不少在java、c++中一些看起來很正常的寫法在js裏的結果會變得很是使人難以理解。而在ES6中，爲了改變這種狀況，引入了let和const，這爲js帶來了塊做用域。關於var和let的做用域區別，網上大可能是說var是全局變量，let是局部變量，其實否則，這裏面有不少細微的差異。接下來就詳細寫寫我認爲的正確理解。同時還能夠參考typescript官網的一篇文檔的解釋

>>ES5中的做用域

在es5中，定義變量只有一個var，或者咱們能夠選擇不寫var，在不寫的狀況下定義的變量必定是全局變量。那麼var定義的變量究竟是不是全局變量？這點和var定義變量時所在的上下文有很大的關係。

a = 10;//全局變量
var a = 10; //window做用域下的變量 = 全局變量
(function(){
  var b =10;
  console.log(b);  //10
})();
console.log(b); //ReferenceError: b is not defined

在chrome控制檯的輸出：

由此能夠看出var定義的變量做用域與上下文有很大關聯。在js裏一些很讓人迷惑的輸出結果還和變量提高離不開關係：

a = 10;

(function(){
  console.log(a);  //undefined
  var a = 5;
})();

控制檯輸出：

其實上面的代碼在js進行解釋的時候是這個樣子

a = 10;

(function(){
  var a = undefined;
  console.log(a);  //undefined
  a = 5;
})();

在js裏不只變量會提高，函數聲明也會提高，這裏再也不作擴展

 

>>ES6中的做用域

ES5中var的聲明實在使人頭疼，所以在ES6中提出了let和const，let聲明的是塊級做用域的變量，所謂塊級做用域，能夠簡單理解爲在一個{}裏。

for(let i =0; i<10; i++){
      //do sth...
}

console.log(i); //undefined

最重要的是，let和const不存在變量提高，它的這種特性稱爲暫時性死區（在某變量被let聲明以前，任何對該變量的訪問都是語法錯誤ReferenceError）

 3.3  數據類型

五種簡單數據類型（或稱基本數據類型）Undefined、Null、Boolean、Number、String +一種複雜數據類型Object（Function、Array等）

>typeof操做符

用於檢測給定變量的數據類型，返回值是數據類型的小寫，即"undefined"、"boolean"、"string"、"number"、"object"、"function"

須要特別注意的地方是：

null被認爲是一個空的對象引用

>Undefined

這個類型只有一個值undefined。通常在使用var聲明變量但衛隊其加以初始化時，這個變量的值就是undefined。可是除了未初始化的變量，未聲明的變量在typeof操做符下也是undefined

>Null

這個類型也是隻有一個值null，從邏輯角度來看，null表示的是一個空對象指針，這也是typeof檢測null值會返回"object"的緣由。要注意null和undefined的區別

>Boolean

該類型只有兩個字面值true和false，這兩個值與數字之不是一回事，所以true不必定等於1，false也不必定等於0，能夠調用Boolean()函數將任何數據類型轉換成一個Boolean值

>Number

支持表示整數和浮點數值，除了十進制還能夠表示八進制（以0開頭）或者十六進制（以0x開頭）。

js裏能夠保存 +0 和 -0，這兩個值相等

>>浮點數值

浮點數值的最高精度是17位小數，可是js的數值類型是基於IEEE754數值，這個格式的數值存在一個問題：

也就是0.1+0.2！=0.3

>>數值類型

Js能表示的數值範圍是

若是某個值不在這個範圍將會被轉換成Infinity值，或者-Infinity。Infinity是不能參與計算的，一個值是否是有窮的，可使用isFinite()函數

>>NaN

即非數值Not a Number。這個數值用於表示一個原本要返回數值的操做數未返回數值的狀況，避免拋出錯誤。例如：

NaN自己有兩個特色：第一，任何牽扯到NaN的計算都會返回NaN； 第二，NaN與任何值都不相等，包括它自身

那麼若是咱們要測試一個值是否是NaN該怎麼辦呢？爲此js提供了isNaN()函數，它在接收到一個值以後會嘗試將這個值轉換成數值，若是不能轉換成數值將會返回true

 >>數值轉換

將非數值轉換成數值有三個函數： Number()、ParseInt()、ParseFloat()

因爲Number的轉換規則很複雜，所以多用的是parseInt()函數

>String

在js裏單引號和雙引號都是容許的，對字符串的解釋方式相同。

>>字符字面量

>>轉換爲字符串

toString()方法，除了null和undfined以外都有這個方法，通常不須要傳遞參數，可是在Number類型的toString()方法中能夠傳遞一個參數，表示數值的基數，能夠輸出二進制、八進制、十六進制等

轉型函數String()，該方法的規則是若是該類型有toString()方法，則調用；若是沒有，null返回"null"，undefined返回"undefined"

 >Object

js的object是全部對象的基礎，都具備如下屬性和方法：

3.4 操做符

>一元操做符

 --和++這裏就略過了，主要記一下+和-操做符對非數值影響。

對非數值應用+時，布爾值true和false會轉換成1和0，字符串值會被按照一組特殊的規則進行解析，對象先是調用valueOf()和/或toString()方法，再轉換獲得的值。

應用-時，主要是應用於數值類型表示負數，應用於非數值時會遵循和+相同的規則，可是會將最後的值轉換成負數。

>位操做符

>>非（NOT）

用一個 ~ 表示，返回的是數值的反碼=操做數的負值-1

>>與（AND）

用一個 & 表示，返回的是兩個數的二進制碼的位與運算結果

>>或（OR）

用一個 | 表示，返回的是兩個數的二進制碼的位或運算結果

>>異或（XOR）

用一個 ^ 表示，返回的是異或操做的結果，只有兩個數值對應位上只有一個1時才返回1（相同爲0，不一樣爲1）

>>左移

用 << 表示，會將數值的x全部位向左移動指定的位數y，返回的結果是 x*2^y

>>右移

用 >> 表示，會將數值x的全部位向右移動指定的位數y，返回的結果是 x/2^y

>>無符號右移

用 >>> 表示，會將數值的全部32位都向右移動，對正數來講沒有影響；對負數來講，會將負數的二進制碼當成正數的二進制碼。

這裏，當對-64 執行無符號右移 5 位的操做後，獲得的結果是 134217726。之因此結果如此之大，是由於-64 的二進制碼爲11111111111111111111111111000000，並且無符號右移操做會把這個二進制碼當成正數的二進制碼，換算成十進制就是 4294967232。若是把這個值右移 5 位，結果就變成了00000111111111111111111111111110，即十進制的 134217726。

>布爾操做符

>>邏輯非

用一個 ! 表示，能夠應用於任何值，都會返回一個布爾值。!操做符首先會將它的操做數轉換成一個布爾值，而後再對其求反，規則是：

>>邏輯與

用 && 表示，能夠應用於任何類型的操做數，在有一個操做數不是布爾值的狀況下，邏輯與操做不必定返回布爾值，此時遵循下列規則：

邏輯與是個短路操做，若是第一個操做數就是false，那麼就不會在對第二個操做數求值。也不能在邏輯與操做中使用未定義的值，不然會發生錯誤，除非在判斷這個未定義的值以前就已經有操做數爲false了。

>>邏輯或

用 || 表示，與邏輯與操做類似，若是有一個操做數不是布爾值，邏輯或也不必定返回布爾值，判斷邏輯是

和邏輯與操做符類似，它也是短路操做符。也就是說，若是第一個操做數的求值結果爲true，就不會對第二個操做數求值了。

 >乘性操做符

js有三個乘性操做符：乘、除、求模，在操做數爲非數值的狀況下會執行自動的類型轉換，也就是說會先使用Number()將它轉換成數值。

>>乘法

用一個 * 表示。在處理特殊值（NaN，Infinity，非數值）的狀況下，遵循如下規則：

>>除法

用一個 / 表示。處理非數值的狀況下，和 * 一致，在處理特殊值的時候，也有一些規則：

>>求模

用一個 % 表示，處理非數值時，三個乘性運算符相同；求模處理特殊值時，也有規則：

>加性操做符

>>加法

用 + 表示，在兩個操做數都是數值的狀況下，遵循如下規則：

其中特別須要注意的是Infinity+ -Infinity = NaN

若是有一個操做數是字符串，則不管另外一個操做數是是什麼，最後結果都會是字符串，如：

若是有一個操做數是對象、數值或者布爾值，則調用toString()方法取得對應的字符串值，而後再按照字符串規則拼接。

>>減法

與加法相似，規則以下：

 

特別須要注意的是 Infinity - Infinity = NaN ; -Infinity - -Infinity = NaN，之後後面三條 +0 和 -0 的減法

若是有一個操做數不是數值，這點和 + 不同，減法會先調用Number() 或者 valueOf() 轉換成數值，在進行計算：

>關係操做符

關係操做符一共有四個，＜ ， ＞ ， ≤  ， ≥ ，返回值是一個布爾值，比較規則以下：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程