前几天看到一个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有值了。

javascript 连续赋值(连等运算)问题研究的更多相关文章

  1. javascript的变态位运算

    javascript的变态位运算 var a = "10" | 0; alert(a); alert (typeof a);结果为10,number. 这就是说这条语句可以将字符串 ...

  2. 奇特的JavaScript连续赋值运算

    一.引子: }; a.x = a = {n:}; alert(a.x); // --> undefined 以上第二句 a.x = a = {n:2} 是一个连续赋值表达式.这个连续赋值表达式在 ...

  3. (转)深入理解javascript连续赋值表达式

    引入 今天逛园子的时候看到一道javascript面试题,是关于连续赋值的,正好最近读jQuery源码经常看到这种连续赋值的表达式,所以很感兴趣. 废话不多说,来看题: var a = {n: 1} ...

  4. javascript中的浮点数运算

    解释一下下面代码的输出 console.log(0.1 + 0.2); //0.30000000000000004 console.log(0.1 + 0.2 == 0.3); //false Jav ...

  5. javascript 连续赋值(转载)

    先看一个例子   ● var a = {n:1}; ● var b = a; ● a.x = a = {n:2}; ● console.log("a.x: " + a.x); // ...

  6. JavaScript知识点---->运算规则与运算(逻辑、位)

    *在js中不同类型之间的运算,所得到结果的类型也会有所变化: string + number = string string + boolean = string string + undefiend ...

  7. javascript继承(一)—类的属性研究

    本篇文章主要针对javascript的属性进行分析,由于javascript是一种基于对象的语言,本身没有类的概念,所以对于javascript的类的定义有很多名字,例于原型对象,构造函数等,它们都是 ...

  8. JavaScript中的加法运算

    <head runat="server"> <title>JavaScript实现加法计算器</title> <script type=& ...

  9. JavaScript定时机制setTimeout与setInterval研究

    JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...

随机推荐

  1. Linux 命令 - mknod

    mknod 创建块设备或者字符设备文件.此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语法 mknod [选项] 设备名 设备类 ...

  2. PAT (Advanced Level) 1144~1147:1145Hash二次探查 1146拓扑排序 1147堆

    1144 The Missing Number(20 分) 题意:给定N个数的序列,输出不在序列中的最小的正整数. 分析: 1.给定的N个数可能为正,可能为负,可能重复. 2.由于N≤10​5​​,所 ...

  3. HihoCoder 1245:王胖浩与三角形 三角形边长与面积

    #1245 : 王胖浩与三角形 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 王胖浩有一个三角形,三边长为a,b,c.他有特殊的能力,能增加三条边的边长,增加的总长度不能 ...

  4. 新闻网大数据实时分析可视化系统项目——19、Spark Streaming实时数据分析

    1.Spark Streaming功能介绍 1)定义 Spark Streaming is an extension of the core Spark API that enables scalab ...

  5. Web项目设置编码格式

    1. 如果用的Tomcat ,请修改server.xml 中Connector URIEncoding="UTF-8" (GET请求时) 2. 用字符编码过滤器,设置默认编码方式为 ...

  6. Android实现三级联动下拉框下拉列表spinner

    原文出处:http://www.cnblogs.com/zjjne/archive/2013/10/03/3350107.html 主要实现办法:动态加载各级下拉值的适配器 在监听本级下拉框,当本级下 ...

  7. PHP处理大数据量老用户头像更新的操作--解决数据量大超时的问题

    /** * @title 老用户头像更新--每3秒调用一次接口,每次更新10条数据 * @example user/createHeadPicForOldUser? * @method GET * @ ...

  8. pyhton中pandas数据分析模块快速入门(非常容易懂)

    //2019.07.16python中pandas模块应用1.pandas是python进行数据分析的数据分析库,它提供了对于大量数据进行分析的函数库和各种方法,它的官网是http://pandas. ...

  9. JuJu团队11月25号工作汇报

    JuJu团队11月25号工作汇报 JuJu   Scrum 团队成员 今日工作 剩余任务 困难 于达 实现随机采样函数,进行onehot处理 预处理数据集,将数据集转为矩阵读入 数据集预处理比想象中麻 ...

  10. 【LeetCode】101. 对称二叉树

    题目 给定一个二叉树,检查它是否是镜像对称的. 例如,二叉树 [1,2,2,3,4,4,3] 是对称的. 1 / \ 2 2 / \ / \ 3 4 4 3 但是下面这个 [1,2,2,null,3, ...