JavaScript中的Proxy

发表于2020-06-12

更新于2023-02-13

分类于编程

总字数1.7K

阅读时长 ≈6 分钟

前言 🔗

这个和之前的Reflect有一定的关系，也是Vue3实现的一个很重要的API，学学学。

Proxy 🔗

顾名思义，就是一个代理对象，通过一组配置函数来拦截操作从而使得以源对象得以被扩展。

Proxy是一个构造函数

由两个参数

obj 需要代理的对象
handler 一组由特定的处理函数组成的对象，如果没有指定，则会使用源对象的默认行为。

javascript

var o = {};

var proxy = new Proxy(o, {});

在Reflect上的方法，Proxy都可以拦截，具体包括

getPrototypeOf
setPrototypeOf
isExtensible
preventExtensible
getOwnPropertyDescriptor
defineProperty
has
get
set
deleteProperty
ownKeys
apply
construct

getPrototypeOf() 🔗

读取代理对象的原型时，这个方法就会调用

有一个参数

obj 源对象

该函数必须返回一个对象或者null

javascript

var o = {};

var prototype = {
  name: "prototype",
};

var proxy = new Proxy(o, {
  getPrototypeOf(target) {
    return prototype;
  },
});

console.log(Reflect.getPrototypeOf(proxy) === prototype); // 打印true

可以触发该函数的操作包括

Object.getPrototypeOf
Reflect.getPrototypeOf
__proto__
Object.prototype.isPrototypeOf
instanceof

javascript

var proxy = new Proxy(
  {},
  {
    getPrototypeOf(target) {
      console.log("调用了");
      return Reflect.getPrototypeOf(target);
    },
  },
);

// 打印了5次"调用了"
Object.getPrototypeOf(proxy);
Reflect.getPrototypeOf(proxy);
proxy.__proto__;
Object.prototype.isPrototypeOf(proxy);
proxy instanceof Object;

setPrototypeOf() 🔗

设置代理对象的原型时，这个方法就会调用。

有两个参数

obj 源对象
prototype 将设置的原型对象

该函数在设置prototype成功返回true，失败返回false

javascript

var proxy = new Proxy(
  {},
  {
    setPrototypeOf(obj, prototype) {
      console.log("设置了prototype");
      return Reflect.setPrototypeOf(obj, prototype);
    },
  },
);

Reflect.setPrototypeOf(proxy, {});

可以触发该函数的操作包括

Reflect.setProtytpeOf
Object.setPrototypeOf

isExtensible() 🔗

查询代理对象是否可以扩展时，这个方法就会调用。

有一个参数

obj 源对象

返回值必须为一个boolean值或者可以转为Boolean的值。

javascript

var proxy = new Proxy(
  {},
  {
    isExtensible(obj) {
      console.log("查询了是否能够扩展");
      return Reflect.isExtensible(obj);
    },
  },
);

Reflect.isExtensible(proxy);

可以触发该函数的操作包括

Reflect.isExtensible
Object.isExtensible

preventExtensions() 🔗

禁止代理对象扩展时，这个方法就会调用。

有一个参数

obj 源对象

返回值必须为一个boolean值或者可以转为boolean的值。

javascript

var proxy = new Proxy(
  {},
  {
    preventExtensions(obj) {
      console.log("禁止了扩展");
      return Reflect.preventExtensions(obj);
    },
  },
);

Reflect.preventExtensions(proxy);

可以触发该函数的操作包括

Reflect.preventExtensions
Object.preventExtensions

getOwnPropertyDescriptor() 🔗

获取对象属性的属性描述符时，这个方法会调用。

有两个参数

obj 源对象
propertyKey 需要获取属性描述符的属性名

返回值必须为一个对象或者undefined

javascript

var proxy = new Proxy(
  {
    name: "lwf",
  },
  {
    getOwnPropertyDescriptor(obj, propertyKey) {
      console.log("获取了属性描述符");
      return Reflect.getOwnPropertyDescriptor(obj, propertyKey);
    },
  },
);

Reflect.getOwnPropertyDescriptor(proxy, "name"); // 打印

可以触发该函数的操作包括

Reflect.getOwnPropertyDescriptor
Object.getOwnPropertyDescriptor

defineProperty() 🔗

在定义代理对象的属性时，这个方法会调用。

有三个参数

obj 源对象
propertyKey 将设置的属性名
descriptor 将设置属性的属性描述符

返回值必须为一个boolean值或者可以转为boolean的值。

javascript

var proxy = new Proxy(
  {},
  {
    defineProperty(obj, propertyKey, descriptor) {
      console.log("设置了对象的属性");
      return Reflect.defineProperty(obj, propertyKey, descriptor);
    },
  },
);

Reflect.defineProperty(proxy, "name", {
  value: "lwf",
}); // 打印

console.log(proxy.name);

可以触发该函数的操作包括

Reflect.defineProperty
Object.defineProperty
proxyObj.propertyKey = value

has() 🔗

在检查属性是否存在对象中时，这个方法会调用。

有两个参数

obj 源对象
propertyKey 需要检查的属性名

返回值必须为一个boolean值或者可以转为boolean的值。

javascript

var proxy = new Proxy(
  {},
  {
    has(obj, propertyKey) {
      console.log("检查了属性是否存在");
      return propertyKey in obj;
    },
  },
);

"name" in proxy; // 打印

可以触发该函数的操作包括

propertyKey in proxy
propertyKey in Object.create(proxy)
Reflect.has
with操作

get() 🔗

在读取代理对象属性时，这个方法会调用。

有三个参数

obj 源对象
propertyKey 要获取的属性名
context 要绑定到getter的上下文，默认为调用对象本身。

返回值可以为任何值。

javascript

var proxy = new Proxy(
  {},
  {
    get(obj, propertyKey, context) {
      console.log("获取了属性值");
      return Reflect.get(obj, propertyKey, context);
    },
  },
);

proxy.name; // 打印

可以触发该函数的操作包括

proxy[propertyKey]或者proxy.propertyKey
Object.create(proxy)[propertyKey]或者Object.create(proxy).propertyKey
Reflect.get

set() 🔗

在设置代理对象属性值时，这个方法会调用。

有四个参数

obj 源对象
propertyKey 设置的属性名
value 设置的属性值
context 要绑定到setter的上下文，默认为调用对象本身。

TIPS: 对于get和set，其中context参数的传入通常是proxy对象本身，但是对于处于原型链上的proxy，传入的就不是proxy对象了，而是触发操作的那个对象，比如，obj.propertykey = value，obj不是代理对象，但是obj的原型链上存在代理对象proxy，那传入context参数的就是obj而不是proxy了。而对于通过Reflect.set操作触发，context参数就跟set函数指定的一样了。

返回值必须为一个boolean值或者可以转为boolean的值。

javascript

var proxy = new Proxy(
  {},
  {
    set(obj, propertyKey, value, context) {
      console.log("调用了设置值");
      return Reflect.set(obj, propertyKey, value, context);
    },
  },
);

proxy.name = "lwf"; // 打印

可以触发该函数的操作包括

proxy[propertyKey] = value或者proxy.propertyKey = value
Object.create(proxy)[propertyKey] = value或者Object.create(proxy).propertyKey = value
Reflect.set

deteleProperty() 🔗

在删除对象的属性时，这个方法会调用

有两个参数

obj 源对象
propertyKey 将删除的属性名

返回值必须为一个boolean值或者可以转为boolean的值。

javascript

var proxy = new Proxy(
  {},
  {
    deleteProperty(obj, propertyKey) {
      console.log("删除了属性");
      return Reflect.deleteProperty(obj, propertyKey);
    },
  },
);

delete proxy.name; // 打印

可以触发该函数的操作包括

delete proxy[propertyKey]或者delete proxy.propertyKey
Reflect.deleteProperty

ownKeys() 🔗

获取代理对象属性名组成的数组时，这个方法会调用

有一个参数

obj 源对象

返回值必须为一个可枚举的对象。

javascript

var proxy = new Proxy(
  {},
  {
    ownKeys(obj) {
      console.log("获取了属性名组成的数组");
      return Reflect.ownKeys(obj);
    },
  },
);

Reflect.ownKeys(proxy); // 打印

可以触发该函数的操作包括

Object.getOwnPropertyNames
Object.getOwnPropertySymbols
Reflect.ownKeys
Object.keys

apply() 🔗

在对代理对象进行函数调用时，这个方法会调用

有一个参数

fn 源函数
context 执行函数的上下文
args 参数的数组

返回值可以为任意值。

javascript

function fn(msg) {
  console.log(msg);
}

var proxy = new Proxy(fn, {
  apply(fn, context, args) {
    console.log("执行了函数");
    return fn.apply(context, args);
  },
});

proxy("hello world"); // 打印

可以触发该函数的操作包括

proxy(arg1,arg2,...,argN)
Function.prototype.apply或者Function.prototype.call
Reflect.apply

construct() 🔗

以代理对象为构造器或者原型上存在代理对象的构造器生成对象时，这个方法会调用

有三个参数

obj 源对象（可以被new）
args 参数数组
newTarget 被调用的构造函数

返回值必须为一个对象

javascript

function fn(name) {
  this.name = name;
}

var proxy = new Proxy(fn, {
  construct(obj, args, newTarget) {
    console.log("构造了新对象");
    return Reflect.construct(obj, args);
  },
});

var p = new proxy("lwf"); // 打印

console.log(p.name); // 打印 "lwf"

可以触发该函数的操作包括

new proxy(arg1,arg2,...,argN)
Reflect.construct

后记 🔗

~~学完感觉我能看懂vue3源码了~~。

JavaScript

JavaScript中的Tasks, microtasks, queues and schedules（译）JavaScript中的Reflect

支持 Markdown 语法

哦呐该，如果没有评论的话，瓦达西...