Javascript对象及Proxy工作原理详解

 更新时间:2022年08月02日 10:32:25   作者:冒菜师  
这篇文章主要为大家介绍了Javascript对象及Proxy工作原理详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

这一章其实算是javascript的科普文章,其实这本书的读者一般都不会是入门者,因此按道理说应该不需要再科普才对。但是作者依旧安排了这一章,证明就是这一章内容与我们以为的对象不一样。

Javascript中一切皆对象

这一句话大家应该耳熟能详,对于常规的字面量对象,和new出来的对象,大家应该都能分辨

const str = ''
const str2 = new String()
const obj = {}
const obj2 = Object.create()

但是根据ECMA,在javascript中其实分为2种对象:常规对象异质对象。任何不属于常规对象的都叫异质对象。

在javascript的世界中,函数也是一个对象。当我们指向Obj.foo时,其实就会调用对象内部[[Get]]方法去获取这个值,在ECMA中规定了如下内部方法(网图)。所以

所以,普通对象必须具有一组被称为基本内部方法(essential internal methods)的方法所定义的默认行为,也就是上图。如果改变了默认方法,那么就是异质对象。

比如Array,当我们把Array.lenght = 0,它会清空数组。

当我看到这张图就知道了,如何判断一个变量到底是普通对象还是函数呢?答案就是判断它使用了[[Get]]还是[[Call]]

毫无疑问,Proxy是异质对象,它可以直接性改变一些默认方法。当我们在Proxy中没有定义Get拦截器的时候,他会调用对象内部自己的[[Get]]代理透明.

这一段话我反复看了很久,才明白它的意思。其实,proxy并不会直接改变对象内部方法和行为,它是通过指定需要代理的方法,去执行拦截的功能,这也与Proxy的用法符合。

const p = new Proxy(obj,{/*被代理的属性*/})

这时候p是与obj完全不相同的对象,有着不一样的内存地址。这就导致,当我们不能直接在p上去操纵obj,这时候我们就要反射Reflect,反射犹如一面镜子,映照着原始对象的地址,我们去操作原始对象obj,而不是p。

前面2章讲了一些关于ProxyReflect的八股文,下一章就是具体讲解vue3如何使用Proxy了。

以上就是Javascript对象及Proxy工作原理详解的详细内容,更多关于Javascript对象Proxy的资料请关注脚本之家其它相关文章!

相关文章

  • Object.assign触发watch原理示例解析

    Object.assign触发watch原理示例解析

    这篇文章主要为大家介绍了Object.assign触发watch原理示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • vue中的mescroll搜索运用及各种填坑处理

    vue中的mescroll搜索运用及各种填坑处理

    这篇文章主要介绍了vue中的mescroll搜索运用及各种填坑处理,文中通过代码给大家讲解了mescroll vue使用,感兴趣的朋友跟随小编一起看看吧
    2019-10-10
  • 使用Vue实现瀑布流的示例代码

    使用Vue实现瀑布流的示例代码

    这篇文章主要为大家详细介绍了如何使用Vue实现瀑布流,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • vue3中安装使用vue-i18n实时切换语言且不用刷新

    vue3中安装使用vue-i18n实时切换语言且不用刷新

    这篇文章主要介绍了vue3中安装使用vue-i18n实时切换语言不用刷新问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • vue-cli3.0如何修改端口号

    vue-cli3.0如何修改端口号

    这篇文章主要介绍了vue-cli3.0如何修改端口号,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 基于vue3和element plus实现甘特图

    基于vue3和element plus实现甘特图

    甘特图是一种重要的项目管理工具,它可以通过图形化的方式展示项目的进度和时间表,甘特图通常由一个横轴和一个纵轴组成,甘特图对于项目管理非常重要,所以本文给大家介绍了如何基于vue3和element plus实现甘特图,需要的朋友可以参考下
    2024-06-06
  • Vue中加载天地图的离线地图基本步骤

    Vue中加载天地图的离线地图基本步骤

    这篇文章主要给大家介绍了关于Vue中加载天地图的离线地图的基本步骤,Vue天地图离线地图是指基于Vue框架开发的应用程序,使用天地图离线地图服务提供商提供的地图数据,可以在没有网络的情况下使用地图功能,需要的朋友可以参考下
    2023-10-10
  • vue3.0和vue2.0的区别详细讲解

    vue3.0和vue2.0的区别详细讲解

    vue经历从2.0到3.0更新之后,简⽽⾔之就是变得更轻更快,使⽤起来更加⽅便,下面这篇文章主要给大家介绍了关于vue3.0和vue2.0区别的相关资料,需要的朋友可以参考下
    2023-10-10
  • Vue使用Echarts实现立体柱状图

    Vue使用Echarts实现立体柱状图

    这篇文章主要为大家详细介绍了Vue使用Echarts实现立体柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vue实现检测敏感词过滤组件的多种思路

    vue实现检测敏感词过滤组件的多种思路

    这篇文章主要介绍了vue编写检测敏感词汇组件的多种思路,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04

最新评论