摘要：題外話(huà)最近在看高級(jí)程序設(shè)計(jì)這本書(shū)，面對(duì)著多頁(yè)的厚書(shū)籍，心里有點(diǎn)壓力，所以我決定梳理一下。。全局環(huán)境的關(guān)閉是頁(yè)面關(guān)閉或者瀏覽器關(guān)閉，而局部環(huán)境的關(guān)閉是指函數(shù)結(jié)束。數(shù)值范圍最大和最小的范圍是超出范圍的數(shù)字如何表示是一個(gè)特殊的值。

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

這一系列文章主要圍繞：

如何閱讀《JavaScript...》

全書(shū)的脈絡(luò)是什么？

預(yù)備知識(shí)：像我這種小白，有時(shí)真的看的是一臉糊涂。

還沒(méi)想好，，，

在看書(shū)之前，先大體看一下目錄，將全書(shū)劃分一下，對(duì)每一個(gè)有大體的了解?？煞譃椋?/p>

（1-2章） ：可以通俗的認(rèn)為講故事和環(huán)境搭建。

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

（8-9章） ：BOM（瀏覽器對(duì)象模型）

（10-14章）：使用DOM與html進(jìn)行交互

（15-16章）：復(fù)雜的效果實(shí)現(xiàn)。

（17章） ：錯(cuò)誤處理

（18-19章）：javaScript與XML基礎(chǔ)

（20-21章）：服務(wù)器相關(guān)（JSON，Ajax，comet等等）

（22章）：高級(jí)技巧

（23章）：離線技術(shù)

（24章）：實(shí)踐環(huán)節(jié)

（25章）：新興API

把握重點(diǎn)

因?yàn)檎Z(yǔ)法是個(gè)死的東西，所以在我看來(lái),前面5章的內(nèi)容是基礎(chǔ)中的基礎(chǔ)，而后面的6-7章的內(nèi)容則是傳達(dá)的一種思想-面向?qū)ο?。所以在學(xué)習(xí)的時(shí)候，先把握重點(diǎn)。

好了現(xiàn)在進(jìn)入正題，現(xiàn)在可以打開(kāi)書(shū)的第一章了，然后看完下面的預(yù)備知識(shí)，再看書(shū)。

預(yù)備知識(shí):

Netscape Navigator是一個(gè)瀏覽器，瀏覽器?。?！以下簡(jiǎn)稱(chēng)NN瀏覽器。

總結(jié)梳理

Netscape我們叫他網(wǎng)基公司，它有一個(gè)瀏覽器NN瀏覽器

NN快要發(fā)布到2代的時(shí)候，網(wǎng)基覺(jué)得自己牛逼了，所以想要解決表單驗(yàn)證的煩惱。

網(wǎng)基就加班加點(diǎn)開(kāi)始開(kāi)發(fā)這個(gè)腳本語(yǔ)言

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

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

兩家發(fā)展越來(lái)越壯大，web越來(lái)越重要，兩家的Javascript版本也會(huì)越來(lái)越分歧，so某某協(xié)會(huì)開(kāi)始了標(biāo)準(zhǔn)化，這個(gè)標(biāo)準(zhǔn)就叫做ECMAScript。

由你所見(jiàn)，他作為標(biāo)準(zhǔn)，并不規(guī)定運(yùn)行環(huán)境，只是規(guī)定了語(yǔ)法，類(lèi)型，語(yǔ)句，關(guān)鍵字，保留字，操作符，對(duì)象。

目前已經(jīng)到第八個(gè)版本，ES8（簡(jiǎn)寫(xiě)），但是本書(shū)寫(xiě)到了ECS5，，，，長(zhǎng)路漫漫。。。。

關(guān)于版本的更新問(wèn)題，有人做了一張圖，拿來(lái)了，不知道有沒(méi)有問(wèn)題。

關(guān)注的重點(diǎn)

這里面有一個(gè)重要的知識(shí)就是MIME類(lèi)型，在后面會(huì)遇到，如果忘了的話(huà)，會(huì)看的很糊涂。
MIME類(lèi)型：編寫(xiě)代碼使用的腳本語(yǔ)言的內(nèi)容類(lèi)型 可以是text/html 也可以是text/javascript

總結(jié)梳理

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

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

如何執(zhí)行？執(zhí)行順序？

按照這個(gè)內(nèi)容自己想一下，在書(shū)中都可以找到答案。

和c java語(yǔ)言有很多相似之處，所以在這里就重點(diǎn)說(shuō)一下不同之處。

1. 松散類(lèi)型

var message; var message = 16; message = "hello";也就是一個(gè)變量能夠存所有的類(lèi)型。甚至我們都可以不用加var 像這樣定義就會(huì)直接創(chuàng)建全局變量message = 16(因?yàn)橛辛藈indow對(duì)象，所以實(shí)際是window.message = 16")。

2. 沒(méi)有塊級(jí)作用域

不像其他語(yǔ)言{}內(nèi)容里面的都是塊級(jí)作用域，而在JavaScript中是沒(méi)有這一說(shuō)的。它的作用域法則是不一樣的。

在JavaScript中，把這個(gè)東西叫做，執(zhí)行環(huán)境。注意，執(zhí)行環(huán)境只分為兩種全局執(zhí)行環(huán)境（除函數(shù)之外的環(huán)境）和局部執(zhí)行環(huán)境（只有函數(shù)內(nèi)部的區(qū)域是局部的。）每個(gè)執(zhí)行環(huán)境都有一個(gè)與之相關(guān)聯(lián)的變量對(duì)象（所有的變量與函數(shù)保存在里面）
對(duì)于全局執(zhí)行環(huán)境來(lái)說(shuō)，對(duì)象就是window對(duì)象，而對(duì)于局部（函數(shù)）環(huán)境來(lái)說(shuō)，稱(chēng)為活動(dòng)對(duì)象（最開(kāi)始至包含arguments對(duì)象）

環(huán)境結(jié)束就會(huì)銷(xiāo)毀，其里面的變量，函數(shù)。全局環(huán)境的關(guān)閉是頁(yè)面關(guān)閉或者瀏覽器關(guān)閉，而局部環(huán)境的關(guān)閉是指函數(shù)結(jié)束。

因?yàn)檫@個(gè)道理就可以在函數(shù)內(nèi)部建立相同的變量。（兩個(gè)對(duì)象不同）

其查詢(xún)標(biāo)識(shí)符是從下道上的一個(gè)過(guò)程，例如下面的代碼：

var color = "blue";

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

alert(getColor()); //"red"

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

3.[]表示法

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

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

學(xué)習(xí)的脈絡(luò)就是根據(jù)不同的類(lèi)型開(kāi)始逐一熟悉。

1.數(shù)據(jù)類(lèi)型

注意數(shù)據(jù)類(lèi)型指的是數(shù)據(jù)的類(lèi)型。
分為五種基本類(lèi)型，和一種復(fù)雜類(lèi)型。
五種基本類(lèi)型：Undefined,Null,Boolean,Number,String
一種復(fù)雜類(lèi)型：Object.

提到這個(gè)就很自然的想到，既然是松散類(lèi)型的，該怎么檢測(cè)給定變量的數(shù)據(jù)類(lèi)型呢？
答案是typeof操作符，注意是操作符。

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

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

2.Undefined類(lèi)型

Undefined類(lèi)型我把它理解為未被定義過(guò)的類(lèi)型，是一個(gè)undefined值，
這有兩種情況：

定義了一個(gè)變量，但沒(méi)有初始化。

未定義一個(gè)變量。

體會(huì)一下兩個(gè)的區(qū)別：

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

3.Null

Null類(lèi)型只有一個(gè)null值的類(lèi)型。null值是一個(gè)空對(duì)象指針，所以typeof null返回的是"object"

而undefined就是由null值派生出來(lái)的。

所以undefined == null返回的是true

4.Number類(lèi)型

轉(zhuǎn)換問(wèn)題：

這是一個(gè)很清晰的脈絡(luò)，對(duì)于不同類(lèi)型的值怎么轉(zhuǎn)換是一個(gè)很大的問(wèn)題。
所以方法有Number()、parseInt()、parseFloat().
不同方法的規(guī)則是什么？

整數(shù)類(lèi)型：

十進(jìn)制的表示，八進(jìn)制的表示，以及16進(jìn)制的表示。

浮點(diǎn)數(shù)類(lèi)型：
自動(dòng)轉(zhuǎn)換整數(shù)的特點(diǎn)，e表示法。

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

NaN：
NaN是一個(gè)特殊的值。有兩個(gè)特點(diǎn)

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

與任何值都不想等，包括本身NaN

5.String類(lèi)型：

Unicode字符組成的字符串。

轉(zhuǎn)換問(wèn)題

同樣是轉(zhuǎn)換問(wèn)題，這一個(gè)脈絡(luò)還是很清晰。
String(),toString()方法。它們分別轉(zhuǎn)換的規(guī)則是什么？對(duì)于數(shù)值型的轉(zhuǎn)換有沒(méi)有什么不一樣的地方？對(duì)于null和undifined呢？

6.引用類(lèi)型

為什么會(huì)多出一個(gè)引用類(lèi)型呢？所謂引用類(lèi)型實(shí)際是一個(gè)數(shù)據(jù)結(jié)構(gòu)，是描述一類(lèi)對(duì)象的屬性和方法。和“類(lèi)”相似。它與對(duì)象是什么關(guān)系呢？對(duì)象是某一個(gè)引用類(lèi)型的實(shí)例。

在上面說(shuō)的一種復(fù)雜數(shù)據(jù)類(lèi)型Object就是指的是引用類(lèi)型，是一種大的概念。

如何學(xué)習(xí)這里面的內(nèi)容呢？由于對(duì)象就是一系列的屬性和方法，所以重點(diǎn)是常用的屬性和方法，而這一點(diǎn)也沒(méi)有什么難度，無(wú)非就是熟練的過(guò)程。還是多練。

引用類(lèi)型的創(chuàng)建

new標(biāo)識(shí)符。如 var message = new Object(); var item = new Array();

以下列出幾種重要的引用類(lèi)型，對(duì)于方法和屬性的細(xì)節(jié)，暫時(shí)拋棄。
1） Object類(lèi)型
對(duì)于Object的創(chuàng)建除了new 還有 字面量，即：

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

【注意】在使用字面量的時(shí)候，是不調(diào)用構(gòu)造方法的。

2）Array類(lèi)型
同樣的創(chuàng)建一個(gè)Array的對(duì)象也有不同的方法：
例如：
var colors = new Array(2);//數(shù)組的長(zhǎng)度為2.
var colors = ["red","blue","green"];//用[]來(lái)創(chuàng)建一個(gè)特定的數(shù)組

當(dāng)然JavaScript中的數(shù)組更加神童廣大，最大的區(qū)別就是：數(shù)組長(zhǎng)度可變。

相關(guān)的方法，請(qǐng)具體查閱書(shū)籍。

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

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

這兩種定義的方式是有區(qū)別的，
【函數(shù)聲明】：在代碼執(zhí)行之前，解析器讀取并將函數(shù)聲明添加到執(zhí)行環(huán)境中去。所以以下代碼是沒(méi)有問(wèn)題的。

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

【函數(shù)自定義】：則是在執(zhí)行到函數(shù)之前，是不會(huì)保存的。所以以下代碼會(huì)出現(xiàn)“unexpected identifier”錯(cuò)誤

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

另一個(gè)方面既然函數(shù)是對(duì)象的話(huà)，函數(shù)名是指針變量，那么就可以把這個(gè)函數(shù)變量，當(dāng)作參數(shù)，傳遞給另一個(gè)函數(shù)。

同時(shí)它還應(yīng)該有屬性和方法。具體有哪些屬性自己回憶或查閱。

在這里重點(diǎn)提一下 prototype屬性，對(duì)于引用類(lèi)型而言，prototype是保存他們所有實(shí)例方法的真正所在。（后面會(huì)更加詳細(xì)的講解。）

6）基本包裝類(lèi)型

為了便于操作基本類(lèi)型，又創(chuàng)建出了特殊的引用類(lèi)型，Boolean、Number、String。

實(shí)際上讀取一個(gè)基本類(lèi)型，他就會(huì)自動(dòng)的創(chuàng)建各自的實(shí)例,執(zhí)行相關(guān)操作，然后就會(huì)銷(xiāo)毀
如：

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

下面的代碼就體現(xiàn)了銷(xiāo)毀過(guò)程

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

在第一行代碼中，創(chuàng)建了一個(gè)實(shí)例，創(chuàng)建了字符串，隨之銷(xiāo)毀，第二行又重新創(chuàng)建了一個(gè)實(shí)例，附上red后，銷(xiāo)毀，在第三行中在執(zhí)行中，又創(chuàng)建了一個(gè)實(shí)例，此時(shí)實(shí)例的屬性是undefined。

同時(shí)Object構(gòu)造函數(shù)也具有這個(gè)功能。
如：

var obj = new Object("some text");//自動(dòng)返回基本包裝類(lèi)型的實(shí)例
alert（obj instanceof String）;//true

三種各自的包裝類(lèi)型詳細(xì)方法自己回憶。

7）單體內(nèi)置對(duì)象

這些書(shū)有一大特點(diǎn)，就是里面的名詞真的讓你心驚膽戰(zhàn)，明明很簡(jiǎn)單的事情，非要弄個(gè)你不熟悉的名字嚇唬你。

單體內(nèi)置對(duì)象，就是不依賴(lài)宿主環(huán)境的對(duì)象，在程序執(zhí)行之前就已經(jīng)存在。有兩個(gè) Global和Math

Global對(duì)象
書(shū)中寫(xiě)的很有意思，叫做“終極兜底兒對(duì)象”，所有不屬于其他對(duì)象的屬性和方法，最終都是他的屬性和方法

你一定想知道之前不是有window對(duì)象嗎？他們兩個(gè)是一個(gè)什么關(guān)系，現(xiàn)在先保留這個(gè)問(wèn)題。

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

現(xiàn)在我們就來(lái)說(shuō)一下window是一個(gè)什么東西，之前說(shuō)過(guò)在全局作用域中定義的屬性和方法，其實(shí)都可以用window.XX來(lái)訪問(wèn)得到，因?yàn)椴荒苤苯釉L問(wèn)Global對(duì)象，所以window對(duì)象實(shí)現(xiàn)了Global對(duì)象的一部分，全局作用域中屬性和函數(shù)，就都成為了window對(duì)象的屬性和方法。

接下來(lái)Global對(duì)象的屬性和方法請(qǐng)自行回憶腦補(bǔ)。

Math對(duì)象
對(duì)于Math對(duì)象沒(méi)有什么難理解的，同樣沿著他的屬性和方法回憶就好。。

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

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

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

//組合方法創(chuàng)建父級(jí)對(duì)象
function Animal(name,age) {
    this.name=name;
    this.age = age;
}
Dog.prototype.getName() {
    alert(this.name);
}
//組合方法創(chuàng)建對(duì)象，利用原型繼承
function Dog(name,age) {
    this.name = name;
    this.age = age;
}

//實(shí)現(xiàn)繼承
Dog.prototype = new Animal();

function Super() {
    this.colors = ["red","blue","green"];
}
function Sub() {
    //繼承自Super
    Super.call(this);//使用apply()和call()方法可以在新創(chuàng)建的對(duì)象上執(zhí)行構(gòu)造函數(shù)。
    
}

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）;
}；