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

tangr206 發布于2019-08-21 10:44 / 2226人閱讀

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

本回內容介紹

上一回聊到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基礎的盆友，一看就懂，初學面向對象的童鞋多看幾遍，難度系數不大。
下一回，咱們主要聊函數，然后做做題，比如某客的筆試題，會講到其中兩道題。

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

GPU云服務器云服務器 javascript專題系列 javascript深入系列飛狐 javascript設計模式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86090.html

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

摘要：橋接模式之特權函數特權函數，用一些具有特權的方法作為橋梁以便訪問私有空間，可以回憶一下之前的系列。連續自然數分組，計算最多組的個數將至這個連續自然數分成組使每組相加的值相等。個數組中數字最多的一組有個此時的和為。本回內容介紹上一回，聊了適配器模式，圖片預加載，介一回，聊橋接模式（Bridge），跟之前一樣，難度比較小，橋接模式將抽象部分與它的實現部分分離，通過橋接模式聯系彼此，同時...

wanglu1209 2019-08-19 17:12 評論0 收藏0
聽飛狐聊JavaScript設計模式系列06

本回內容介紹上一回聊到JS中模擬接口，裝飾者模式，摻元類，分析了backbone的繼承源碼，感覺還好吧！介一回，偶們來聊一下在JS單例模式(singleton)，單例模式其實運用很廣泛，比如：jquery，AngularJS，underscore吖蝦米的都是單例模式，來吧，直接開始咯： 1. 單例模式保證一個類只有一個實例，從全局命名空間里提供一個唯一的訪問點來訪問該對象。其實之前寫過的對象...

hiYoHoo 2019-08-21 10:45 評論0 收藏0
聽飛狐聊JavaScript設計模式系列10

摘要：本回內容介紹上一回，聊了代理模式，虛擬代理，圖片懶加載，介一回，也比較容易，適配器模式，用一個新的接口對現有類的接口進行包裝，處理類與的不匹配。這一回，主要聊了適配器模式，圖片預加載，主要還是理解下一回，聊一聊橋接模式，順便做一做計算題。本回內容介紹上一回，聊了代理模式，虛擬代理，圖片懶加載，介一回，也比較容易，適配器模式（Adapter），用一個新的接口對現有類的接口進行包裝，處...

yexiaobai 2019-08-19 17:12 評論0 收藏0
聽飛狐聊JavaScript設計模式系列14

摘要：本回內容介紹上一回，聊了聊狀態模式，并介紹了一下介一回，聊鏈式編程，模擬一下，再模擬一下封裝一個庫。這一回，主要聊了鏈式調用，模擬了，尤其是，希望大家能喜歡這次代碼分享。下一回，聊一聊的策略模式。本回內容介紹上一回，聊了聊狀態模式（State），并介紹了一下vue.js；介一回，聊鏈式編程，模擬一下jQuery，再模擬一下underscore.js,封裝一個庫。 1. 鏈式調用 (...

fox_soyoung 2019-08-19 17:20 評論0 收藏0
聽飛狐聊JavaScript設計模式系列09

摘要：說白了，就是對訪問進行控制。這一回，主要聊了代理模式，虛擬代理，圖片懶加載，難度適中下一回，聊一下適配器模式，難度也比較小。本回內容介紹上一回，聊了門面模式，DOM2級事件，事件委托，介一回，也比較容易，代理模式（proxy），代理對象控制對本體對象的訪問，實現了同樣的接口，并且會把任何方法的調用傳遞到本體對象。說白了，就是對訪問進行控制。直接上代碼，走你： 1.代理模式代理也是...

張春雷 2019-08-19 17:07 評論0 收藏0