zoukankan      html  css  js  c++  java
  • javascript 连续赋值(连等运算)问题研究

    前几天看到一个javascript 连续赋值的问题,运行了一下,结果出乎意料,发现这里的水真的有点深啊,连续赋值的底层机制,没有一本前端书籍有详细介绍的,自己做实验研究了一下,先来看结果:

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

    运行结果:

    a.x: undefined

    b.x: Object {n: 2}

    a.x居然是undefined,没搞错吧,根据我印象中的连续赋值原理,执行顺序是从右向左执行,a.x = a = {n: 2} ,相当于依次执行了(1) a={n:2}, (2) a.x=a 这两行代码,那么a.x应该是递归引用到a本身的,形成一棵子节点无限引用自身的子树,但是我猜中了开头却没猜中结局,我的世界观开始崩塌,先来验证一下连续赋值是否是从右向左的吧。

    var a={};
    Object.defineProperty(a,"x",{
    get:function(){console.log("get a.x");return this._x;},
    set:function(v){console.log("set a.x:"+v);this._x=v;return this._x}
    })

    var b={};
    Object.defineProperty(b,"x",{
    get:function(){console.log("get b.x");return this._x;},
    set:function(v){console.log("set b.x:"+v);this._x=v;return this._x}
    })

    a.x=b.x="hello,world";

    运行结果是

    set b.x:hello,world
    set a.x:hello,world

    说明了两件事:

    1)赋值顺序是从右向左

    2)执行了b.x="hello,world",a.x="hello,world",   a.x的值并没有从b.x获取,因为get属性存取器并没有执行。

    那么问题来了,a.x = a = {n: 2} ,等价的运行结果是a={n:2}, a.x={n:2}   ,a.x应该有值才对,现在运行的结果是b有值,说明这两行代码虽然是有先后执行顺序,但实际上是相互隔离的。当执行a.x={n:2} 时,a的引用仍然指向旧的对象(即变量b指向的对象),所以b.x有值了。

  • 相关阅读:
    [Python学习]Iterator 和 Generator的学习心得
    ubantu linux的bash shell初接触
    Linux-Ubuntu 启用root账户
    Ubuntu Linux系统三种方法添加本地软件库
    ASK,OOK,FSK的联系和区别
    spinlock一边连逻辑一边连控制器
    Cgroup与LXC简介
    关于 package.json 和 package-lock.json 文件说明
    ng build --aot 与 ng build --prod
    【Rxjs】
  • 原文地址:https://www.cnblogs.com/windyfancy/p/5165296.html
Copyright © 2011-2022 走看看