本文主要是介绍前端 JS 经典：Proxy 和 DefineProperty，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
前言：vue2 响应式原理 Object.defineProperty，vue3 响应式原理 Proxy 代理。本文主要讲这两个 api 的本质区别。
1. Proxy
Proxy 能够拦截和重新定义对象的基本操作，那什么叫对象的基本操作呢，对象内部运行的方法就是对象的基本操作。对象的内部操作有 11 种：[[GetPrototypeOf]]、[[SetPrototypeOf]]、[[IsExtensible]]、[[PreventExtensions]]、[[GetOwnProperty]]、[[DefineOwnProperty]]、[[HasProperty]]、[[GET]]、[[SET]]、[[DELETE]]、[[OwnPropertyKeys]]。如果是函数对象的话，会多两个基本操作：[[Construct]]、[[Call]]
如下对象操作实际上就是内部运行函数：
let obj = { name: "yqcoder" };Object.defineProperty(); // 实际上就是运行内部函数 [[DefineOwnProperty]]
obj.name; // 实际上就是运行内部函数 [[GET]]
obj.name = "YQcoder"; // 实际上就是运行内部函数 [[SET]]
delete obj.name; // 实际上就是运行内部函数 [[DELETE]]
// 实际上就是运行内部函数 [[OwnPropertyKeys]]
for (let key in obj) {
}基本操作对应 property 的陷阱函数，什么叫陷阱函数，就是通过代理去读属性的时候，他本来应该是运行内部的[[GET]]基本操作的，但是最后走到了通过 Proxy 重新定义的 get() 函数了，没有运行内部的 [[GET]] 基本操作， 这就叫陷阱函数。
如下内部操作函数对应的陷阱函数：
[[GetOwnProperty]] => getPrototypeOf();
[[SetPrototypeOf]] => setPrototypeOf();
[[IsExtensible]] => isExtensible();
[[PreventExtensions]] => preventExtensions();
[[GetOwnProperty]] => getOwnPropertyDescriptor();
[[DefineOwnProperty]] => defineProperty();
[[HasProperty]] => has();
[[GET]] => get();
[[SET]] => set();
[[DELETE]] => deleteProperty();
[[OwnPropertyKeys]] => ownKeys()2. DefineProperty
DefineProperty 本身就是个基本操作，他并不拦截基本操作，只是调用基本操作。所以在 vue2 中怎么处理数组的，因为拦截不到数组的 push、splice 等，直接重写了这些方法，改了原型，当这些数组去调方法的时候，实际是调用 vue2 重写的方法。
// vue2
Object.defineProperty(arr, "length", {set(value) {},get() {},
});// vue3
const p = new Proxy(arr, {get(target, prop) {},set(target, prop, value) {},
});这篇关于前端 JS 经典：Proxy 和 DefineProperty的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
