var a = {n:1};
var b = a; // 持有a,以回查
a.x = a = {n:2};
alert(a.x);// --> undefined
alert(b.x);// --> {n:2}

对于这段代码,大部分人的理解是这样的:========错误的理解=======

对于 a.x = a = {n:2},大部分人的思路应该是:

  1. 先把 {n:2} 赋值给 a
  2. 然后再创建 a.x,将 {n:2} 再赋值给 a.x

这样似乎确实说不通 a.x 的值是 undefined,因为 a.x 确实是被赋值了的啊。
可是事实上,a.x 的值却是 undefined。

再来看一下这个: a = a.x = {n:2}的话,按原先的思路应该是:

  1. 先把 {n:2} 赋值给 a.x,那么也就相当于 b.x = {n:2} 啦
  2. 再把 a 重新指向 {n:2}。那么这是后 a.x 的值确实是 undefined,a 对象 {n:2} 中就没有 x 属性嘛。

按这个思路,上述两种方式的结果应该是不同的。但事实却是a = a.x = {n:2}和a.x = a = {n:2}的结果是一致的。所以很明显这个思路不对。

===========================正确的理解是这样的===================

解析器在接受到 a = a.x = {n:2} 这样的语句后,会这样做:

  1. 找到 a 和 a.x 的指针。如果已有指针,那么不改变它。如果没有指针,即那个变量还没被申明,那么就创建它,指向 null。
    a 是有指针的,指向 {n:1};a.x 是没有指针的,所以创建它,指向 null。
  2. 然后把上面找到的指针,都指向最右侧赋的那个值,即 {n:2}。

所以执行以后,就有了如下的变量关系图。大家可以慢慢体会下,想通了就很简单的。

如果大家觉得这种理解比较难,可以先按下面一种方式理解,等理解了再过来看看上面的解释

赋值是从右到左的,但不要被绕晕了, 其实很简单,从运算符优先级来考虑

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

.运算优先于=赋值运算,因此此处赋值可理解为

  1. 声明a对象中的x属性,用于赋值,此时b指向a,同时拥有未赋值的x属性
  2. 对a对象赋值,此时变量名a改变指向到对象{n:2}
  3. 对步骤1中x属性,也即a原指向对象的x属性,也即b指向对象的x属性赋值

赋值结果:

a => {n: 2}
b => {n: 1, x: {n: 2 } }

javascript 连等赋值问题(这是从SegmentFault转过来的一个问题)的更多相关文章

  1. ajax实现给JavaScript中全局变量赋值(转)

    原文地址:ajax实现给JavaScript中全局变量赋值 问题简化: <script type="text/javascript"> var a=1 ; functi ...

  2. JavaScript解构赋值

    JavaScript解构赋值 JavaScript解构赋值为我们提供了很多方便,但是用法比较多,本文就来梳理一下.总体来说,主要就两种地方使用解构赋值,一种是数组的解构赋值,另一种是对象的解构赋值.以 ...

  3. javascript对象引用与赋值

    avascript对象引用与赋值 <script type="text/javascript"> //例子一: 引用 var myArrayRef = new Arra ...

  4. JavaScript连等赋值

    最近探究js原理的过程中遇到了这个挺有趣的问题. 先贴代码: var a = {n:1} a.x = a = {n:2} alert(a.x) //undefined 在弄懂这个之前,我们先普及一个知 ...

  5. javascript给输入框赋值的一个误区

    一. 错误的示范 如下代码所示,如果需要用javascript获取id为username1, password1的输入框的值,将其写入id为username2, password2的输入框,那么红线区 ...

  6. JavaScript的算数,赋值,比较和逻辑运算符

    类似a=1+1这样的表达式称为运算符,js的运算符分为算数,赋值,比较和逻辑运算符:常见的算数有:+ - * / %(加减乘除,取模),比方说5/4=4*1+1:5%4=1,js算数顺序:从左往右,先 ...

  7. JavaScript对象属性赋值操作的逻辑

    对象进行属性赋值操作时,其执行逻辑如下所示: 1. 当前对象中是否有该属性?有,进行赋值操作:没有,进行下一步判断. 2. 对象的原型链中是否有该属性?没有,在当前对象上创建该属性,并赋值:有,进行下 ...

  8. javascript 连等赋值问题

    var a = {n:1}; var b = a; // 持有a,以回查 a.x = a = {n:2}; alert(a.x);// --> undefined alert(b.x);// - ...

  9. JavaScript 将多个引用(样式或者脚本)放入一个文件进行引用

    1.将样式放入一个文件进行引用 @import url("../media/css/bootstrap.min.css"); @import url("../media/ ...

随机推荐

  1. android Eclipse执行项目提示错误: unable to execute dex: GC orerhead limit exceeded

    Eclipse执行项目提示错误: unable to execute dex: GC orerhead limit exceeded 解决方法: 找到Eclipse安装目录的文件,\eclipse\e ...

  2. Javascript进度条

    一个简单的进度条演示. <!doctype html> <html> <head> <meta charset="utf8"> &l ...

  3. HashMap的key可以是可变的对象吗???

    大家都知道,HashMap的是key-value(键值对)组成的,这个key既可以是基本数据类型对象,如Integer,Float,同时也可以是自己编写的对象,那么问题来了,这个作为key的对象是否能 ...

  4. 从vmware下载到Linux环境下jdk和maven的安装

    写在前面:个人总结,如有不对请指出 操作环境: 操作系统:window7 企业版 处理器:Intel Core i5-4200U CPU @ 1.6GHz 内存:8G 系统类型:64位操作系统 需要安 ...

  5. uva 6757 Cup of Cowards(中途相遇法,貌似)

    uva 6757 Cup of CowardsCup of Cowards (CoC) is a role playing game that has 5 different characters (M ...

  6. 二:C语言(分之结构)

    一:if语句 二:while语句 #include <stdio.h> int main() { ; i=; ) //循环条件应该是什么呢? { sum=sum+i; i++ ; //这里 ...

  7. C++浅析——继承类中构造和析构顺序

    先看测试代码,CTEST 继承自CBase,并包含一个CMember成员对象: static int nIndex = 1; class CMember { public: CMember() { p ...

  8. css中单位em和rem

    一.介绍 1.em w3cschool中给出css中尺寸单位如下: 单位 描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸. 2em 等于当前字体尺寸的两倍. 例 ...

  9. [转]ExtJs4 笔记(13) Ext.menu.Menu 菜单、Ext.draw.Component 绘图、Ext.resizer.Resizer 大小变更

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  10. UVALive 5061 Lightning Energy Report --LCA

    题意:给一棵树,每次给u到v的路径上所有点加上一个值,最后输出每个点的权值(初始为0) 解法:每次在u,v间加k时,只要让u,v点的权值加上k,u,v的LCA处减去k(因为LCA的子树中加了两个k), ...