聽飛狐聊JavaScript設(shè)計模式系列02

tangr206 發(fā)布于2019-08-21 10:44 / 2232人閱讀

摘要：本回內(nèi)容介紹上一回聊到數(shù)據(jù)類型，簡單的過了一遍，包括個數(shù)組新特性等，這一回來聊聊對象，結(jié)合數(shù)組來實戰(zhàn)一些例子，在做題中成長，記憶會更深刻，來吧，開始咯創(chuàng)建實例的方式有兩種使用操作符后跟構(gòu)造函數(shù)飛狐使用對象字面量表示法飛狐也可以飛狐這種寫法與

本回內(nèi)容介紹

上一回聊到JS數(shù)據(jù)類型，簡單的過了一遍，包括9個數(shù)組新特性等，這一回來聊聊Object對象，結(jié)合數(shù)組來實戰(zhàn)一些例子，在做題中成長，記憶會更深刻，來吧，開始咯：

1. 創(chuàng)建Object實例的方式有兩種

(1) 使用new操作符后跟Object構(gòu)造函數(shù)：

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

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

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

2. 對象屬性的訪問

對象屬性訪問可以用點表示法，還可以用方括號來訪問對象屬性，而Object的枚舉循環(huán)用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. 凍結(jié)的對象

凍結(jié)的對象既不可擴展，又是密封的，使用Object.freeze()方法凍結(jié)對象。通俗點講，就是不可增刪改，只能查。檢測對象是否被凍結(jié)方法：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類型是所有對象實例的基礎(chǔ)，既然說到j(luò)ava了，下面就做一個簡單的模擬，模擬Java的Map。

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

java中map，是key-value保存方式，網(wǎng)上很多例子是用數(shù)組來模擬的，下面的例子是用對象實現(xiàn)，可以保證Key不重復(fù)

JS模擬MAP

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

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

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

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

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

    // 這里實際是一個構(gòu)造函數(shù)模擬的類，講函數(shù)，類的時候會細講
    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的基本實現(xiàn)，有Java基礎(chǔ)的盆友，一看就懂，初學(xué)面向?qū)ο蟮耐嗫磶妆椋y度系數(shù)不大。
下一回，咱們主要聊函數(shù)，然后做做題，比如某客的筆試題，會講到其中兩道題。

注：此系飛狐原創(chuàng)，轉(zhuǎn)載請注明出處