聽飛狐聊JavaScript設計模式系列02

本回內容介紹

上一回聊到JS數據類型，簡單的過了一遍，包括9個數組新特性等，這一回來聊聊Object對象，結合數組來實戰一些例子，在作題中成長，記憶會更深入，來吧，開始咯：

1. 建立Object實例的方式有兩種

(1) 使用new操做符後跟Object構造函數：

var o = new Object()； 
    o.name = "飛狐";

(2) 使用對象字面量表示法：

var o = {
        name: "飛狐"
    };
    //也能夠
    o.name = "飛狐"; //這種寫法與1的例子是同樣的，可是爲了可讀性，不推薦這樣寫。

2. 對象屬性的訪問

對象屬性訪問能夠用點表示法，還能夠用方括號來訪問對象屬性，而Object的枚舉循環用for in

var o = {
        name: "飛狐"
    };
    alert(o.name);
    alert(o["name"]);

    o.age = 21;
    for (i in o) { // for in 枚舉
        alert("屬性名：" + i + "；" + "屬性值：" + o[i]);
    }

3. 刪除對象屬性或方法用delete

var o = {
        name: "飛狐"
    };
    delete o.name;
    alert(o.name); // undefined

4. 不可擴展對象

Object.preventExtensions()方法使用後，就不能再給對象添加屬性或者方法了，但仍然能夠修改和刪除已有的成員。檢測對象是否能夠擴展：Object.isExtensible()

var o = {
        name: "飛狐"
    };
    alert(Object.isExtensible(o)); // true
    Object.preventExtensions(o);
    alert(Object.isExtensible(o)); // false
    
    o.age = 21;
    alert(o.age); // undefined
    o.name = "帥狐";
    alert(o.name); // 帥狐

5. 密封的對象

ES5(注：ECMAScript5的簡稱，之後的系列都簡寫爲ES5了哈，就備註這一次)，ES5爲對象定義的第二個保護級別是密封對象，Object.seal()方法用來密封，使用後除了不可擴展之外，也不能刪除，可是能夠修改，檢測是否密封：Object.isSealed()

var o = {
        name: "飛狐"
    };
    alert(Object.isSealed(o)); // false
    Object.seal(o);
    alert(Object.isSealed(o)); // true
    
    o.age = 21;
    alert(o.age); // undefined
    o.name = "帥狐";
    alert(o.name); // 帥狐
    delete o.name;
    alert(o.name); // 帥狐

6. 凍結的對象

凍結的對象既不可擴展，又是密封的，使用Object.freeze()方法凍結對象。通俗點講，就是不可增刪改，只能查。檢測對象是否被凍結方法：Object.isFrozen()

var o = {
        name: "飛狐"
    };
    alert(Object.isFrozen(o)); // false
    Object.freeze(o);
    alert(Object.isFrozen(o)); // true

    o.age = 21;
    alert(o.age); // undefined
    delete o.name;
    alert(o.name); // "飛狐"
    o.name = "帥狐";
    alert(o.name); // "飛狐"

經過以上的講解，相信你們對Object類型有了必定的認識，其實說白了，跟java.lang.Object同樣的，Object類型是全部對象實例的基礎，既然說到java了，下面就作一個簡單的模擬，模擬Java的Map。

先裝個逼，就當是分割線吧，好咯，開始敲代碼了：

java中map，是key-value保存方式，網上不少例子是用數組來模擬的，下面的例子是用對象實現，能夠保證Key不重複

JS模擬MAP

function Map() {
        var o = {}; // 裝鍵值對的對象字面量
        this.put = function(k, v) { // 傳入的key，value
            o[k] = v;
        };

        this.size = function() {
            var c = 0; // 計數器
            for (var i in o) { // for in 枚舉循環
                c++; // 循環累加
            }
            return c; // 返回的就是對象屬性總數
        };

        this.get = function(k) { // get方法根據鍵獲取值
            o[k] = o[k] ? o[k] : null
            return o[k];
        };

        this.remove = function(k) { // remove方法實現刪除
            o[k] = o[k] ? o[k] : null; // 判斷是否爲空
            delete o[k];
        };

        this.clear = function(k) { // clear方法實現清空
            o = {};
        };
        
        // 傳入的是回調函數，用for in的方法進行遍歷
        this.eachMap = function(fn) {
            for (var i in o) {
                // 將遍歷的鍵值對返給回調函數，提升在使用時的靈活性
                fn(i, o[i]); 
            }
        }
    };

    // 這裏實際是一個構造函數模擬的類，講函數，類的時候會細講
    var m = new Map();
    m.size();
    m.put("name", "帥狐");
    alert(m.get("name"));
    
    m.clear();
    m.get("name");
    m.put("name", "飛狐");
    m.put("feature", "帥");
    m.put("time", new Date().toLocaleString());
    m.size();
    
    m.eachMap(function(k, v) {
        alert(k + "的值是：" + v);
    });

這個例子模擬了Map的基本實現，有Java基礎的盆友，一看就懂，初學面向對象的童鞋多看幾遍，難度係數不大。
下一回，我們主要聊函數，而後作作題，好比某客的筆試題，會講到其中兩道題。

---

注：此係飛狐原創，轉載請註明出處