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

本回内容介绍

上一回聊到JS数据类型,简单的过了一遍,包括9个数组新特性等,这一回来聊聊Object对象,结合数组来实战一些例子,在作题中成长,记忆会更深入,来吧,开始咯:javascript

1. 建立Object实例的方式有两种

(1) 使用new操做符后跟Object构造函数:java

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

(2) 使用对象字面量表示法:c++

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()this

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()spa

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。code

装逼图
先装个逼,就当是分割线吧,好咯,开始敲代码了:对象

java中map,是key-value保存方式,网上不少例子是用数组来模拟的,下面的例子是用对象实现,能够保证Key不重复blog

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


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

相关文章
相关标签/搜索