一、引子
var a = {n:1};
a.x = a = {n:2};
alert(a.x); // --> undefined
这是蔡蔡在看jQuery源码 时发现这种写法的。 以上第二句 a.x = a = {n:2}
是一个连续赋值表达式。 这个连续赋值表达式在引擎内部究竟发生了什么?是如何解释的?
二、猜想
猜想1:从左到右赋值,a.x 先赋值为 {n:2},但随后 a 赋值为 {n:2}, 即 a 被重写了,值为 {n:2},新的 a 没有 x属性,因此为undefined。
步骤如下
a.x = {n:2};
a = {n:2};
这种解释得出的结果与实际运行结果一致,貌似是对的。
注意猜想1中 a.x 被赋值过。
猜想2:从右到左赋值,a 先赋值为{n:2},a.x 发现 a 被重写后(之前a是{a:1}), a.x = {n:2} 引擎限制a.x赋值,忽略了。
步骤如下:
a = {n:2};
a.x 未被赋值{n:2}
等价于 a.x = (a = {n:2})
,即执行了第一步,这样也能解释a.x为undefined了。
注意猜想2中a.x压根没被赋值过。
三、证明
上面两种猜想相信多数人都有,群里讨论呆呆认为是猜想1, 我认为是猜想2。其实都错了。 我忽略了引用的关系。
如下,加一个变量b,指向a。
var a = {n:1};
var b = a; // 持有a,以回查
a.x = a = {n:2};
alert(a.x);// --> undefined
alert(b.x);// --> [object Object]
发现a.x仍然是undefined,神奇的是 b.x 并未被赋值过(比如:b.x={n:2})
,却变成了 [object Object]
。 b 是指向 a({n:1})
的,只有 a.x = {n:2}
执行了才说明b是有x属性的。 实际执行过程:从右到左,a 先被赋值为 {n:2}
,随后a.x被赋值 {n:2}
。
a = {n:2};
a.x = {n:2};
等价于
a.x = (a = {n:2});
与猜想2的区别在于a.x 被赋值了,猜想2中并未赋值。 最重要的区别,第一步 a = {n:2}
的 a 指向的是新的对象{n:2}
, 第二步 a.x = {n:2}
中的 a 是 {a:1}
。
即在这个连等语句
a.x = a = {n:2};
a.x 中的a指向的是 {n:1}
,a 指向的是 {n:2}
。
a.x = a = {n:2}
│ │
{n:1}<──┘ └─>{n:2}
四:解惑
这篇写完,或许部分人看完还是晕晕的。 因为里面的文字描述实在是绕口。
最初我在理解这个连等赋值语句时
var a = {n:1};
a.x = a = {n:2};
认为引擎会限制a.x的重写(a被重写后),实际却不是这样的。 指向的对象已经不同了。引擎也没有限制a.x={n:2}的重写。
五:结束
呵,以另一个连续赋值题结束。 fun执行后,这里的 变量 b 溢出到fun外成为了全局变量。
想到了吗?
function fun(){
var a = b = 5;
}
fun();
alert(typeof a); // --> undefined
alert(typeof b); // --> number
文章来源:http://justjavac.com/javascript/2012/04/05/javascript-continuous-assignment-operator.html
分享到:
相关推荐
很喜欢 蔡蔡 的这个标题,实际蔡蔡已经分析过了,这里借用了。或许有点标题党的意思。看完就知了。
javascript如何实现连续赋值呢?下面小编就给大家介绍下用javascript实现连续赋值,有需要的朋友可以参考下
JavaScript实现检验除法运算JavaScript实现检验除法运算JavaScript实现检验除法运算JavaScript实现检验除法运算JavaScript实现检验除法运算
本文实例讲述了JavaScript中的连续赋值问题。分享给大家供大家参考,具体如下: JavaScript中的连续赋值: [removed] var a = {n: 1} var b = a; a.x = a = {n: 2} console.log(a.x);//undefined console.log(b.x)/...
使用HTML5、CSS3和JavaScript实现加、减、乘、除四个基本算术运算操作。
本文通过具体的示例来给大家详细解释了下javascript的连续赋值问题,十分的实用,有需要的小伙伴可以参考下。
此函数是我自己写的,虽然在网上可以搜到很多,不过我找到的都是在算法中存在基本的浮点数的运算,导致结果仍然是错误的。由于刚刚学写JS,所以可能考虑不够周全,望大家批评指正。 代码中加了四舍五入函数,是网上...
JavaScript中极易出错的操作符运算总结 目录 算术运算符 非正常情况1: 有特殊值字面量参与的运算非正常情况2: 其他类型的数据参与数学运算。比较运算符 非正常情况1: 特殊值参与比较运算非正常情况2: 其他数据...
var num1 = prompt('请输入第一个数:'); var re = prompt('请输入你要进行的运算符:'); var num2 = prompt('请输入第二个数:'); function getSum(num1,re,num2,) { switch (re) { case '+': ...
javascript写3D的圣诞树javascript写3D的圣诞树javascript写3D的圣诞树javascript写3D的圣诞树javascript写3D的圣诞树
编辑页面上能给input自动赋值.zip包中例子。
javascript给span标签赋值的方法.docx
javascript float运算会有误差,可以用此脚本中的函数进行修补。
采用科学记数法,可以把一个数表示为数字加e/E,后面加乘以10的倍数,如: 代码如下: var num1 = 3.125e7; // 31250000 var num2 = 3e-17; // 0.00000000000000003 进行特别大的数的加减运算,可以使用字符串+科学...
JavaScript 读写文件 实例代码 简单有效
在编写代码时我们有时候会碰到需要自己解析四则运算表达式的情况,本文简单的介绍使用JavaScript实现对简单四则运算表达式的解析。 一、熟悉概念 中缀表示法(或中缀记法)是一个通用的算术或逻辑公式表示方法, ...
主要介绍了JavaScript函数参数使用带参数名的方式赋值传入的方法,实例分析了javascript函数传递参数的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下