之前在扒源码时经常看到类似的连续赋值操作:

 var a = b = 1; 

在某度搜了众多前辈的博客,总算对这骚操作有点眉目。

Case analysis

首先,javascript中连续赋值最典型案例是:

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

Analysis in short

var a = {n: 1}; //创建对象{n: 1},a指向对象{n: 1}
var b = a; //将 a中的地址传给b,即 b也指向对象{n: 1}
a.x = a = {n: 2};
/*
1)创建对象{n: 1}中的"x"属性
2)将a指向新对象{n: 2}
3) 将对象{n: 1}中的"x"指向新对象{n: 2}
*/
console.log(a.x); //undefined
console.log(b.x); //{n: 2}

如果看懂了,下面可以直接忽略2333

Analysis in long

我归纳了一下,要看懂这个问题要理解三个点:

  • 此处的a,b是引用类型

  • 在javascript中字段访问操作符"."的优先级高于赋值操作符"="

  • 出现多个赋值操作符"="时,运算顺序为从右向左

1. 此处的a,b是引用类型

引用类型是区别于基本类型的。javasript中的基本类型总共有5种,Undefined、Null、String、Number、Boolean。引用类型有Object,Array,Function,,,blabla~,简单说就是除了5种基本类型,可以说其它都为引用类型。

案例中的{n: 1}和{n: 2}都为Object类,即为引用类型。在javascript中当复制保存某个对象时,操作的是对象的引用,但在为对象添加属性时,操作的是实际的对象。即在第一行和第二行命令中a,b其实存储的是对象{n: 1}的引用(地址)。

这有点像C中的指针。如下图,案例第一行命令可以解析为,在堆(heap)中创建了一个对象{n: 1},另外在栈(stack)中创建了变量a,变量a的值为对象{n: 1}的地址,即图中的h[0]。第二行命令意思是再在栈中创建另一个变量b,变量b的值与变量a的值相等,即为对象{n: 1}的地址。

打个比方,你有一张去餐馆的地图,你把地图复制一份给你的基友,地图是多了一张,但餐馆的实际位置是没有改变的。

2. 运算顺序问题

这一节对应的是第二和第三个点。根据javascript中的运算符优先级 Operator precedence,可知:

  • 在javascript中字段访问操作符"."的优先级高于赋值操作符"="
  • 出现多个赋值操作符"="时,运算顺序为从右向左

因此在运行第三行命令时,分3步执行:

(1)先执行"a.x",此时a储存的仍然是h[0]地址,即指向对象{n: 1}。"a.x"相当于"h[0].x",即在对象{n: 1}中添加了属性"x",变为{n: 1; x: undefined},但是"x"还没赋值;注意,此时对象{n: 1; x: undefined}中的"x"属性是等待赋值的,操作挂起。

(2)再执行"a = {n: 2}",由于{n: 2}是个新对象,则程序在堆中再创建一个对象{n: 2},并且将变量a指向该对象,如图,此时a储存的即为h[1]的地址

(3)最后一步"a.x = a",(1)中被挂起的操作继续执行,对象{n: 1; x: undefined}中的"x"指向对象{n: 2}。运算完成。

3. 结果解释

在运行完上述命令后,变量a指向了新对象{n : 2};变量b 的地址没有发生改变,因而仍指向修改后的对象{n: 1;x: {n : 2}}。

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

理解javascript中的连续赋值的更多相关文章

  1. 理解JavaScript中的原型继承(2)

    两年前在我学习JavaScript的时候我就写过两篇关于原型继承的博客: 理解JavaScript中原型继承 JavaScript中的原型继承 这两篇博客讲的都是原型的使用,其中一篇还有我学习时的错误 ...

  2. 深入理解JavaScript中创建对象模式的演变(原型)

    深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...

  3. 深入理解JavaScript中的属性和特性

    深入理解JavaScript中的属性和特性 JavaScript中属性和特性是完全不同的两个概念,这里我将根据自己所学,来深入理解JavaScript中的属性和特性. 主要内容如下: 理解JavaSc ...

  4. 深入理解javascript中执行环境(作用域)与作用域链

    深入理解javascript中执行环境(作用域)与作用域链 相信很多初学者对与javascript中的执行环境与作用域链不能很好的理解,这里,我会按照自己的理解同大家一起分享. 一般情况下,我们把执行 ...

  5. 【干货理解】理解javascript中实现MVC的原理

    理解javascript中的MVC MVC模式是软件工程中一种软件架构模式,一般把软件模式分为三部分,模型(Model)+视图(View)+控制器(Controller); 模型:模型用于封装与应用程 ...

  6. 理解javascript中的策略模式

    理解javascript中的策略模式 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 使用策略模式的优点如下: 优点:1. 策略模式利用组合,委托等技术和思想,有效 ...

  7. 深入理解javascript中的立即执行函数(function(){…})()

    投稿:junjie 字体:[增加 减小] 类型:转载 时间:2014-06-12 我要评论 这篇文章主要介绍了深入理解javascript中的立即执行函数,立即执行函数也叫立即调用函数,通常它的写法是 ...

  8. 转载 深入理解JavaScript中的this关键字

    转载原地址: http://www.cnblogs.com/rainman/archive/2009/05/03/1448392.html 深入理解JavaScript中的this关键字   1. 一 ...

  9. js架构设计模式——理解javascript中的MVVM开发模式

    理解javascript中的MVVM开发模式 http://blog.csdn.net/slalx/article/details/7856769 MVVM的全称是Model View ViewMod ...

随机推荐

  1. [Qt] 去除窗体右上角的问号

    this->setWindowFlags(windowFlags()&~Qt::WindowContextHelpButtonHint);

  2. 从GC的SuppressFinalize方法带你深刻认识Finalize底层运行机制

    如果你经常看开源项目的源码,你会发现很多Dispose方法中都有这么一句代码: GC.SuppressFinalize(this); ,看过一两次可能无所谓,看多了就来了兴趣,这篇就跟大家聊一聊. 一 ...

  3. SpringBoot应用操作Rabbitmq(fanout广播高级操作)

    一.广播模式fanout.不需要指定路由key. 注:与topic和direct区别是:fanout广播模式会两个队列同时发送相同的消息,并非由交换器转发到某一个队列 二.实战(广播模式) 1.引入m ...

  4. 汇编 之 win10 下安装dosbox 和 MASM

    所需工具链接: 链接:https://pan.baidu.com/s/1nenMsSdgEkeRKc6wh9DQRA 提取码:1r89 只需要以下两个工具 安装dosbox 和MASM步骤 (1)解压 ...

  5. 天大福利!世界第一科技出版公司 Springer 免费开放 400 多本电子书!

    前几天,世界著名的科技期刊/图书出版公司施普林格(Springer)宣布:免费向公众开放 400 多本正版的电子书!! Springer 即施普林格出版社,于1842 年在德国柏林创立,20 世纪60 ...

  6. mybatis源码学习(四):动态SQL的解析

    之前的一片文章中我们已经了解了MappedStatement中有一个SqlSource字段,而SqlSource又有一个getBoundSql方法来获得BoundSql对象.而BoundSql中的sq ...

  7. 演示:配置日志发送到syslog日志服务器

    演示目标:配置网络环境中的交换机和路由器将日志发送到syslog日志服务器. 演示环境:如下图10.54所示的演示环境. 演示背景:要求部署网络中的syslog服务器,集中的收集交换机S1和路由器R1 ...

  8. spark系列-7、spark调优

    官网说明:http://spark.apache.org/docs/2.1.1/tuning.html#data-serialization 一.JVM调优 1.1.Java虚拟机垃圾回收调优的背景 ...

  9. JWT安全问题

    Json Web Tokens 在线工具网站:https://jwt.io/ python 用到的库 jwt  // pip install pyjwt JWTCrack key   // git c ...

  10. Java模拟UDP通信

    目录 Java基础:模拟UDP通信 1.一次发送,一次接收 1.1.发送方 1.2.接收方 2.多次发送,多次接收 2.1.发送方 2.2.接收方 3.模拟双方通信 3.1.发送方的线程 3.2.接收 ...