摘要：題外話最近在看高級程序設計這本書，面對著多頁的厚書籍，心里有點壓力，所以我決定梳理一下。。全局環境的關閉是頁面關閉或者瀏覽器關閉，而局部環境的關閉是指函數結束。數值范圍最大和最小的范圍是超出范圍的數字如何表示是一個特殊的值。

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

這一系列文章主要圍繞：

如何閱讀《JavaScript...》

全書的脈絡是什么？

預備知識：像我這種小白，有時真的看的是一臉糊涂。

還沒想好，，，

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

（1-2章） ：可以通俗的認為講故事和環境搭建。

（3-7章） ：javaScript基本語法和思想。

（8-9章） ：BOM（瀏覽器對象模型）

（10-14章）：使用DOM與html進行交互

（15-16章）：復雜的效果實現。

（17章） ：錯誤處理

（18-19章）：javaScript與XML基礎

（20-21章）：服務器相關（JSON，Ajax，comet等等）

（22章）：高級技巧

（23章）：離線技術

（24章）：實踐環節

（25章）：新興API

把握重點

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

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

預備知識:

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

總結梳理

Netscape我們叫他網基公司，它有一個瀏覽器NN瀏覽器

NN快要發布到2代的時候，網基覺得自己牛逼了，所以想要解決表單驗證的煩惱。

網基就加班加點開始開發這個腳本語言

在命名的時候，為了火，我們叫他蹭熱度，改名成了JavaScript

這個熱度蹭的可太好了，很成功，很火，微軟老大哥一看，這不行啊，老子的IE瀏覽器不能輸！IE就抄了一手，為了版權的問題，那就改名字吧，就叫Jscript

兩家發展越來越壯大，web越來越重要，兩家的Javascript版本也會越來越分歧，so某某協會開始了標準化，這個標準就叫做ECMAScript。

由你所見，他作為標準，并不規定運行環境，只是規定了語法，類型，語句，關鍵字，保留字，操作符，對象。

目前已經到第八個版本，ES8（簡寫），但是本書寫到了ECS5，，，，長路漫漫。。。。

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

關注的重點

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

總結梳理

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

怎么嵌套到HTML中？在HTML的位置有何不同？不同的位置對與執行情況有何不同？不同的文檔怎么引入？屬性有哪些？哪些是可選屬性，哪些是必須屬性？

如何執行？執行順序？

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

和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"]，【注意】屬性是以字符串的形式的。

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

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

1.數據類型

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

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

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

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

2.Undefined類型

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

定義了一個變量，但沒有初始化。

未定義一個變量。

體會一下兩個的區別：

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是一個特殊的值。有兩個特點

涉及任何NaN的操作都返回NaN

與任何值都不想等，包括本身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對象沒有什么難理解的，同樣沿著他的屬性和方法回憶就好。。

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

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

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");

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()則是在原型中定義的。

原型鏈繼承

//組合方法創建父級對象
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）;
}；