Skip to content

Latest commit

 

History

History
executable file
·
191 lines (122 loc) · 6.74 KB

JS中的proxy和defineProperty.md

File metadata and controls

executable file
·
191 lines (122 loc) · 6.74 KB
Raw

前言

目前开发 Web 应用的主流框架是 React 和 Vue，这两个框架都能通过一定手段实现响应式编程，比如 Vue 本身就实现了双向绑定以及 React + Mobx 实现类似于 Vue 的操作，这个时候就是 Object.defineProperty 登场的时候。

但是随着 Vue3.0 以及 Mobx5 的推出，Proxy 取代了 Object.defineProperty 成为双向绑定的底层原理。

我们先以 Object.defineProperty 作为引入，之后讲解 Proxy，最后比较二者之间的优劣。

Object.defineProperty 数据劫持

Object.defineProperty 方法会直接在对象上定义一个新的属性，或者修改一个对象的现有属性，并返回次对象。

该方法接受三个参数，第一个是要定义属性的对象，第二个是要定义或修改属性的名称，第三个参数是要定义或修改的属性描述符。

const obj = {};
Object.defineProperty(obj, "prop", {
  value: 18,
});
console.log(obj.prop); // 18

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

数据描述符是一个具有值的属性，该值可以是可写的，也可以是不可写的。存取描述符是由 getter 和 setter 所描述的属性。这两种描述符是互斥的。

这两种同时拥有下列两种键值：

  • configurable：当且仅当该属性为 true 时，该属性的描述符才能被改变，同时该属性也能从对应的对象上被删除，默认为 false；
  • enumerable：当且仅当该属性为 true 时，该属性才会出现在对象的枚举属性中，默认为 false。

数据描述符还具有以下的可选键值：

  • value：该属性对应的值，可以是任意有效的 JS 值，默认为 undefined；
  • writable：当且仅当该属性为 true 时，当前属性对应的值（也就是上面的 value）才能被赋值运算符改变，默认为 false。

存取描述符还具有以下的可选键值：

  • get：属性的 getter 函数，当访问该属性时，会调用此函数。执行时不传入任何参数，但是会传入 this 对象（由于继承关系，这里的 this 并不一定是定义该属性的对象）。该函数的返回值被用作属性的值；
  • set：属性的 setter 函数，当属性值被修改时会调用此函数。该方法会接收一个参数（被赋予的新值），会传入赋值时的 this 对象。

Proxy 数据拦截

Object.defineProperty 只能对对象中现有的键进行拦截，对于动态新增的键是无能为力的。同时 Object.defineProperty 只能重定义获取和设置行为。

而 Proxy 相当于一个升级，它可以进行更多的重定义。

概念

首先 Proxy 是一个构造函数，可以通过 new 来创建它的实例。它接受两个参数，第一个是被拦截的目标对象，第二个是 handler：一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理实例的行为。

const p = new Proxy(target, handler);

handler 对象的属性

handler 中的所有属性都是可选的，如果没有定义，那就会保留原对象的默认行为。

get

对象的 getter 函数，用于拦截对象的读取操作。

set

对象的 setter 函数，用于拦截设置属性值的操作行为。

apply

用于拦截函数的调用。当需要被代理拦截的对象是一个函数的时候，可以通过设置 apply 来进行拦截。

has

用于拦截 in 操作符的代理。当对目标对象使用 in 操作符时，会触发这个函数的执行。

construct

用于拦截 new 操作符。为了使 new 操作符在生成的 Proxy 对象上生效，用于初始化代理的目标对象本身必须具有 [[Construct]] 内部方法（即 new Target 必须是有效的）。

delete

用于拦截 delete 操作符。用于拦截对对象属性进行 delete 操作。

defineProperty

用于拦截对象属性上的 Object.defineProperty 。当对对象进行键代理时，会触发这个方法。

getOwnPropertyDescriptor

用于拦截 Object.getOwnPropertyDescriptor 。

getPrototypeOf

当访问对象的原型时，会触发这个方法。

触发这个方法的条件有五个：

  • Object.getPrototypeOf()
  • Reflect.getPrototypeOf()
  • __proto__
  • Object.prototype.isPrototypeOf()
  • instanceof

isExtensible

用于拦截对象的 Object.isExtensible()

ownKeys

用于拦截对象自身属性的读取操作。

具体拦截如下：

  • Object.getOwnPropertyNames()
  • Object.getOwnPropertySymbols()
  • Object.keys()
  • for...in 循环

该方法有几个约束条件：

  • ownKeys 结果必须是一个数组
  • 数组的元素类型要么是字符串要么是 Symbol
  • 结果列表必须包含目标对象的所有不可配置（non-configurable）、自由属性的 key
  • 如果目标对象不可扩展，那么结果列表必须包含目标对象的所有自由属性的 key，不能有其他值

preventExtensions

用于设置对 Object.perventExtensions 的拦截。

setPrototypeOf

用来拦截 Object.setPrototypeOf 。

Proxy 和 Object.defineProperty 的区别

这两个属性本身就不是在同一个领域工作的，我们通常说的区别，也仅仅是针对使用了这两个 API 的 Vue 的双向绑定机制的实现。

因此，在回答的时候，通常可以直接说出 Vue 来使用这两种机制来实现双向绑定的优劣势。

Object.defineProperty 版本

const obj = {};
Object.defineProperty(obj, "prop", {
  get() {
    console.log("get val");
  },
  set(newVal) {
    console.log(newVal);
    document.getElementById("input").value = newVal;
  },
});

const input = document.getElementById(input);
input.addEventListener("keyup", function (e) {
  obj.text = e.target.value;
});

可以看出这个简单版本透露出来一个很明显的缺点，那就是只能对对象的属性进行监听，如果需要监听多个属性，则需要进行遍历。同时，这个 API 无法监听数组。

当然他的优点就是兼容性好。

Proxy 版

const input = document.getElementById(input);
const obj = {};

const newobj = new Proxy(obj, {
  get(target, key, receiver) {
    console.log(`getting ${key}`);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log(target, key, value, receiver);
    if (key === "text") {
      input.value = value;
    }
    return Reflect.set(target, key, value, receiver);
  },
});

input.addEventListener("keyup", function (e) {
  obj.text = e.target.value;
});

从上述可以看到，Proxy 可以对整个对象进行代理拦截，并且返回一个新的对象。除此之外还可以对数组进行拦截。

Proxy 最大的问题便是兼容性不好，并且无法通过 polyfill 磨平。