听飞狐聊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。

《听飞狐聊JavaScript设计模式系列02》
先装个逼,就当是分割线吧,好咯,开始敲代码了:

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基础的盆友,一看就懂,初学面向对象的童鞋多看几遍,难度系数不大。
下一回,咱们主要聊函数,然后做做题,比如某客的笔试题,会讲到其中两道题。

注:此系飞狐原创,转载请注明出处

    原文作者:设计模式
    原文地址: https://segmentfault.com/a/1190000003929113
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞