首页 > 编程语言 >[Javascript] Proxy vs defineProperty in low level

[Javascript] Proxy vs defineProperty in low level

时间:2024-10-10 15:10:52浏览次数:6  
标签:Javascript obj level Object object prop vs defineProperty const

Proxy

The Proxy object enables you to create a proxy for another object, which can intercept and redefine fundamental operations for that object.

 

So what does it mean for fundamental operations for object?

In javascript, we can do following opeartion against Object

const obj = {}

obj.a
obj.b = 2
Object.setPrototypeOf(obj, { c: 3})
Object.getPrototypeOf(obj)
for (const key in obj) {
}

 

But EMCAScript will transform those human readable code into it's internal function:

const obj = {}

obj.a // [[GET]]
obj.b = 2 // [[SET]]
Object.setPrototypeOf(obj, { c: 3}) // [[SetPrototypeOf]]
Object.getPrototypeOf(obj) // [[GetPrototypeOf]]
for (const key in obj) { // [[OwnPropertyKeys]]
}

 

Source: https://ecma-international.org/publications-and-standards/standards/ecma-262/

 

Difference between Proxy vs defineProperty

After knowning what is the fundamental operations for object, let's what's the difference between proxy and defineProperty.

Notice [[DefineOwnProperty]]in the table.

It's actually the fundamental operations for Object.defineProperty

 

Therefore, Proxycan intercept and redefine fundamental opeartions (which includes [[DefineOwnProperty]])

And Object.definePropertyis just one of the fundamental operation in Javascript, it cannot redefine or intercept anything.

 

Real usecase

In Vue2, it uses a lot Object.definePropertyto achieve object reactivity. But for array operation, Vue2 cannot use defineProperty.

const arr = [1,2,3]

arr.push(1)

 So Vue2 actually create a middle layer of VArray prototype which wraps all the methods push, pop...

And VArray prototype will point to the Javascript Array prototype.

 

In Vue3, due to the power of proxy, which can redefine and intercept any object

const arr = [1,2,3]

const p = new Proxy(arr, {
  get(target, prop) {
    console.log('get', prop)
    return target[prop]
  },
  set(target, prop, value) {
    console.log('set', prop, value)
    target[prop] = value
    return true
  }
})

p.push(1)
/*
get push
get length
set 3 1
set length 4
*/

 

标签:Javascript,obj,level,Object,object,prop,vs,defineProperty,const
From: https://www.cnblogs.com/Answer1215/p/18456423

相关文章

  • Vmware挂载san存储_vSphere 6.x 共享存储LUN丢失分区表修复(精华)
    Vmware挂载san存储_vSphere6.x共享存储LUN丢失分区表修复炎炎夏夜客户机房空调意外故障,前端ESXI物理服务器由于温度过高都自保关机,存储和SAN没有自保关机。上班修复空调后,检查存储,检查SAN无异常。开始开机ESXI主机,开机完后发现存储映射的两个LUN全部消失,重启存储,重启ESXI都无......
  • JavaScript基础
    目录JavaScript基础day2JavaScript简介和体验JavaScript书写位置JavaScript注释和结束符JavaScript输入和输出语句和字面量字面量变量变量的基本使用交换两个变量案例变量的本质和命名规则变量拓展-var和let的区别变量拓展-数组的基本使用常量数据类型数据类型数据类型......
  • [Javascript] The hidden transform in Javascript
    []+[]Answer:""Botharrays([])arefirstconvertedtotheirstringrepresentationsbeforethe+operatorisapplied.InJavaScript,arraysareconvertedtostringsbyconcatenatingtheirelementswithcommasinbetween.Sincethearraysare......
  • 深入探讨JavaScript中的精度问题:原理与解决方案
    深入探讨JavaScript中的精度问题:原理与解决方案在日常的JavaScript开发中,我们经常会遇到一些令人困惑的数值计算问题,特别是涉及到小数点运算时。例如,为什么0.1+0.2的结果不是预期的0.3,而是0.30000000000000004?本文将详细介绍JavaScript中出现精度问题的原因,深入解析十进......
  • JavaScript Number研究03_实例方法_toExponential_toFixed_toPrecision_toString_valu
    JavaScriptNumber研究03:实例方法——toExponential、toFixed、toPrecision、toString、valueOf、toLocaleString在JavaScript中,Number对象不仅包含了许多有用的静态属性,还提供了一系列实例方法,帮助我们在不同场景下处理和转换数值。这些方法包括:toExponential()toFixed()......
  • VScode远程访问虚拟机
    下载vscode插件RemoteDevelopment该插件包括了wsl,remotessh等四个插件,均是用于远程访问虚拟机。 通过ssh访问虚拟机下载后在工具栏索引可以看到如下标识,按顺序点击进入,然后在“3”显示的搜索框通过“sshusername@ipAddr”访问,这是方法一。 方法二,还可以通过选择“2......
  • vscode设置成中文界面
    通过快捷键设置中文打开VSCode:同样,首先确保你已经打开了VSCode软件。打开命令面板:按住键盘上的“Ctrl+Shift+P”组合键,打开命令面板。输入并设置语言:在命令面板中输入“ConfigureDisplayLanguage”。点击“ConfigureDisplayLanguage”选项。在弹出的语言选择列表中,选择“zh-cn......
  • 【JavaScript实用日期星期函数】日期格式化、获取日期是星期几、今后7天的日期、本周
    ......
  • VSCode配置Python(记录)
    python安装官网在线安装或者下载离线包(勾选添加path环境变量)python指定版本运行把对应版本的python.exe复制一下,粘贴改名加个对应版本,因为添加了环境变量的缘故所以可以直接在命令窗中运行运行测试对应项目创建虚拟环境(包管理)tips:当然了,也可以用anaconda管理,但是加载比较......
  • 【VScode+MinGw】安装配置教程
    一、VScode下载安装点击进入VS官方网站下载,如下图所示进不去或速度慢的可以选择镜像网站进行下载VisualStudioCode–VSCODE中国区下载加速–白盒子网(baihezi.com)以官网为例,点击右上角Download,选择对应的版本(本教程基于Windows进行演示)下载完成打开.exe引导安......