听飞狐聊JavaScript设计模式系列02

tangr206 发布于2019-08-21 10:44 / 2205人阅读

摘要：本回内容介绍上一回聊到数据类型，简单的过了一遍，包括个数组新特性等，这一回来聊聊对象，结合数组来实战一些例子，在做题中成长，记忆会更深刻，来吧，开始咯创建实例的方式有两种使用操作符后跟构造函数飞狐使用对象字面量表示法飞狐也可以飞狐这种写法与

本回内容介绍

上一回聊到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设计模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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