首页 > 代码库 > es6 Proxy

es6 Proxy

2024-09-28 13:06:39   211人阅读

proxy在语言层面去操作一个对象

var user={};        user.fname=‘Bob‘;        user.lname="Wood";        user.fullName= function () {            console.log(this.fname+" "+this.lname);        }        user.fullName();//Bob Wood

现在要做到user.fullName就让它去显示。

proxy接收2个参数，第一个是对象{}，第二个也是个{}。

var user = new Proxy({}, {    get: function (obj, prop) {        return obj.fname + " " + obj.lname;    }});user.fname = ‘Bob‘;user.lname = "Wood";console.log("user.fullName:" + user.fullName);      //user.fullName:Bob Wood

此时没有对传入get方法中的prop做判断。所以哪怕输入一个user.age也会输出：Bob Wood

console.log("user.age:" + user.age);      //user.age:Bob Wood

所以做一个判断，如果prop是full_name就输出全名

var user = new Proxy({}, {    get: function (obj, prop) {        if(prop==‘full_name‘){            return obj.fname + " " + obj.lname;        }    }});user.fname = ‘Bob‘;user.lname = "Wood";console.log("user.full_name:" + user.full_name);      //user.full_name:Bob Woodconsole.log("user.age:" + user.age);      //user.age:undefined

也可以通过switch对多个prop进行处理

var user = new Proxy({}, {    get: function (obj, prop) {            switch (prop){                case ‘full_name‘:                    return obj.fname + " " + obj.lname;                case ‘age‘:                    return obj.age;            }    }});user.fname = ‘Bob‘;user.lname = "Wood";user.age="25";console.log("user.full_name:" + user.full_name);      //user.full_name:Bob Woodconsole.log("user.age:" + user.age);      //user.age:25

总结：get就像一层过滤器一样，obj在取值前加了一层，在对象提取值之前做一些操作。

除了get，也可以用set在设置属性时做一层处理。

    var user = new Proxy({}, {        get: function (obj, prop) {            switch (prop) {                case ‘full_name‘:                    return obj.fname + " " + obj.lname;                case ‘age‘:                    return obj.age;            }        }, set: function (obj, prop,value) {//针对不同属性set值            switch (prop) {                case ‘age‘:                    obj.age=value+"岁";                    break;                default:                    obj[prop]=value; //age之外的属性直接保存                    break;            }        }    });    user.fname = ‘Bob‘;    user.lname = "Wood";    user.age = "25";    console.log("user.full_name:" + user.full_name);      //user.full_name:Bob Wood    console.log("user.age:" + user.age);      //user.age:25岁

 

参考：http://wiki.jikexueyuan.com/project/es6/object.html

 

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：http://www.cnblogs.com/starof/p/6919862.html有问题欢迎与我讨论，共同进步。

es6 Proxy


联系
我们