悟透JavaScript

悟透JavaScript

2015-4-22 張子陽 推薦: 3 難度: 3

這本書分爲了三個部分，第一部分“JavaScript真經”主要講解JavaScript的一些核心概念，主要是數據類型、函數、原型、對象。並通過在JavaScript模擬類和繼承的概念，講解了這些概念；第二部分“手談JavaScript”主要講解了DOM，並實現了一個圍棋的範例；第三部分“點化AJax” 主要講述了Ajax的實現，以及跨域進行Ajax調用，並結合Asp.Net實現了單點登錄。

整體來看，書的第一部分價值最高，理清了很多概念，作者也是因爲將第一部分發表博客後獲得廣泛好評才寫了全書。書中反覆用佛祖、菩提、真經之類來對寫程序和代碼進行類比，推測作者可能平時會關注這方面的內容，但作爲讀者來說，則感覺有些拖沓，不夠清爽明快。

下面摘錄了書中的一些要點。

JavaScript真經

甘露模型：這個模型主要是將JavaScript的類定義、繼承，模擬成C#的語言的形勢，看上去顯得更加優雅一些。

// 根類object定義
function object() { }

// 判斷對象是否屬於某類型
object.prototype.isA = function (aType) {
    var self = this.Type;
    while (self) {
        if (self == aType) return true;
        self = self.Base;
    }
    return false;
}

object.prototype.base = function () {
    var Base = this.Type.Base;

    if (!Base.Base) {   //已經是頂級了
        Base.apply(this, arguments);    // 直接調用基類構造函數
    } else {
        this.base = MakeBase(Base);     // 覆寫this.base
        Base.apply(this, arguments);    // 調用基類構造函數
        delete this.base;               // 刪除覆寫的base屬性
    }

    function MakeBase(Type) {
        var Base = Type.Base;
        if (!Base.Base) return Base;
        return function () {
            this.base = MakeBase(Base);
            Base.apply(this, arguments);
        }
    }
}

// 定義類
function Class(){
    var aDefine = arguments[arguments.length - 1];
    if(!aDefine) return;
    
    var aBase = arguments.length > 1?arguments[0]:object; // 解析基類
    
    function prototype_(){}     // 構造prototype的臨時函數，用於掛接原型鏈
    
    prototype_.prototype = aBase.prototype;
    
    var aPrototype = new prototype_();
    
    // 複製類定義到當前類的prototype
    for(var member in aDefine){
        if(member != "Create"){ // 構造函數不用複製
            aPrototype[member] = aDefine[member];
        }
    }

    if (aDefine.toString != Object.prototype.toString)
        aPrototype.toString = aDefine.toString;
    if (aDefine.toLocaleString != Object.prototype.toLocaleString)
        aPrototype.toLocaleString = aDefine.toLocaleString;
    if (aDefine.valueOf != Object.prototype.valueOf)
        aPrototype.valueOf = aDefine.valueOf;

    // 如果有構造函數
    var aType;
    if (aDefine.Create) {
        aType = aDefine.Create;
    } else {
        aType = function () {
            this.base.apply(this, arguments);   // 調用基類構造函數
        };
    }

    aType.prototype = aPrototype;
    aType.Base = aBase;         // 設置類型關係，便於追溯
    aType.prototype.Type = aType;    // 爲此類對象擴展一個Type屬性
    
    return aType;
}

// 使用示例
var Person = Class({
    Create: function (name, age) {
        this.base();    // 調用上層構造函數
        this.name = name;
        this.age = age;
    },
    SayHello: function () {
        alert("Hello, I'm " + this.name + ", age " + this.age +".");
    },
    toString: function () {
        return this.name;
    }
});

var Employee = Class(Person, {
    Create: function (name, age, salary) {
        this.base(name, age);
        this.salary = salary;
    },
    ShowMeTheMoney: function () {
        alert(this + ", $" + this.salary);
    }
});

var BillGates = new Person("Bill Gates", 53);
var SteveJobs = new Employee("Steve Jobs", 59, 123);
alert(BillGates);
BillGates.SayHello();
SteveJobs.SayHello();
SteveJobs.ShowMeTheMoney();

// 用BillGate的類型建littleBill
var littleBill = new BillGates.Type("Little Bill", 6);
littleBill.SayHello();

alert(BillGates.isA(Person));   // true
alert(BillGates.isA(Employee)); // false
alert(SteveJobs.isA(Person));  // true

手談JavaScript

這部分通過一個圍棋的範例講述了DOM、播放音樂、事件等內容，有點兒偏講代碼，個人覺得意義不大，有一些經驗的開發人員都能夠實現。

感謝閱讀，希望這篇文章能給你帶來幫助！