关于proxy的精髓理解(掌握这些理解,基本对proxy的执行过程也就有了把握):
1、Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程
2、 Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。
3、Proxy 实际上重载(overload)了点运算符,即用自己的定义覆盖了语言的原始定义
语法:
var proxy = new Proxy(target, handler);
Proxy 对象的所有用法,都是上面这种形式,不同的只是handler参数的写法。其中,new Proxy()表示生成一个Proxy实例,target参数表示所要拦截的目标对象,handler参数也是一个对象,用来定制拦截行为。
coding:
let obj = new Proxy({},{
get: function(target,propKey,receiver) {
console.log(`获取的时候会被拦截`)
console.log(target,propKey,receiver)
return Reflect.get(target,propKey,receiver)
},
set: function(target,propKey,value,receiver) {
console.log(`设置时被拦截`);
console.log(target,propKey,value,receiver)
return Reflect.set(target,propKey,value,receiver)
}
})
console.log(obj) // Proxy {}
obj.count = 1
// 设置时被拦截
// {} "count" 1 Proxy {}
++obj.count
// 获取的时候会被拦截
// {count: 1} "count" Proxy {count: 1}
// 设置时被拦截
// {count: 1} "count" 2 Proxy {count: 1}
let porxy1 = new Proxy({},{
get: function(target,propKey) {
if(propKey === 'time') {
return 99
}
return 100
}
})
console.log(porxy1.age) // 100
console.log(porxy1.time) // 99
// hander没有设置任何拦截,等于直接通向原对象,没有任何拦截效果,访问proxy就等同于访问target
let target = {}
let hander = {}
let proxy2 = new Proxy(target,hander)
proxy2.name = 'xiao'
console.log(proxy2.name) // xiao
// proxy对象是obj对象的原型,obj对象本身并没有time属性,
// 所以根据原型链,会在proxy对象上读取该属性,导致被拦截
let proxy3 = new Proxy({},{
get: function(target,propKey) {
return 419
}
})
let obj1 = Object.create(proxy3)
console.log(obj1.name) // 419
Object.defineProperty(obj, prop, descriptor)
// 显式
Object.defineProperty(obj, "key", {
enumerable: false,
configurable: false,
writable: false,
value: "static"
})
// configurable 当且仅当该属性的 configurable 键值为 true 时,
//该属性的描述符才能够被改变,同时该属性也能从对应的对象上被删除。 默认为 false。
// enumerable 当且仅当该属性的 enumerable 键值为 true 时,
// 该属性才会出现在对象的枚举属性中。 默认为 false。
// value该属性对应的值。可以是任何有效的 JavaScript 值(数值,对象,函数等)。
// 默认为 undefined。
//writable 当且仅当该属性的 writable 键值为 true 时,属性的值,
// 也就是上面的 value,才能被赋值运算符 (en-US)改变。 默认为 false。
//get 属性的 getter 函数,如果没有 getter,则为 undefined。
//当访问该属性时,会调用此函数。执行时不传入任何参数,但是会传入 this 对象(由于继承关系,
// 这里的this并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值。 默认为 undefined。
//set 属性的 setter 函数,如果没有 setter,则为 undefined。
// 当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),
// 会传入赋值时的 this 对象。 默认为 undefined。
var o = {}; // 创建一个新对象
var bValue = 38;
Object.defineProperty(o, "b", {
// 使用了方法名称缩写(ES2015 特性)
// 下面两个缩写等价于:
// get : function() { return bValue; },
// set : function(newValue) { bValue = newValue; },
get() { return bValue; },
set(newValue) { bValue = newValue; },
enumerable : true,
configurable : true
});
Object.defineProperty() 就上面那几把梭,看看proxy,好几把梭,换换换
var handler = {
get: function(target, name) {
if (name === 'prototype') {
return Object.prototype;
}
return 'Hello, ' + name;
},
apply: function(target, thisBinding, args) {
return args[0];
},
construct: function(target, args) {
return {value: args[1]};
}
};
var fproxy = new Proxy(function(x, y) {
return x + y;
}, handler);
fproxy(1, 2) // 1
new fproxy(1, 2) // {value: 2}
fproxy.prototype === Object.prototype // true
fproxy.foo === "Hello, foo" // true
对于可以设置、但没有设置拦截的操作,则直接落在目标对象上,按照原先的方式产生结果。
下面是 Proxy 支持的拦截操作一览,一共 13 种。