摘要：前言由于最近的項目用到了一些的代碼，所以我?guī)е闷嫘?，認真閱讀了這本書，粗略地了解語言的基本結構和特性，對于一些不熟悉的新概念，以記錄的形式加強印象，也是對學習的反思總結。

由于最近的項目用到了一些js的代碼，所以我?guī)е闷嫘?，認真閱讀了這本書，粗略地了解js語言的基本結構和特性，對于一些不熟悉的新概念，以記錄的形式加強印象，也是對學習的反思總結。

“字面量“這個詞在書中高頻出現(xiàn)，先看看他的定義：

字面量表示如何表達這個值，一般除去表達式，給變量賦值時，等號右邊都可以認為是字面量。

舉個簡單的例子就明白了，例如

var a = 1;
var b = "hello world";
var c = [];
var d = {};
var e = function (a,b){return a + b;}

以上例子中，賦值號右邊都是字面量，分別是數(shù)字字面量，字符串字面量，數(shù)組字面量，對象字面量及函數(shù)字面量。

我的理解，js和php一樣都是弱類型語言，需要根據(jù)賦值號右邊的內(nèi)容來判斷變量的類型，而字面量就是為了很方便地按照指定規(guī)格創(chuàng)建新的對象，數(shù)組或者定義函數(shù)值，讓我們更清楚地知道我到底定義了一個什么。

字面量都是一些不可改變的值，比如 ：1 2 3 4 5

變量就像一個容器，可以用來保存字面量，而且變量的值是可以任意改變的

通常我們不會直接調(diào)用字面量，而是先將字面量存到變量中，再進行調(diào)用

真的應了老師說的，”萬物皆對象“，在js中，沒有類，有的只有對象，數(shù)組是對象，函數(shù)是對象，正則表達式是對象，當然，對象也是對象。

寫法很簡單，就是一對花括號括住“屬性：值”對，這里就不再舉例子了，對象是可以嵌套的，用點運算符來獲取對象的某個值

對象不會復制，通過引用來傳遞，例如

var stooge = {
    name : "Jack";
};
var x = stooge;
x.name = "Tom";
var result = stooge.name;

由于x與stooge指向同一個對象，所以此時result為”Tom“.

js里，每一個對象都會連接一個原型對象，并且可以繼承屬性，所有通過字面量對象創(chuàng)建的對象都會連接到Object.prototype,它是js中標配對象

當創(chuàng)建一個對象時，可以選擇一個對象作為它的原型，，這有點像類的繼承，具體實現(xiàn)的方法書中已經(jīng)幫我們寫好了，直接拿來套用就行

var stooge = {
    name : "Tom"
};

if (typeof Object.beget !== "function") {
    Object.create  = function(o){
        var F = function () {};
        F.prototype = o;
        return new F();
    };
}

var another_stooge = Object.create(stooge);//another_stooge選擇stooge作為它的原型

關于原型，有幾點需要注意

對一個對象做出改變時，不影響它的原型，但改變原型的屬性時，繼承它的對象的屬性也會改變，但不會改變繼承以后新增的屬性

在原型之中添加屬性，繼承它的所有對象也會可見，改變原型的一個屬性，繼承它的對象的屬性也會改變，刪除原型的一個屬性，繼承它的對象也會刪除

如果b繼承a，c繼承b,那么就會形成原型鏈，如果獲取一個c中沒有的屬性,那么它會從b中找這個屬性，如果b中也沒有，它會從a中找，如果a中還沒有，則返回undefined，此過程稱為委托

關于第二條我有一個疑問，在原型中添加一個屬性，繼承它的對象是否也添加了這個屬性？

如果我直接檢索一個對象的屬性，由于委托的存在而使得我無法確認該屬性是對象還是原型的

例如，我在上面的代碼繼續(xù)寫

stooge.lastname = "jack";
var name = another_stooge.lastname;
document.writeln(name);

這時，輸出結果是jack，但這個jack是another_stooge的還是stooge的，我并不知道。

這個其實在后面給出了解決方法，就是使用hasOwnProperty()這個方法

stooge.lastname = "jack";
var status = another_stooge.hasOwnProperty("lastname");
document.writeln(status);

運行結果：false
這個方法會檢查對象是否擁有獨有屬性，而且不會檢查原型鏈，如果是，返回true，否則返回false

使用typeof可以檢查對象屬性的類型，用來過濾掉函數(shù)，而hasOwnProperty則可以過濾掉不關心的值，那么結合forin語句就可以遍歷對象所有的值了

var name;
for (name in another_stooge) {
    if (typeof another_stooge.name !== "function") {
        document.writeln(name + ":" another_stooge.name);
    }
}

函數(shù)這部分涉及的內(nèi)容較多，各種調(diào)用，回調(diào)，級聯(lián)，記憶等之前從沒見過的用法

對象字面量創(chuàng)建對象，它連接到object.prototype
函數(shù)字面量創(chuàng)建函數(shù)對象，它連接到Function.prototype

有趣的是，函數(shù)在創(chuàng)建完之后，會天生自帶屬性和方法，函數(shù)不僅可以當“函數(shù)”使用，也能當“對象”使用，函數(shù)可以保存到變量，對象，數(shù)組中。函數(shù)可以當成另一個函數(shù)的參數(shù)，函數(shù)可以返回函數(shù)，函數(shù)甚至可以擁有函數(shù)（注意，不是在一個函數(shù)中調(diào)用另一個函數(shù)，而是函數(shù)可以作為另一個函數(shù)的屬性），當一個函數(shù)是另一個對象的屬性時，函數(shù)被稱為方法

這種調(diào)用方法在面向?qū)ο缶幊陶Z言中最為常見，當一個函數(shù)保存為一個對象的屬性時，可以通過object.function()進行調(diào)用

另外，方法可以通過this指針找到自己的對象，在方法內(nèi)，可以通過this.another_function()，this.property使用或修改對象其他的方法和屬性，在使用thinkphp過程中，this的使用非常高頻，所以這樣的用法并不陌生

當函數(shù)定義在對象外部時，，通過function(value1,value2,etc)調(diào)用成為函數(shù)調(diào)用模式

函數(shù)調(diào)用模式有一個麻煩的地方。

當函數(shù)定義在對象內(nèi)部時，this指調(diào)用函數(shù)的對象，當函數(shù)沒有綁定在對象內(nèi)時，默認指向全局對象（window）

但是當我在函數(shù)內(nèi)定義了一個方法時，this應該指向?qū)ο?，而實際卻指向全局對象，這使得在定義函數(shù)內(nèi)部的方法時不能使用該對象的其他屬性輔助完成，例如以下

var ob = {
    value : 1,
    add : function () {
            var show = function () {
                return this;
            };
            return show();
    }
};
var result = add();
document.writeln(result);

運行結果：[object Window]
由結果可知，show方法中的this并沒有指向ob，而是指向了全局對象。

解決方法：在外部函數(shù)內(nèi)定義一個變量that并賦值為this，內(nèi)部函數(shù)使用that，即可訪問該對象

var ob = {
    value : 1,
    add : function () {
            var that = this;
            var show = function () {
                return that.value;
            };
            return show();
    }
};

var result = ob.add();
document.writeln(result);

運行結果：1
此時，show就可以訪問ob.value了

先上實例

var Person = function(name){
    this.name = name;
};
var student = new Person("li");//構造一個Person對象，并將name屬性賦值為li
document.writeln(student.name);

很眼熟，像極了類的構造函數(shù)，用法也是，直接new Function(value,etc)
這種構造對象的模式對于習慣了基于類的語言的我簡直是福音，我看到時滿滿的親切感

書上對于構造器調(diào)用不是十分推薦，因為當使用此類函數(shù)時不加new修飾符會帶來意想不到的錯誤，既沒有編譯器提醒也沒有運行警告。在后面他提出了一個更好的解決辦法——偽類，會這在之后進行具體的學習

書中對這種調(diào)用的介紹很少，我結合書和菜鳥教程做了一些自己的總結

Apply和Call都是函數(shù)自帶的方法，功能一樣，用法不同

apply：

函數(shù)模式

var array = [1,2];
var add = function(number1,number2){
    return number1 + number2;
};
var result = add.apply(null,array);//以window作為上下文
document.writeln(result);

2.方法模式

var array = [1,2];
var add = function(number1,number2){
    return number1 + number2;
};
var o = { name : "jack"};
var result = add.apply(o,array);//以o作為上下文
document.writeln(result);

兩種調(diào)用，只是在參數(shù)上有所不同，第一個參數(shù)為null時，以window作為上下文，如果是對象，則以該對象為上下文

這個上下文是什么？有什么用？

這使我非常困惑，這種調(diào)用看似很沒用?。?/p>

直到我看到一則實例，我才感受到它的魅力

題目：獲得 div 與 p 標簽, 并添加邊框 border: 1px solid red

一般做法：

    var p_list = document.getElementsByTagName("p");//獲取所有p標簽，存到p_list
    var div_list = document.getElementsByTagName("div");//獲取所有div標簽，存到div_list
    var i = 0;
    for( ; i < p_list.length; i++ ) {
        p_list[ i ].style.border = "1px solid red";//通過for循環(huán)，挨個添加樣式
    }
    for( i = 0; i < div_list.length; i++ ) {
        div_list[ i ].style.border = "1px solid red";//通過for循環(huán)，挨個添加樣式
    }

使用上下文模式：

    var t = document.getElementsByTagName, arr = [];// 偽數(shù)組沒有 push 方法，所以這里要 聲明一個 數(shù)組
    arr.push.apply( arr, t.apply( document, [ "p" ] ) );// 其實是把p標簽，一個個當成參數(shù)放了進來
    arr.push.apply( arr, t.apply( document, [ "div"] ) );//同上
    arr.forEach( function( val, index, arr ) {
        val.style.border = "1px solid red";//使用foreach，只進行一次遍歷，即可添加樣式
    });

上述實例的核心就是將兩個數(shù)組合并在一起，進行一次遍歷

對于call，只是參數(shù)不再以數(shù)組形式封裝，而是function.call(null,value1,value2,etc)這樣的形式，在此不多做贅述

通過js，我首次接觸到基于原型繼承設計的語言，剛開始學習對于這樣的設計不是很明白，也不明白原型設計的好處是什么。但是js的廣泛使用證明它必然有它的優(yōu)勢，我無法理解說明我的技術還達不到去理解一個語言精髓的水平

js中處處體現(xiàn)著萬物姐皆對象，處處是對象，這讓我在一開始感到費解，但隨著進一步的學習，我發(fā)現(xiàn)，在js中，對象與其說是對象，不如說是屬性和方法的集合，一個對象在定義之初，系統(tǒng)就已經(jīng)“免費”贈送了這個集合一些屬性和方法，以這樣的思路去思考，就不難理解為什么函數(shù)會是對象了

函數(shù)的四種調(diào)用方法，方法模式和函數(shù)模式我都非常熟悉，只是函數(shù)調(diào)用模式需要注意this與that，構造器模式作者并不推薦，只是作為了解，而上下文模式設計的巧妙我還不能完全領會，基本處于一頭霧水。

javascript語言精粹這本書感覺很多地方過于簡略，需要我結合網(wǎng)上的一些資料輔助才能看懂，換言之，它并不適合新手入門，然而即便如此，我也抱著能看懂多少算多少的心態(tài)，去一窺這個語言的魅力