写了10年Javascript未必全了解的连续赋值运算
创始人
2024-07-20 04:31:38
0

  该文章中将分享一下作者在写Javascript的心得,是关于连续赋值运算一些技巧。对大家在Web开发方面肯定有很大的启发和帮助。

      一、引子

  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。

  Js代码

  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}。即在这个连等语句

  Js代码

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

  a.x 中的a指向的是 {n:1},a 指向的是 {n:2}。如下图

Javascript的连续赋值运算

  四:解惑

  这篇写完,或许部分人看完还是晕晕的。因为里面的文字描述实在是绕口。最初我在理解这个连等赋值语句时

  Js代码

  1. var a = {n:1};     
  2. a.x = a = {n:2};  

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

  谢谢所有参与讨论的人:蔡蔡、猪大肠 、呆呆、雅儒。这个问题最早是蔡蔡提出的。雅儒在 菜鸟灰呀灰 群里每次的讨论都那么投入,认真,哪怕是别人提出的话题。

  五:结束

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

  Js代码

  1. function fun(){     
  2.     var a = b = 5;     
  3. }     
  4. fun();     
  5. alert(typeof a); // --> undefined     
  6. alert(typeof b); // --> number    

   原文链接:http://www.javaeye.com/topic/785445

【编辑推荐】

  1. JavaScript初学者应注意的七个细节
  2. Web开发者必知 31个最实用的Javascript工具(附下载)
  3. JavaScript函数式编程
  4. 提升JavaScript递归效率:Memoization技术详解

相关内容

热门资讯

如何允许远程连接到MySQL数... [[277004]]【51CTO.com快译】默认情况下,MySQL服务器仅侦听来自localhos...
如何利用交换机和端口设置来管理... 在网络管理中,总是有些人让管理员头疼。下面我们就将介绍一下一个网管员利用交换机以及端口设置等来进行D...
施耐德电气数据中心整体解决方案... 近日,全球能效管理专家施耐德电气正式启动大型体验活动“能效中国行——2012卡车巡展”,作为该活动的...
20个非常棒的扁平设计免费资源 Apple设备的平面图标PSD免费平板UI 平板UI套件24平图标Freen平板UI套件PSD径向平...
德国电信门户网站可实时显示全球... 德国电信周三推出一个门户网站,直观地实时提供其安装在全球各地的传感器网络检测到的网络攻击状况。该网站...
为啥国人偏爱 Mybatis,... 关于 SQL 和 ORM 的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行...
《非诚勿扰》红人闫凤娇被曝厕所... 【51CTO.com 综合消息360安全专家提醒说,“闫凤娇”、“非诚勿扰”已经被黑客盯上成为了“木...
2012年第四季度互联网状况报... [[71653]]  北京时间4月25日消息,据国外媒体报道,全球知名的云平台公司Akamai Te...