百度不收录网站怎么办b站推广网站2024下载
文章目录
- definePropety
- 语法
- 参数
- 用法
- proxy
- 语法
- 参数
- 用法
更多内容可参考我的博客
definePropety
ES5 提供了 Object.defineProperty 方法,该方法可以在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回这个对象。
语法
Object.defineProperty(obj, prop, descriptor)
参数
- obj: 要在其上定义属性的对象。
- prop: 要定义或修改的属性的名称。
- 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