前端 JS 经典:Proxy 和 DefineProperty

简介: 前端 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) {},
});


目录
相关文章
|
6天前
|
前端开发 JavaScript 数据处理
前端新手指南:如何解决JavaScript导出CSV文件不完整的问题
【6月更文挑战第4天】在JavaScript中处理CSV文件时,需要特别注意一些特殊字符,例如逗号、双引号、换行符等。这些字符可能会影响CSV文件的解析,导致数据错乱。
23 0
|
3天前
|
前端开发 JavaScript 安全
高级前端开发需要知道的 25 个 JavaScript 单行代码
1. 不使用临时变量来交换变量的值 2. 对象解构,让数据访问更便捷 3. 浅克隆对象 4. 合并对象 5. 清理数组 6. 将 NodeList 转换为数组 7. 检查数组是否满足指定条件 8. 将文本复制到剪贴板 9. 删除数组重复项 10. 取两个数组的交集 11. 求数组元素的总和 12. 根据指定条件判断,是否给对象的属性赋值 13. 使用变量作为对象的键 14. 离线状态检查器 15. 离开页面弹出确认对话框 16. 对象数组,根据对象的某个key求对应值的总和 17. 将 url 问号后面的查询字符串转为对象 18. 将秒数转换为时间格式的字符串 19.
13 3
高级前端开发需要知道的 25 个 JavaScript 单行代码
|
6天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
6天前
|
JavaScript 前端开发 网络协议
前端JS发起的请求能暂停吗?
在讨论前端JS发起的请求是否能暂停时,需要明确两个概念:什么状态可以被认为是“暂停”?以及什么是JS发起的请求?
61 1
前端JS发起的请求能暂停吗?
|
9天前
|
前端开发 JavaScript 安全
TypeScript作为一种静态类型的JavaScript超集,其强大的类型系统和面向对象编程特性为微前端架构的实现提供了有力的支持
【6月更文挑战第11天】微前端架构借助TypeScript提升开发效率和代码可靠性。 TypeScript提供类型安全,防止微前端间通信出错;智能提示和自动补全加速跨代码库开发;重构支持简化代码更新。通过定义公共接口确保一致性,用TypeScript编写微前端以保证质量。集成到构建流程确保顺利构建打包。在微前端场景中,TypeScript是强有力的语言选择。
25 2
|
14天前
|
Web App开发 资源调度 JavaScript
【保姆级】前端使用node.js基础教程
【6月更文挑战第3天】Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,用于服务器端编程。常用命令包括:安装 Node.js,通过 `node -v` 查看版本;使用 npm(Node 包管理器)进行初始化、安装/卸载包、查看版本和更新;运行 `.js` 脚本;使用 `node inspect` 调试;借助 nodemon 实现自动重启;通过 `npm list` 管理包;
5 0
|
17天前
|
前端开发 JavaScript API
Vue.js:渐进式JavaScript框架-前端开发
Vue.js:渐进式JavaScript框架-前端开发
21 3
|
23天前
|
缓存 前端开发 JavaScript
基于JavaScript的前端性能优化技术探讨
基于JavaScript的前端性能优化技术探讨
30 1
|
26天前
|
JavaScript 前端开发 Java
前端知识点03(JS)
前端知识点概览:了解JS中的this指向,包括全局、函数、new、apply/call/bind及箭头函数的规则。理解script的async和defer属性对脚本加载和执行的影响。探讨setTimeout和setInterval的用法及其在性能上的考量。ES6与ES5的区别在于新语法特性,如let/const、箭头函数、模板字符串、模块化、类和继承等。此外,ES6还引入了Symbol、解构赋值、默认参数、Map/Set和Generator等功能。别忘了点赞和支持作者哦!
24 1
|
26天前
|
JavaScript 前端开发
前端面试02(JS)
本文是前端面试系列的第二篇,主要涵盖了JavaScript的基础知识,包括JS的组成(ECMAScript、DOM、BOM)、内置对象(如String、Array、Math、Date等)、数组操作方法、数据类型检测方法(typeof、instanceof、constructor、Object.prototype.toString.call)、闭包的概念及其特点、前端内存泄漏的原因和类型、事件委托的优势、基本数据类型与引用数据类型的差异、原型链的工作原理以及JS实现继承的多种方式(原型链、构造函数、组合继承等)。文章结尾鼓励读者点赞和支持作者。
13 1