zoukankan      html  css  js  c++  java
  • JavaScript:尝试ES6中的代理对象

    ES6中的代理(Proxy)对象给了我们自定义对象行为的能力,这个"代理"和网络方面的名词"代理服务器"没有任何关系.你可以先从MDN上了解一些基础知识,再回来看本文中给的例子.

    索引严格的数组

    在JavaScript中,数组其实就是个对象.因此,在进行一些看似是非法的数组操作时,JavaScript也能正常运行.

    比如,读取一个超大的索引:

    var arr = [];
    arr[999999999999999999999999999999999999999999999];   //"undefined"

    再比如,新建一个字符串属性(非法索引):

    var arr = [];
    arr["foo"] = 1;  
    arr["foo"]          //1

    这些操作都不是一个真正的数组应该有的合法操作.下面我们就利用代理来实现一个自定义的对索引类型和范围严格校验的数组类型MyArray :

    var MyArray = function () {
        return new Proxy(Array.apply(null, arguments), {
            get: function (target, name) {
                if (name in target || (+name >= 0 && +name < 4294967295)) {
                    return target[name];
                } else {
                    throw "非法索引";
    } }, set:
    function (target, name, val) { if (name in target || (+name >= 0 && +name < 4294967295)) { target[name] = val;
    }
    else { throw "非法索引"; } } }) }

    尝试执行一下:

    var arr = MyArray(1,2,3);   //新建一个自定义数组
    arr;                        //[1, 2, 3]
    arr.push(4);                //数组方法也能正常使用
    arr;                        //[1, 2, 3, 4]
    arr[999999999999]           //抛出异常,"非法索引"
    arr["foo"] = 1              //抛出异常,"非法索引"

    "继承"多个原型的对象

    在JavaScript中,每个对象都只能有一个直接的上层原型,不能有分支,从而无法实现多重继承.比如:

    var foo = {
    foo:
    function () {
    console.log(
    "foo")
    }
    };
    var bar = {
    bar:
    function () {
    console.log(
    "bar")
    }
    };
    var sonOfFoo = Object.create(foo);
    sonOfFoo.foo();
    //"foo" var sonOfBar = Object.create(bar);
    sonOfBar.bar();
    //"bar"
    sonOfFooBar = ? //怎么才能既有foo方法又有bar方法?

    下面我们就利用代理API生成一个同时"继承"两个原型foo和bar的代理对象:

    sonOfFooBar = new Proxy({}, {
        get: function (target, name) {
            return target[name] || foo[name] || bar[name];
        }
    })
    sonOfFooBar.foo();   //"foo",有foo方法,继承自对象foo
    sonOfFooBar.bar();   //"bar",也有bar方法,继承自对象bar

    任何属性都包含的对象

    想要检查一个对象是否包含有某个属性(属性值为undefined也算),我们通常使用in运算符.比如:

    0 in [1]    //true
    "a" in {a:"a"}  //true

    但是我想构建个对象,当in的左操作数为任意值时,它都返回true,这可能吗:

    "我是一个随机字符串" in obj    //返回true

    是的,使用代理对象可以办得到:

    var obj = new Proxy({}, {
        has: function () {
            return true;
        }
    });
    1 in obj;                       //true
    "hello" in obj;                 //true
    "妈妈说我的名字再长也存在" in obj;   //true

    当然,这只是表象,其实这个代理对象一个自身属性也没有.

    其他

    本文只举了set,get,has这三种trap的例子,其实还有其他十几种trap.你可以利用它们实现一些以前不可能实现的效果.本文中的例子都可以在最新版的Firefox中运行.如果你还想进一步了解Proxy的相关知识,ES wiki上有你想要的.

  • 相关阅读:
    计算一路话音消耗的带宽
    谋哥:我跟CEO们都说了啥
    wchar与char字符转换的探究
    pl/sql配置连接远程数据库oracle,本地没有安装oracle数据库的情况下
    围住浮动元素的三种方法
    Chromium浏览器组件设计意图
    tonymillion/Reachability的使用
    赵雅智_名片夹(3)_下拉刷新载入很多其它
    动态创建菜单和动态关联菜单项事件
    delphi创建动态菜单
  • 原文地址:https://www.cnblogs.com/ziyunfei/p/2813049.html
Copyright © 2011-2022 走看看