博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
探究JS中的连等赋值问题
阅读量:6302 次
发布时间:2019-06-22

本文共 1081 字,大约阅读时间需要 3 分钟。

一、引子

最近在看别人的博客时无意中看到一个这样的问题

var a = {n: 1};var b = a;a.x = a = {n:2};console.log(a.x);  //undefinedconsole.log(a);  // {n: 2} console.log(b);  // {n: 1, x: {n: 2}}

这是一个典型的连等赋值问题,是不是发现打印的结果跟自己预料的不太一样,就算一样你能具体讲出内部的执行机制吗?

二、直观理解

咋一看这个表达式,我会本能地把它拆解为这样

a={n:2};a.x={n:2};

所以根据这个理解得出的打印结果是

console.log(a.x);  //{n: 2}

显然结果是不对的,那问题出在了哪里呢?要想从原理上解释这个问题,还得首先理解以下几个知识点

三、需要理解的知识点

  • 内存的的运行机制
  • JS引擎的解析过程,从左往右
  • 连等赋值的执行方向,从右往左

放在这个例子中对应的理解就是:

  • a、b这些变量名存储的只是一串指向具体对象的指针,这些指针占用的空间是非常小的,而{n: 1}这些对象才是实实在在存在内存中的值
  • JS引擎在执行到a.x = a = {n:2}这句时,并不是直接的从右往左的执行过程。而是计算机会先从左往右解析各个变量名,转换成变量值(计算机只会记变量值,人的话记变量名)。再从右往左执行赋值。
  • 也就是在这个表达式中第一个a和第二个a指向的都是{n: 1};
    a.x = a = {n:2}
  • 解析完成后,从右往左执行赋值,第二个等号赋值时,a重定向到了{n: 2},第一个等号赋值时,实际上是{n:1}.x={n, 2};
    而这个时候指向{a:1, x:{n:2}}这个值的只有b了
  • 所以a.x的值就变为了undefined,因为a已经重定向赋值为{n:2}了,而b就指向了复合之后的对象

四、理解中的误区及思考

我最开始查了连等赋值的相关文章时,对于以上这些原理的理解是没什么问题的,关键是在理解最后那个赋值过程时,我有过一种理解

a = {n:2};a.x={n:2};// 所以此时a= {n:2, x:{n:2}}

产生这种理解的原因是觉得对a的赋值有个先后顺序,但事实上好像是不存在的。我对上面那种从解析赋值角度去理解的核心就是在连等赋值执行过程中,总共分为两步,一步是变量名解析,一步是赋值,然后根据赋值之后的值去看相应的变量名与变量之间的对应关系。

五、参考文档

转载于:https://www.cnblogs.com/wancheng7/p/8837037.html

你可能感兴趣的文章
ionic/cordova热部署
查看>>
「镁客早报」特斯拉裁员,马斯克解释没有办法;微软推出Azure DevOps赏金计划...
查看>>
Flink入坑指南第五章 - 语法糖 view
查看>>
centos 7.4 使用 pgxc_ctl 安装与使用
查看>>
Redis 单key值过大 优化方式
查看>>
【数据库】表分区
查看>>
nutz-sqltpl 1.3.4.RELEASE 发布,在 Nutz 项目中“解决 Java 拼接 SQL”问题
查看>>
城市 | 800个地铁站数据透析的京沪白领图鉴:隐形土豪、无产中产阶级和猪猪女孩...
查看>>
前端脚本!网站图片素材中文转英文
查看>>
linux的常用易忘命令
查看>>
PHP 分割字符串
查看>>
java 基于QRCode、zxing 的二维码生成与解析
查看>>
关于职业规划的一些思考
查看>>
img垂直水平居中与div
查看>>
Fabrik – 在浏览器中协作构建,可视化,设计神经网络
查看>>
防恶意注册的思考
查看>>
http2-head compression
查看>>
C# 命名空间
查看>>
订餐系统之同步美团商家订单
查看>>
使用ArrayList时设置初始容量的重要性
查看>>