如何閱讀《JavaScript高級程序設計》（一）

題外話

最近在看《JavaScript高級程序設計》這本書，面對着700多頁的厚書籍，心里有點壓力，所以我決定梳理一下。。探究一下到底怎么讀這本書。本書的內容好像只有到ES5。。。所以只能以后慢慢加了。。。

這一系列圍繞

這一系列文章主要圍繞：

1. 如何閱讀《JavaScript...》
2. 全書的脈絡是什么？
3. 預備知識：像我這種小白，有時真的看的是一臉糊塗。
4. 還沒想好，，，

全書的划分

在看書之前，先大體看一下目錄，將全書划分一下，對每一個有大體的了解。可分為：

1. （1-2章） ：可以通俗的認為講故事和環境搭建。
2. （3-7章） ：javaScript基本語法和思想。
3. （8-9章） ：BOM（瀏覽器對象模型）
4. （10-14章）：使用DOM與html進行交互
5. （15-16章）：復雜的效果實現。
6. （17章） ：錯誤處理
7. （18-19章）：javaScript與XML基礎
8. （20-21章）：服務器相關（JSON，Ajax，comet等等）
9. （22章）：高級技巧
10. （23章）：離線技術
11. （24章）：實踐環節
12. （25章）：新興API

本篇文章主要討論前兩項內容，即1-7章。

（1）JavaScript簡史

把握重點

因為語法是個死的東西，所以在我看來,前面5章的內容是基礎中的基礎，而后面的6-7章的內容則是傳達的一種思想-面向對象。所以在學習的時候，先把握重點。

好了現在進入正題，現在可以打開書的第一章了，然后看完下面的預備知識，再看書。

預備知識:

Netscape Navigator是一個瀏覽器，瀏覽器！！！以下簡稱NN瀏覽器。

總結梳理

1. JavaScript的“撿屎”

1. Netscape我們叫他網基公司，它有一個瀏覽器NN瀏覽器
2. NN快要發布到2代的時候，網基覺得自己牛逼了，所以想要解決表單驗證的煩惱。
3. 網基就加班加點開始開發這個腳本語言
4. 在命名的時候，為了火，我們叫他蹭熱度，改名成了JavaScript
5. 這個熱度蹭的可太好了，很成功，很火，微軟老大哥一看，這不行啊，老子的IE瀏覽器不能輸！IE就抄了一手，為了版權的問題，那就改名字吧，就叫Jscript
6. 兩家發展越來越壯大，web越來越重要，兩家的Javascript版本也會越來越分歧，so某某協會開始了標准化，這個標准就叫做ECMAScript。

ECMAScript

1. 由你所見，他作為標准，並不規定運行環境，只是規定了語法，類型，語句，關鍵字，保留字，操作符，對象。
2. 目前已經到第八個版本，ES8（簡寫），但是本書寫到了ECS5，，，，長路漫漫。。。。

關於版本的更新問題，有人做了一張圖，拿來了，不知道有沒有問題。

（2-5）JavaScript的語法

關注的重點

這里面有一個重要的知識就是MIME類型，在后面會遇到，如果忘了的話，會看的很糊塗。
MIME類型：編寫代碼使用的腳本語言的內容類型 可以是text/html 也可以是text/javascript

總結梳理

相當於別的語言的環境搭建

如何在瀏覽器中使用JavaScript呢？需要用到HTML。所以就引出了幾個問題

1. 怎么嵌套到HTML中？在HTML的位置有何不同？不同的位置對與執行情況有何不同？不同的文檔怎么引入？屬性有哪些？哪些是可選屬性，哪些是必須屬性？
2. 如何執行？執行順序？
3. <noscript>元素的作用？

按照這個內容自己想一下，在書中都可以找到答案。

JavaScript的語法不同之處

和c java語言有很多相似之處，所以在這里就重點說一下不同之處。

1. 松散類型

var message; var message = 16; message = "hello";也就是一個變量能夠存所有的類型。甚至我們都可以不用加var 像這樣定義就會直接創建全局變量message = 16(因為有了window對象，所以實際是window.message = 16')。

2. 沒有塊級作用域

不像其他語言{}內容里面的都是塊級作用域，而在JavaScript中是沒有這一說的。它的作用域法則是不一樣的。

在JavaScript中，把這個東西叫做，執行環境。注意，執行環境只分為兩種全局執行環境（除函數之外的環境）和局部執行環境（只有函數內部的區域是局部的。）每個執行環境都有一個與之相關聯的變量對象（所有的變量與函數保存在里面）
對於全局執行環境來說，對象就是window對象，而對於局部（函數）環境來說，稱為活動對象（最開始至包含arguments對象）

環境結束就會銷毀，其里面的變量，函數。全局環境的關閉是頁面關閉或者瀏覽器關閉，而局部環境的關閉是指函數結束。

因為這個道理就可以在函數內部建立相同的變量。（兩個對象不同）

其查詢標識符是從下道上的一個過程，例如下面的代碼：

var color = "blue"; function getColor() { var color = "red"; return color; } alert(getColor()); //"red"

搜索的過程就是先搜索getColor()的變量對象，是否包含color，是就結束，否就找下一個變量對象（此例子中是全局對象即window對象），都找不到的話就返回undefined

3.[]表示法

和其他語言不同，在javaScript中[]不止用在數組中，它還可以用在對象上面。如我們現在建立一個名為dog的對象，如果我們想要訪問name屬性，那么可以這么寫：dog["name"]，【注意】屬性是以字符串的形式的。

JavaScript語法脈絡

看完了不同之處，最難理解的東西就已經掌握了，其他的就是一些細小的東西了，只需要按照一定的邏輯背一下熟悉熟悉，多練多實踐，我就覺得夠了，這也是筆者的看法。

學習的脈絡就是根據不同的類型開始逐一熟悉。

1.數據類型

注意數據類型指的是數據的類型。
分為五種基本類型，和一種復雜類型。
五種基本類型：Undefined,Null,Boolean,Number,String
一種復雜類型：Object.

提到這個就很自然的想到，既然是松散類型的，該怎么檢測給定變量的數據類型呢？
答案是typeof操作符，注意是操作符。

他返回的是："undefined" "string""number" "boolean" "object" "function"

用法：typeof 變量或typeof(變量）

2.Undefined類型

Undefined類型我把它理解為未被定義過的類型，是一個undefined值，
這有兩種情況：

1. 定義了一個變量，但沒有初始化。
2. 未定義一個變量。

體會一下兩個的區別：

alert(message);//會顯示錯誤信息 alert(typeof message);//"undefined"值

3.Null

Null類型只有一個null值的類型。null值是一個空對象指針，所以typeof null返回的是"object"

而undefined就是由null值派生出來的。

所以undefined == null返回的是true

4.Number類型

轉換問題：

這是一個很清晰的脈絡，對於不同類型的值怎么轉換是一個很大的問題。
所以方法有Number()、parseInt()、parseFloat().
不同方法的規則是什么？

整數類型：

十進制的表示，八進制的表示，以及16進制的表示。

浮點數類型：
自動轉換整數的特點，e表示法。

數值范圍：
最大和最小的范圍是？超出范圍的數字如何表示？

NaN：
NaN是一個特殊的值。有兩個特點

1. 涉及任何NaN的操作都返回NaN
2. 與任何值都不想等，包括本身NaN

5.String類型：

Unicode字符組成的字符串。

轉換問題

同樣是轉換問題，這一個脈絡還是很清晰。
String(),toString()方法。它們分別轉換的規則是什么？對於數值型的轉換有沒有什么不一樣的地方？對於null和undifined呢？

6.引用類型

為什么會多出一個引用類型呢？所謂引用類型實際是一個數據結構，是描述一類對象的屬性和方法。和“類”相似。它與對象是什么關系呢？對象是某一個引用類型的實例。

在上面說的一種復雜數據類型Object就是指的是引用類型，是一種大的概念。

如何學習這里面的內容呢？由於對象就是一系列的屬性和方法，所以重點是常用的屬性和方法，而這一點也沒有什么難度，無非就是熟練的過程。還是多練。

引用類型的創建

new標識符。如 var message = new Object(); var item = new Array();

以下列出幾種重要的引用類型，對於方法和屬性的細節，暫時拋棄。
1） Object類型
對於Object的創建除了new 還有 字面量，即：

var message = { name : helo, color : red, ... }

【注意】在使用字面量的時候，是不調用構造方法的。

2）Array類型
同樣的創建一個Array的對象也有不同的方法：
例如：
var colors = new Array(2);//數組的長度為2.
var colors = ["red","blue","green"];//用[]來創建一個特定的數組

當然JavaScript中的數組更加神童廣大，最大的區別就是：數組長度可變。

相關的方法，請具體查閱書籍。

3）Date類型
4）RegExp類型
5）Function類型
這里要提一下了，在Javascript中，每個函數都是Function類型的實例，也可以說是對象。
所以可以這么寫代碼：var sum = new Function("num1","num2","return num1 + num2");
但是不建議。

另外兩種定義一個函數的方法是：function sum (num1,num2) {...}//函數聲明 var sum = function(num1,num2){...}//函數初始化

這兩種定義的方式是有區別的，
【函數聲明】：在代碼執行之前，解析器讀取並將函數聲明添加到執行環境中去。所以以下代碼是沒有問題的。

alert(sum(10,10)); function sum(num1,num2){ return num1 + num2; } 

【函數自定義】：則是在執行到函數之前，是不會保存的。所以以下代碼會出現“unexpected identifier”錯誤

alert(sum(10,10)); var sum = function(num1,mum2) { return num1 + num2; }; 

另一個方面既然函數是對象的話，函數名是指針變量，那么就可以把這個函數變量，當作參數，傳遞給另一個函數。

同時它還應該有屬性和方法。具體有哪些屬性自己回憶或查閱。

在這里重點提一下 prototype屬性，對於引用類型而言，prototype是保存他們所有實例方法的真正所在。（后面會更加詳細的講解。）

6）基本包裝類型

為了便於操作基本類型，又創建出了特殊的引用類型，Boolean、Number、String。

實際上讀取一個基本類型，他就會自動的創建各自的實例,執行相關操作，然后就會銷毀
如：

var s1 = "some text"; var s2 = s1.substring(2);

下面的代碼就體現了銷毀過程

var s1 = "some text";//在內部的過程 s1.color = "red"; alert(s1.color); 

在第一行代碼中，創建了一個實例，創建了字符串，隨之銷毀，第二行又重新創建了一個實例，附上red后，銷毀，在第三行中在執行中，又創建了一個實例，此時實例的屬性是undefined。

同時Object構造函數也具有這個功能。
如：

var obj = new Object("some text");//自動返回基本包裝類型的實例 alert（obj instanceof String）;//true 

三種各自的包裝類型詳細方法自己回憶。

7）單體內置對象

這些書有一大特點，就是里面的名詞真的讓你心驚膽戰，明明很簡單的事情，非要弄個你不熟悉的名字嚇唬你。

單體內置對象，就是不依賴宿主環境的對象，在程序執行之前就已經存在。有兩個 Global和Math

Global對象
書中寫的很有意思，叫做“終極兜底兒對象”，所有不屬於其他對象的屬性和方法，最終都是他的屬性和方法

你一定想知道之前不是有window對象嗎？他們兩個是一個什么關系，現在先保留這個問題。

Global是一個虛擬的東西，他不能new出來，但是卻是真實存在的。所有在全局作用域中定義的屬性和函數，最終都是它的屬性和方法。其里面還有一些內置的函數，諸如我們之前了解過的isNaN(),isFinite(),parseInt(),parseFloat()等等，都是Global的方法。

現在我們就來說一下window是一個什么東西，之前說過在全局作用域中定義的屬性和方法，其實都可以用window.XX來訪問得到，因為不能直接訪問Global對象，所以window對象實現了Global對象的一部分，全局作用域中屬性和函數，就都成為了window對象的屬性和方法。

接下來Global對象的屬性和方法請自行回憶腦補。

Math對象
對於Math對象沒有什么難理解的，同樣沿着他的屬性和方法回憶就好。。

JavaScript的面向對象

首先這一思想是最重要的，也是以后的基礎，所以脈絡清楚對於有好處。

到目前為止，我們怎么兩種方法創建對象：

1.利用函數創建對象，並且返回。

function createPerson(name,age,job) { var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function() { alert(this.name); }; return o; } var person1 = createPerson("Nicholas",29,"Software Engineer"); var person2 = createPerson("Greg",27,"Doctor"); 

2.使用new操作符

function Person(name,age,job) { this.name = name; this.age = age; this.job = job; this.sayName = function() { alert(this.name); }; } var person1 = new Person("Nicholas",29,"Software Engineer"); var person2 = new Person("Greg",27,"Doctor");

用構造方法來創建的實例中，這兩個對象都有一個constructor(構造函數）屬性，該屬性指向Person。

但是目前的這個構造方法創建對象是有問題的，回想一下每個函數其實都是Function的一個實例，在以上創建person1和person2的時候，雖然兩個函數是一樣的，但是需要在里面創建兩個不同的Function實例，所以可以改進一下：

function Person(name,age,job) { this.name = name; this.age = age; this.job = job; this.sayName = sayName; } function sayName() { alert(this.name); } var person1 = new Person("Nicholas",29,"Software Engineer"); var person2 = new Person("Greg",27,"Doctor");

這樣一來雖然可以解決問題，但是如果有很多函數的話，就需要在外面定義好多函數，就體現不了封裝的思想了。為了解決這一問題，就出現了原型。（prototype）

關於原型

每個對象都有一個私有屬性（稱之為 [[Prototype]]），它持有一個連接到另一個稱為其 prototype 對象（原型對象）的鏈接。該 prototype 對象又具有一個自己的原型，層層向上直到一個對象的原型為 null。根據定義，null 沒有原型，並作為這個原型鏈中的最后一個環節
再看一下書中的那個示意圖，會很明白。

關於幾個方法：isPrototypeOf()是否為某個對象的原型Person.prototype.isPrototypeOf(person1)//true
Object.getPrototypeOf() 得到某個對象的原型。alert(Object.getPrototypeOf(person1).name;//"Nicholas"
hasOwnProperty()方法可以檢測一個屬性是否存在實例中。
alert(person1.hasOwnProperty("name"));//true

原型創建

function Person() {} Person.prototype = { constructor:Person; name:"nigulasi", age:29, job:"Software Engineer", sayName：function() { alert(this.name); } };

組合創建

以上兩種方式都有各自的缺點，取他們的長處組合，是一個很好的方法。

function Person(name,age,job) { this.name=name; this.age=age; this.job=job; this.friends=["Shelby","Court"]; } Person.prototype = { constructor:Person; sayName:function(){ alert(this.name); } }; 

實例屬性都是在構造函數中定義的，而所有實例共享的屬性constructor和方法sayName()則是在原型中定義的。

3.關於繼承

原型鏈繼承

//組合方法創建父級對象 function Animal(name,age) { this.name=name; this.age = age; } Dog.prototype.getName() { alert(this.name); } //組合方法創建對象，利用原型繼承 function Dog(name,age) { this.name = name; this.age = age; } //實現繼承 Dog.prototype = new Animal();

構造函數實現繼承

function Super() { this.colors = ["red","blue","green"]; } function Sub() { //繼承自Super Super.call(this);//使用apply()和call()方法可以在新創建的對象上執行構造函數。 } 

組合繼承
同樣集兩種之所長。

function Super(name) { this.name = name; this.colors = ["red","blue","green"]; } Super.prototype.sayName = function(){ alert(this.name); }; function Sub(name,age) { //繼承屬性 Super.call(this.name); this.age = age; } //繼承方法 Sub.prototype = new Super(); sub.prototype.contructor =sub Sub.prototype.sayAge = function() { alert（this.age）; }；