微信公众平台网站建设新闻报道百度云群组

更多内容可参考我的博客

---

definePropety

ES5 提供了 Object.defineProperty 方法，该方法可以在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象。
​

语法

Object.defineProperty(obj, prop, descriptor)

参数

1. obj: 要在其上定义属性的对象。
2. prop: 要定义或修改的属性的名称。
3. descriptor: 将被定义或修改的属性的描述符。

第三个参数 descriptor 所表示的属性描述符有两种形式：数据描述符和存取描述符。

用法

var obj = {},value = 9;
Object.defineProperty(obj, 'age', {get: function () {console.log('get');return value;},set: function (val) {console.log('set');value = val;}
});
console.log(obj.age); // get 9
obj.age = 18; // set
console.log(obj.age); // get 18

proxy

使用 defineProperty 只能重定义属性的读取（get）和设置（set）行为，到了 ES6，提供了 Proxy，可以重定义更多的行为，比如 in、delete、函数调用等更多行为。
​

语法

var proxy = new Proxy(target, handler);

参数

proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。
​

用法

var proxy = new Proxy({},{get: function (obj, prop) {console.log('设置 get 操作');return obj[prop];},set: function (obj, prop, value) {console.log('设置 set 操作');obj[prop] = value;}}
);proxy.time = 35; // 设置 set 操作console.log(proxy.time); // 设置 get 操作 // 35

除了 get 和 set 之外，proxy 可以拦截多达 13 种操作，比如 has(target, propKey)，可以拦截 propKey in proxy 的操作，返回一个布尔值。

// 使用 has 方法隐藏某些属性，不被 in 运算符发现
var handler = {has(target, key) {if (key[0] === '_') {return false;}return key in target;}
};
var target = { _prop: 'foo', prop: 'foo' };
var proxy = new Proxy(target, handler);
console.log('_prop' in proxy); // false