Proxy

（Proxy）

在这之前，我们讲过对象属性的精细化设置。可以设置对象属性的可读，可写，或者删除之类的操作。当然，这些操作都是为了什么而存在的呢？没错，就是为了保护我们的属性。

在我们学nodejs的时候，我们是用的七牛SDK去处理上传的图片。那么，我们都知道，七牛的SDK都是需要APPID去签名的。那么，这个APPID就是我们不希望去被修改的属性。在ES6之前，我们可以使用Object.defineProperty去保护它。

例如:

let sign = { _appid: "12345678", _appkey: "666", desc: "Alex的密钥" }

Object.defineProperties(sign,{ _appid: { writable: false }, _appkey: { writable: false } })

这种情况下，我们的私有属性就被保护了起来。

那么，有的时候，我们想针对多个属性进行保护的时候，ES5的方式就显得比较吃力了。你不得不针对多个属性进行声明witable: false;

那么这个时候ES6就出来拯救我们了。

Proxy Proxy实际上，意味着我们代理了这个对象，该对象所有的属性操作都会经过我们的Proxy。一起来看看吧。

let sign = { _appid: "12345678", _appkey: "666", desc: "Alex的密钥" }

let signProxy = new Proxy(sign, { get(target, property) { console.log("loading"); return target[property] }, set(target, propName, property, proxy){ console.log(proxy); if(propName!="desc"){ alert("该属性是私有属性，不允许修改"); } else { target[propName] = property; } } })

当然，细心的同学可能会发现，我们依旧可以去直接修改这个sign这个对象，没有出现任何问题。例如，我对sign对象的_appid进行修改是ok的。

我们这个proxy模式类似于一个中间层的概念，供用户进行操作的，实际上是signProxy对象。如果，你期望你的对象完全不可修改。大可以将sign直接写到Proxy构造器当中。

let signProxy = new Proxy({ _appid: "12345678", _appkey: "666", desc: "Alex的密钥" }, { get(target, property) { console.log("loading"); return target[property] }, set(target, propName, property, proxy){ console.log(proxy); if(propName!="desc"){ alert("该属性是私有属性，不允许修改"); } else { target[propName] = property; } } }) 应用场景:

数据校检 保护属性 相关例子： 我们从两个例子去体会一下Proxy的应用吧。

数据类型验证 需求：

有一个记账的对象，记录着用户的存款金额，为了方便以后计算，要保证存入的数据必须为Number。

let account = { number: 88 }

let proxyAccount = new Proxy(account, { get(target, property){ return target[property] }, set(target, propName, propValue){ if(propName == "number"){ if(typeof propValue!="number"){ alert("number属性必须存入数字"); return } } target[propName] = propValue; } }) 简易版本Vue双向数据绑定 我们之前都使用过Vue。那么，今天我们来做一个简易版本的Vue去试一下。当然，Vue内部的原理远比我们的Demo复杂的多。

实现功能如下：

通过v-model绑定一个值的同时。v-bind的dom元素可以实现双向数据绑定。 实现代码如下:

用户名：
密码：

转载于:https://juejin.im/post/5c6ea0056fb9a049df24abac