JavaScript权威指南-第6版 4.11 赋值表达式 提到了连等赋值的情况,但是解释的不够详细,所以在此总结下;

首先看书上最重要的一句话:

这句话总结下就是:

A = B ; // 整个表达式返回 B

但是完整意义上是这样的:

  1. 计算表达式A,得到一个引用refA

  2. 计算表达式B,得到一个值valueB

  3. valueB赋给refA指向的名称绑定;

  4. 返回valueB

第二句:

这句话总结下就是:

A1 = A2 = A3 = A4  // 等价于A1 = (A2 = (A3 = A4))

又因为前面所说,赋值表达式的值就是右操作数的值,所以

(A3 = A4) // 返回 A4
A1 = (A2 = (A3 = A4))
//等价于
//先 从左至右 计算好 A1,A2,A3 的引用,然后
A3 = A4
A2 = A4
A1 = A4

所以,汇总下:

A1 = A2 = A3 = A4

实际上就等价于:

//先 从左至右 计算好 A1,A2,A3 的引用,然后
A1 = A4;
A2 = A4;
A3 = A4;

好了,前面的看懂了,就来到这道神题,javascript 连等赋值问题

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

我第一次答的时候也错了,后来理理逻辑才对,下面分析分析,不过分析之前建议大家先看这篇:js 操作对象的引用和操作实际对象的区分

言归正传,上面的代码其实等价于下面这样:

var a = { n: 1 };
var b = a;
//先 从左至右 计算好 a,a.x 的引用,然后
a = { n: 2 };
a.x = { n: 2 };
console.log(a.x); // --> undefined
console.log(b.x); // --> {n:2}

关键是这段代码:

a.x = { n: 2 };

这段代码其实跟 a 并没有什么关系,因为 在为对象添加属性时,操作的是实际的对象。

所以,它仅仅是把对象 { n: 1 } 变成了 { n: 1, x: { n: 2 } },你可能疑问,在这个赋值前,a 的对象不就已经是 { n: 2 }了么?

不不不!看红色字体!!!

var a = { n: 1 };
var b = a;

//a.x = a = { n: 2 }; 先 从左至右 计算好 a,a.x 的引用,然后

a = { n: 2 };
a.x = { n: 2 }; //此时的 a 在赋值前就已经计算好引用了,实际上引用的是 { n:1 } 这个对象
console.log(a.x); // --> undefined
console.log(b.x); // --> {n:2}

这样也反过来证明了前面赋值表达式 A=B 的逻辑;

add another demo

var total=0
async function add(num){
// await only delay the assignment operation
// that's how js works in assignment
total=(console.log('executed sync',total)||total)+await (console.log('await execute after expression before')||num)
console.log('res')
}
add(1)
add(2)
Promise.resolve().then(()=>{
console.log(total)
})

参考资料:

JavaScript权威指南-第6版-中

由ES规范学JavaScript(二):深入理解“连等赋值”问题

javascript 连等赋值问题

js 连等赋值 分析的更多相关文章

  1. JS连等赋值的坑

    cnblogs标题: JS连等赋值的坑 关于JS连等赋值有个经典的笔试题: var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x); ...

  2. C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断

    C#保留2位小数几种场景总结   场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...

  3. (网页)Angular.js 中 copy 赋值与 = 赋值 区别

    转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...

  4. Flash和js交互的效率分析

    Flash和js交互的效率分析   AS代码: var time:int = getTimer(); for (var i:int = 0; i < 50000; i++) { External ...

  5. fastclick.js源码解读分析

    阅读优秀的js插件和库源码,可以加深我们对web开发的理解和提高js能力,本人能力有限,只能粗略读懂一些小型插件,这里带来对fastclick源码的解读,望各位大神不吝指教~! fastclick诞生 ...

  6. js对象等号赋值的bug

    var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x); console.log(b.x); 有道题是这样的,觉得很奇葩,分析一下 ...

  7. js连等赋值

    引用:http://www.iteye.com/topic/785445 https://segmentfault.com/q/1010000002637728 这是一个问题 var a = {n:1 ...

  8. AS3和js相互通信要点分析

    目标:在html页面里可以使用事件来影响到swf文件的内容,swf文件也可以影响html里js代码的内容 一.新建flash文件,用Flash CC试用版新建一个TextArea.fla的源文件,不添 ...

  9. Js的引用赋值与传值赋值

    要说js的赋值方式时首先要说明js的数值类型:基本类型和引用类型. 1.基本类型 基本的数据类型有:undefined,boolean,number,string,null. 基本类型存放在栈区,访问 ...

随机推荐

  1. spine 所有动画的第一帧必须把所有能K的都K上

    spine 所有动画的第一帧必须把所有能K的都K上.否则在快速切换动画时会出问题.

  2. HTML中css和js链接中的版本号

    背景 在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css.js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候, 浏览器 ...

  3. Spring注解-@Configuration注解、@Bean注解以及配置自动扫描、bean作用域

    1.@Configuration标注在类上,相当于把该类作为spring的xml配置文件中的<beans>,作用为:配置spring容器(应用上下文) package com.test.s ...

  4. Eclipse的vim插件viPlugin的安装

    1.viPlugin是什么?   viPlugin是一个eclipse 针对vi的插件,使用此插件可以让你在使用eclipse进行编码时使用几乎所有vi命令,可以极大的提高开发编码效率. 2.viPl ...

  5. 【转】shell pipe与输入输出重定向的区别

    http://www.cnblogs.com/chengmo/archive/2010/10/21/1856577.html

  6. LinQ的简单使用

    1.LinQ to Sql类(NET Language Integrated Query (LINQ) ) LINQ定义了大约40个查询操作符,如select.from.in.where以及order ...

  7. Hive入门笔记---1.Hive简单介绍

    1. Hive是什么 Hive是基于Hadoop的数据仓库解决方案.由于Hadoop本身在数据存储和计算方面有很好的可扩展性和高容错性,因此使用Hive构建的数据仓库也秉承了这些特性.这是来自官方的解 ...

  8. js去掉双引号

    替换: d = d.replace("\"","").replace("\"",""); 全部替换: ...

  9. telnet 登陆的方法

    第一种方式:通过inetd启动telnetd服务 必须这样设置busybox配置    Networking Utilities --->        去掉 [ ]   Support sta ...

  10. Java Spring Boot: Unable to determine jdbc url from datasource

    如果你和我一样从github或码云上下载了一个几年前别人写的demo代码,想用来做学习用.编译的时候遇到下面这样的错误,然后死命上网查各种方案,百试不灵.试尽了各种方案,就是还连接不上数据库.你可以试 ...