初探 Vue3.0 中的一大亮点——Proxy !

不久前，也就是11月14日-16日于多伦多举办的 VueConf TO 2018 大会上，尤雨溪发表了名为 Vue3.0 Updates 的主题演讲，对 Vue3.0 的更新计划、方向进行了详细阐述（感兴趣的小伙伴可以看看完整的 PPT），表示已经放弃使用了 Object.defineProperty，而选择了使用更快的原生 Proxy !!

这将会消除了之前 Vue2.x 中基于 Object.defineProperty 的实现所存在的很多限制：无法监听 属性的添加和删除、数组索引和长度的变更，并可以支持 Map、Set、WeakMap 和 WeakSet！

做为一个 “前端工程师” ，有必要安利一波 Proxy !!

什么是 Proxy？

MDN 上是这么描述的——Proxy对象用于定义基本操作的自定义行为（如属性查找，赋值，枚举，函数调用等）。

官方的描述总是言简意赅，以至于不明觉厉...

其实就是在对目标对象的操作之前提供了拦截，可以对外界的操作进行过滤和改写，修改某些操作的默认行为，这样我们可以不直接操作对象本身，而是通过操作对象的代理对象来间接来操作对象，达到预期的目的~

什么？还没表述清楚？下面我们看个例子，就一目了然了~

    let obj = {
        a : 1
    }
    let proxyObj = new Proxy(obj,{
        get : function (target,prop) {
            return prop in target ? target[prop] : 0
        },
        set : function (target,prop,value) {
            target[prop] = 888;
        }
    })
    
    console.log(proxyObj.a);        // 1
    console.log(proxyObj.b);        // 0

    proxyObj.a = 666;
    console.log(proxyObj.a)         // 888

上述例子中，我们事先定义了一个对象 obj , 通过 Proxy 构造器生成了一个 proxyObj 对象，并对其的 set(写入) 和 get (读取) 行为重新做了修改。

当我们访问对象内原本存在的属性时，会返回原有属性内对应的值，如果试图访问一个不存在的属性时，会返回0 ，即我们访问 proxyObj.a 时，原本对象中有 a 属性，因此会返回 1 ，当我们试图访问对象中不存在的 b 属性时，不会再返回 undefined ，而是返回了 0 ，当我们试图去设置新的属性值的时候，总是会返回 888 ，因此，即便我们对 proxyObj.a 赋值为 666 ，但是并不会生效，依旧会返回 888!

语法

ES6 原生提供的 Proxy 语法很简单，用法如下：

let proxy = new Proxy(target, handler);

参数 target 是用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）, 参数 handler 也是一个对象，其属性是当执行一个操作时定义代理的行为的函数，也就是自定义的行为。

Proxy 的基本用法就如同上面这样，不同的是 handler 对象的不同，handler 可以是空对象 {} ，则表示对 proxy 操作就是对目标对象 target 操作，即：

    let obj = {}
    
    let proxyObj = new Proxy(obj,{})
    
    proxyObj.a = 1;
    proxyObj.fn = function () {
        console.log('it is a function')
    }

    console.log(proxyObj.a); // 1
    console.log(obj.a);      // 1
    console.log(obj.fn())    // it is a function

但是要注意的是，handler 不能 设置为 null ，会抛出一个错误——Cannot create proxy with a non-object as target or handler！

要想 Proxy 起作用，我们就不能去操作原来对象的对象，也就是目标对象 target （上例是 obj 对象 ），必须针对的是 Proxy 实例（上例是 proxyObj 对象）进行操作，否则达不到预期的效果，以刚开始的例子来看，我们设置 get 方法后，试图继续从原对象 obj 中读取一个不存在的属性 b ， 结果依旧返回 undefined ：

    console.log(proxyObj.b);     // 0
    console.log(obj.b);         // undefined

对于可以设置、但没有设置拦截的操作，则对 proxy 对象的处理结果也同样会作用于原来的目标对象 target 上，怎么理解呢？还是以刚开始的例子来看，我们重新定义了 set 方法，所有的属性设置都返回了 888 , 并没有对某个特殊的属性（这里指的是 obj 的 a 属性 ）做特殊的拦截或处理，那么通过 proxyObj.a = 666 操作后的结果同样也会作用于原来目标对象（obj 对象）上，因此 obj 对象的 a 的值也将会变为 888 !

    proxyObj.a = 666;
    console.log( proxyObj.a);   // 888
    console.log( obj.a);        // 888

API

ES6 中 Proxy 目前提供了 13 种可代理操作，下面我对几个比较常用的 api 做一些归纳和整理，想要了解其他方法的同学可自行去官网查阅 ：

--handler.get(target,property,receiver)

用于拦截对象的读取属性操作，target 是指目标对象，property 是被获取的属性名 ， receiver 是 Proxy 或者继承 Proxy 的对象，一般情况下就是 Proxy 实例。

let proxy = new Proxy({},{
    get : function (target,prop) {
        console.log(`get ${prop}`);
        return 10;
    }
})
    
console.log(proxy.a)    // get a
                        // 10

我们拦截了一个空对象的 读取get操作， 当获取其内部的属性是，会输出 get ${prop} ， 并返回 10 ；

let proxy = new Proxy({},{
    get : function (target,prop,receiver) {
            return receiver;
        }
    })

console.log(proxy.a)    // Proxy{}
console.log(proxy.a === proxy)  //true

上述 proxy 对象的 a 属性是由 proxy 对象提供的，所以 receiver 指向 proxy 对象，因此 proxy.a === proxy 返回的是 true。

要注意，如果要访问的目标属性是不可写以及不可配置的，则返回的值必须与该目标属性的值相同，也就是不能对其进行修改，否则会抛出异常~

let obj = {};
Object.defineProperty(obj, "a", {
    configurable: false,
    enumerable: false,
    value: 10,
    writable: false
});

let proxy = new Proxy(obj,{
    get : function (target,prop) {
        return 20;
    }
})

console.log(proxy.a)    // Uncaught TypeError

上述 obj 对象中的 a 属性不可写，不可配置，我们通过 Proxy 创建了一个 proxy 的实例，并拦截了它的 get 操作，当我们输出 proxy.a 时会抛出异常，此时，如果我们将 get 方法的返回值修改跟目标属性的值相同时，也就是 10 ，
就可以消除异常~

--handler.set(target, property, value, receiver)

用于拦截设置属性值的操作，参数于 get 方法相比，多了一个 value ，即要设置的属性值~

在严格模式下，set方法需要返回一个布尔值，返回 true 代表此次设置属性成功了，如果返回false且设置属性操作失败，并且会抛出一个TypeError。

let proxy = new Proxy({},{
    set : function (target,prop,value) {
        if( prop === 'count' ){
            if( typeof value === 'number'){
                console.log('success')
                target[prop] = value;
            }else{
                throw new Error('The variable is not an integer')
            }
        }
    }
})
    
 proxy.count = '10';    // The variable is not an integer
 
 proxy.count = 10;      // success

上述我们通过修改 set方法，对 目标对象中的 count 属性赋值做了限制，我们要求 count 属性赋值必须是一个 number 类型的数据，如果不是，就返回一个错误 The variable is not an integer，我们第一次为 count 赋值字符串 '10' ， 抛出异常，第二次赋值为数字 10 ， 打印成功，因此，我们可以用 set 方法来做一些数据校验！

同样，如果目标属性是不可写及不可配置的，则不能改变它的值，即赋值无效，如下：

let obj = {};
Object.defineProperty(obj, "count", {
    configurable: false,
    enumerable: false,
    value: 10,
    writable: false
});

let proxy = new Proxy(obj,{
    set : function (target,prop,value) {
        target[prop] = 20;
    }
})

proxy.count = 20 ;
console.log(proxy.count)   // 10

上述 obj 对象中的 count 属性，我们设置它不可被修改，并且默认值，我们给定为 10 ，那么即使给其赋值为 20 ，结果仍旧没有变化！

--handler.apply(target, thisArg, argumentsList)

用于拦截函数的调用，共有三个参数，分别是目标对象（函数）target，被调用时的上下文对象 thisArg 以及被调用时的参数数组 argumentsList，该方法可以返回任何值。

target 必须是是一个函数对象，否则将抛出一个TypeError；

function sum(a, b) {
    return a + b;
}

const handler = {
    apply: function(target, thisArg, argumentsList) {
        console.log(`Calculate sum: ${argumentsList}`); 
        return target(argumentsList[0], argumentsList[1]) * 2;
    }
};

let proxy = new Proxy(sum, handler);

console.log(sum(1, 2));     // 3
console.log(proxy(1, 2));   // Calculate sum：1,2
                            // 6

实际上，apply 还会拦截目标对象的 Function.prototype.apply() 和 Function.prototype.call()，以及 Reflect.apply() 操作，如下：

console.log(proxy.call(null, 3, 4));    // Calculate sum：3,4
                                        // 14

console.log(Reflect.apply(proxy, null, [5, 6]));    // Calculate sum: 5,6
                                                    // 22

--handler.construct(target, argumentsList, newTarget)

construct 用于拦截 new 操作符，为了使 new 操作符在生成的 Proxy对象上生效，用于初始化代理的目标对象自身必须具有[[Construct]]内部方法；它接收三个参数，目标对象 target ，构造函数参数列表 argumentsList 以及最初实例对象时，new 命令作用的构造函数，即下面例子中的 p。

let p = new Proxy(function() {}, {
    construct: function(target, argumentsList, newTarget) {
        console.log(newTarget === p );                          // true
        console.log('called: ' + argumentsList.join(', '));     // called：1,2
        return { value: ( argumentsList[0] + argumentsList[1] )* 10 };
    }
});

console.log(new p(1,2).value);      // 30

另外，该方法必须返回一个对象，否则会抛出异常！

var p = new Proxy(function() {}, {
    construct: function(target, argumentsList, newTarget) {
        return 2
    }
});

console.log(new p(1,2));    // Uncaught TypeError

--handler.has(target,prop)

has方法可以看作是针对 in 操作的钩子，当我们判断对象是否具有某个属性时，这个方法会生效，典型的操作就是 in ,改方法接收两个参数 目标对象 target 和 要检查的属性 prop，并返回一个 boolean 值。

let p = new Proxy({}, {
    has: function(target, prop) {
        if( prop[0] === '_' ) {
            console.log('it is a private property')
            return false;
        }
        return true;
    }
});

console.log('a' in p);      // true
console.log('_a' in p )     // it is a private property
                            // false

上述例子中，我们用 has 方法隐藏了属性以下划线_开头的私有属性，这样在判断时候就会返回 false，从而不会被 in 运算符发现~

要注意，如果目标对象的某一属性本身不可被配置，则该属性不能够被代理隐藏，如果目标对象为不可扩展对象，则该对象的属性不能够被代理隐藏，否则将会抛出 TypeError。

let obj = { a : 1 };

Object.preventExtensions(obj); // 让一个对象变的不可扩展，也就是永远不能再添加新的属性

let p = new Proxy(obj, {
    has: function(target, prop) {
        return false;
    }
});

console.log('a' in p); // TypeError is thrown

数据绑定

上面介绍了这么多，也算是对 Proxy 又来一个初步的了解，那么我们就可以利用 Proxy 手动实现一个极其简单数据的双向绑定（Object.defineProperty() 的实现方式可以参考我上篇文章的末尾有涉及到）~

主要看功能的实现，所以布局方面我就随手一挥了~

页面结构如下：

<!--html-->
<div id="app">
    <h3 id="paragraph"></h3>
    <input type="text" id="input"/>
</div>

主要还是得看逻辑部分：

//获取段落的节点
const paragraph = document.getElementById('paragraph');
//获取输入框节点
const input = document.getElementById('input');
    
//需要代理的数据对象
const data = {
    text: 'hello world'
}

const handler = {
    //监控 data 中的 text 属性变化
    set: function (target, prop, value) {
        if ( prop === 'text' ) {
                //更新值
                target[prop] = value;
                //更新视图
                paragraph.innerHTML = value;
                input.value = value;
                return true;
        } else {
            return false;
        }
    }
}

//添加input监听事件
input.addEventListener('input', function (e) {
    myText.text = e.target.value;   //更新 myText 的值
}, false)

//构造 proxy 对象
const myText = new Proxy(data,handler);

//初始化值
myText.text = data.text;

上述我们通过Proxy 创建了 myText 实例，通过拦截 myText 中 text 属性 set 方法，来更新视图变化，实现了一个极为简单的 双向数据绑定~

总结

说了这么多 ， Proxy 总算是入门了，虽然它的语法很简单，但是要想实际发挥出它的价值，可不是件容易的事，再加上其本身的 Proxy 的兼容性方面的问题，所以我们实际应用开发中使用的场景的并不是很多，但不代表它不实用，在我看来，可以利用它进行数据的二次处理、可以进行数据合法性的校验，甚至还可以进行函数的代理，更多有用的价值等着你去开发呢~

况且，Vue3.0 都已经准备发布了，你还不打算让学习一下？

加油！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,189评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,577评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,857评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,703评论 1赞 276
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,705评论 5赞 366
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,620评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,995评论 3赞 396
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,656评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,898评论 1赞 298
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,395评论 4赞 319
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,982评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2赞 342

推荐阅读更多精彩内容

  • ECMAScript 6学习(六)
    defineProperty() 学习书籍《ECMAScript 6 入门 》 Proxy Proxy 用于修改某...
    Bui_vlee阅读 648评论 0赞 1
  • 面试题
    Swift1> Swift和OC的区别1.1> Swift没有地址/指针的概念1.2> 泛型1.3> 类型严谨 对...
    cosWriter阅读 11,084评论 1赞 32
  • 庄子不二传 不走寻常路
    庄子不二传 第63回 庄子在稷下学宫混了几月，颇有了点小名头。有人叫他虚无主义大师；有人叫他老子別派；有人叫他杨...
    徐不二阅读 265评论 0赞 1
  • 如果张爱玲与三毛相遇
    张爱玲，一个在民国时期耳熟能详的才女，我泛泛读过她的几本小说，也痴迷于她高雅却略带颓废的文字。今天，我不想从她的...
    是___佳佳佳佳妮啊阅读 2,132评论 14赞 21
  • 军校那堵墙之五
    有人问我写这些东西的时候是怎样的体验。我把想象中已经蓄起来的长发往后一甩，撂下正用来打字的键盘。深吸了一口气，整理...
    约大人阅读 229评论 3赞 4