zoukankan      html  css  js  c++  java
  • 纠结的连等赋值

      偶的看到一段有意思的代码:

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

      作为一个热衷于“钻牛角尖”的人,楼主对这样的代码很感兴趣,也不禁陷入了思考。so也不要说写这样的代码难维护啥的,纯粹为了思考逻辑。

      首先,这是一个连等赋值,而且赋值的是个对象。如果是基本的JavaScript类型,不存在引用,也就不会有类似的问题,但是逻辑是一样的。

      

      赋值过程是怎么样的呢?以上的翻译是,b先赋值5,然后(b=5)会返回所赋的值(也就是5),然后再赋值给a,也就是:

    a = (b = 5);

      所以最初的代码,可以修改成:

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

      如果是这样,那么以下代码有什么区别:

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

      很明显,结果不一样,继续了解下JavaScript的运算顺序。

    var a = 10;        
    function fn() {
        a = 20;
        return 20;
    }
    
    var b = a + fn();
    console.log(b);

      输出30,我们猜测JavaScript是从左到右运算的(事实也确实如此)。先取出a在内存中的值(10),然后执行fn函数,返回20(同时改变了a的值),10+20=30。

      如果运算过程中有括号啥的,是不是会“智能”地改变运算顺序呢?

    var a = 10;        
    function fn() {
        a = 20;
        return 20;
    }
    
    var b = a + (fn() * 2);
    console.log(b);

      输出50,还是从左到右,没有智能地先运算括号里的内容,然后改变a的值,再和a相加。这在JavaScript内核中是怎么实现的?这个我也没有研究过,但是我知道C++等语言是没有这么“智能”的,可以通过堆栈来模拟,比如简单计算器

      再回头看这道题,声明一个变量a,指向一个对象{n: 1},然后执行连等。可以肯定的是,a.x和a指向的是同一块内存,我们从左到右运算,a.x实际操作的是a指向的对象,发现没有x这个key,那么就会自动添加,它的值等待右边的运算结果。然后a重新引用了一个对象,并且之前的{n:1}这个对象新的key(x)的value也引用到同一个对象上。大概过程如下图,过程2我把它理解为等待,等待过程3中a的运算结果。

      如果要说的稍微“专业”一点,连等是先确定所有变量的指针,再让指针指向那个赋值

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

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

      如果理解了,试试这道题吧:

    var a, b, c, d;
    a = b = c = d = {a: 1};
    a.x = a = b.y = b = c.z = c = {}
    console.log(a, b, c, d);

    参考:

    1. Operator_Precedence
    2. javascript 连等赋值问题
  • 相关阅读:
    焦虑来回走
    去省政府客串
    中国地质大学(北京)招生信息有点坑
    张桂梅校长再获殊荣,实至名归!她的故事值得一看再看……
    行内容转为列内容
    公文写作心得
    钟南山院士亲口说的“如何保持健康长寿
    VMware虚拟机出现“内部错误”如何解决?
    CI框架深入篇(2)一些基础的我之不知道的标准格式
    SQL语句学习记录(三)
  • 原文地址:https://www.cnblogs.com/lessfish/p/4630656.html
Copyright © 2011-2022 走看看