UDN-企业互联网技术人气社区

板块导航

浏览  : 1267
回复  : 7

[原生js] 写了10年Javascript未必全了解的连续赋值运算

[复制链接]
白青青的头像 楼主
发表于 2015-9-1 20:54:52 | 显示全部楼层 |阅读模式
  一、引子
  1. var a = {n:1};  
  2. a.x = a = {n:2};  
  3. alert(a.x); // --> undefined  
复制代码

  看 jQuery 源码 时发现的这种写法。 以上第二句 a.x = a = {n:2} 是一个连续赋值表达式。 这个连续赋值表达式在引擎内部究竟发生了什么?是如何解释的?

  二、猜想

  猜想1:从左到右赋值,a.x 先赋值为 {n:2},但随后 a 赋值为 {n:2}, 即 a 被重写了,值为 {n:2},新的 a 没有 x 属性,因此为 undefined。

  步骤如下
  1. a.x = {n:2};
  2. a = {n:2};
复制代码

  这种解释得出的结果与实际运行结果一致,貌似是对的。

  注意「猜想1」中 a.x 被赋值过。

  猜想2:从右到左赋值,a 先赋值为 {n:2},a.x 发现 a 被重写后(之前 a 是 {a:1}), a.x = {n:2} 引擎限制a.x 赋值,忽略了。

  步骤如下:
  1. a = {n:2};
  2. a.x 未被赋值{n:2}
复制代码

  等价于 a.x = (a = {n:2}),即执行了第一步,这样也能解释 a.x 为 undefined 了。

  注意「猜想2」中 a.x 压根没被赋值过。

  三、证明

  上面两种猜想相信多数人都有,群里讨论呆呆认为是「猜想1」, 我认为是「猜想2」。其实都错了。 我忽略了引用的关系。

  如下,加一个变量 b,指向 a。
  1. var a = {n:1};  
  2. var b = a; // 持有a,以回查  
  3. a.x = a = {n:2};  
  4. alert(a.x);// --> undefined  
  5. 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}。
  1. a = {n:2};
  2. a.x = {n:2};
复制代码

  等价于
  1. a.x = (a = {n:2});
复制代码

  与猜想2的区别在于 a.x 被赋值了,猜想2中并未赋值。 最重要的区别,第一步 a = {n:2} 的 a 指向的是新的对象 {n:2}, 第二步 a.x = {n:2} 中的 a 是 {a:1}。

  即在这个连等语句
  1. a.x = a = {n:2};
复制代码

  a.x 中的a指向的是 {n:1},a 指向的是 {n:2}。
  1.               a.x  =  a  = {n:2}
  2.               │      │
  3.       {n:1}<──┘      └─>{n:2}
复制代码

  四:解惑

  这篇写完,或许部分人看完还是晕晕的。 因为里面的文字描述实在是绕口。

  最初我在理解这个连等赋值语句时
  1. var a = {n:1};  
  2. a.x = a = {n:2};  
复制代码

  认为引擎会限制 a.x 的重写(a 被重写后),实际却不是这样的。 指向的对象已经不同了。引擎也没有限制a.x={n:2} 的重写。

  五:结束

  呵,以另一个连续赋值题结束。 fun 执行后,这里的 变量 b 溢出到 fun 外成为了全局变量。

  想到了吗?
  1. function fun(){  
  2.     var a = b = 5;  
  3. }  
  4. fun();  
  5. alert(typeof a); // --> undefined  
  6. alert(typeof b); // --> number  
复制代码

相关帖子

发表于 2015-9-1 20:55:23 | 显示全部楼层
果然又涨姿势了
使用道具 举报

回复

发表于 2015-9-3 09:14:50 | 显示全部楼层
不要使用怪招!
使用道具 举报

回复

发表于 2015-9-19 03:29:36 | 显示全部楼层
js框架越来越火了, 不过本人还是喜欢原生的好, 自己写类库, 自己来封装,用着方便。。。。
使用道具 举报

回复

发表于 2015-9-25 07:18:45 | 显示全部楼层
个人觉得js是一种解释性语言,它提供了一个非常方便的开发过程,不需要编译,js与HTML标识结合在一起,从而方便用户的使用操作。
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部