Bootstrap

ES6新特性之Proxy(有助于理解Vue3的响应式原理)

简介

  Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以属于一种“元编程”(meta programming),即对编程语言进行编程。Proxy可以理解成:在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理,用在这里表示由它来“代理”某些操作,可以译为“代理器”。

let proxy = new Proxy(target, handler);

  ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。其中,new Proxy() 表示生成一个Proxy实例target 参数表示所要代理(拦截)的目标对象,即如果没有Proxy的介入,操作原来要访问的就是这个对象;handler 参数是一个配置对象,对于每一个被代理的操作,需要提供一个对应的处理函数,该函数将拦截(代理)对应的操作;如果handler没有设置任何拦截,那就等同于直接操作原对象,且一个拦截器函数中可以设置拦截多个操作。注意:要使得Proxy起作用,必须针对Proxy实例进行操作,而不是针对目标对象进行操作。

let person = {
    name: '柳小姐', age: 18 };
let p = new Proxy(person, {
   
	get(target,propName) {
   
		console.log(`读取了p身上的${
     propName}属性`);
		return target[propName];
	}
	set(target,propName,value) {
   
		console.log(`修改了p身上的${
     propName}属性`);
		target[propName] = value;
	}
});

另外,Proxy实例也可以作为其他对象的原型对象。

let proxy = new Proxy({
   }, {
   
  get(target,propName) {
   
    return 35;
  }
});
let obj = Object.create(proxy);
//proxy对象是obj对象的原型,obj对象本身并没有time属性,所以根据原型链,会在proxy对象上读取该属性,导致被拦截,由于拦截函数总是返回35,所以访问任何属性都得到35
console.log(obj.time);  //35

注意:如果一个属性不可配置(configurable)不可写(writable),则 Proxy不能修改该属性,否则通过 Proxy 对象访问该属性会报错。

Proxy实例的方法

1、get(target, propKey, receiver)::get方法用于拦截对象属性的读取操作,如 proxy.foo 和 proxy[‘foo’]。可以接受三个参数:依次为目标对象、属性名和 proxy 实例本身(严格地说,是操作行为所针对的对象),其中最后一个参数可选。另外,get 方法可以继承。

let p = new Proxy({
   }, {
   
  get(target, propertyKey) {
   
    console.log('GET ' + propertyKey);
    return target[propertyKey]; 
  }
});
let obj = Object.create(p);
//拦截操作定义在p对象上面,所以如果读取obj对象继承的属性时,拦截会生效
console.log(obj
;