写了10年的Javascript也未必全了解的连续赋值运算

一、引子


代码如下:

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。步骤如下
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。


代码如下:

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}。
1, a = {n:2};
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}。如下图


四：解惑

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


代码如下:

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

赞 (0)

相关推荐

  • js 连续赋值的简单实现

    js 连续赋值的简单实现

    无意中网上发现的这个问题,预想的结果和真实的结果大相径庭. var a={n:1} var b=a; a.x=a={n:2} console.log(a.x); console.log(b.x); undefined Object{n:2} 要是拆开来看,结果就是我所想的那样 var a={n:1} var b=a; a={n:2}: a.x={n:2} console.log(a.x);//Object{n:2}console.log(b.x);//undefined 分析: a.x=a={n

  • javascript连续赋值问题

    javascript连续赋值问题

    前几天在搜索面试题时发现了这么一段代码,执行完后感觉完全不与所想的一样 var a = { n : 1 }; var b = a; a.x = a = {n : 2}; console.log(a.x); console.log(b.x); 输出结果为: undefined [object Object] 一开始以为语句应该是先给 a 赋值 {n : 2} , 然后再将 a.x 赋值 {n : 2} ; 但事实却不是那样,于是改动了一下代码,添加几条log var test; var a = {

  • javascript实现连续赋值

    javascript实现连续赋值

    最近项目接触,时间比较充足,到网上逛逛了逛无意中在网上发现了这个问题,预知的结果和真实结果相差太大. 请看下面代码 var a={n:1} var b=a; a.x=a={n:2} console.log(a.x); console.log(b.x); undefined Object{n:2} 如果把代码拆开来看,结果就是我们所想的那样 var a={n:1} var b=a; a={n:2}: a.x={n:2} console.log(a.x);//Object{n:2} console.

  • 写了10年的Javascript也未必全了解的连续赋值运算

    写了10年的Javascript也未必全了解的连续赋值运算

    一.引子 复制代码 代码如下: 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属性,因此为undefi

  • 分享5个小技巧让你写出更好的 JavaScript 条件语句

    在使用 JavaScript 时,我们常常要写不少的条件语句.这里有五个小技巧,可以让你写出更干净.漂亮的条件语句. 1. 使用 Array.includes 来处理多重条件 举个栗子 : // 条件语句 function test(fruit) { if (fruit == 'apple' || fruit == 'strawberry') { console.log('red'); } } 乍一看,这么写似乎没什么大问题.然而,如果我们想要匹配更多的红色水果呢,比方说『樱桃』和『蔓越莓』?我

  • 你需要知道的10个最佳javascript开发实践小结

    尽管很多的开发人员都乐于颂扬javascript,但是仍旧有人看到它的阴暗面. 使用很多javascript代码的web页面会加载很慢,过多的使用javascript使得网页丑陋和拖沓.很快如何有效地使用javascript成为一个非常火热的话题. 这里让我们列出10个最佳javascript实践,帮助你有效地使用javascript. 1. 尽可能的保持代码简洁 可能大家都听到过了N遍这个代码简洁问题了.作为一个开发人员你可能在你的代码开发过程中使用了很多次,但千万不要在js开发中忘记这点.

  • JavaScript常用进制转换及位运算实例解析

    前言 在一般的代码中很少会接触到进制和位运算,但这不代表我们可以不去学习它.作为一位编程人员,这些都是基础知识.如果你没有学过这方面的知识,也不要慌,接下来的知识并不会很难.本文你将会学习到: 进制转换 按位操作符 JavaScript进制转换 手动实现进制转换 进制转换 以下使用常见的十进制和二进制转换作为例子,其他进制的转换也是大同小异,感兴趣可以自己琢磨下. 十进制转二进制 根据 "逢十进一" 的法则进行计数时,每十个相同的单位组成一个和它相邻的较高的单位,这种计数法叫做十进制计

  • 原生javascript实现的全屏滚动功能示例

    本文实例讲述了原生javascript实现的全屏滚动功能.分享给大家供大家参考,具体如下: 原理: 1. 计算当前浏览器屏幕高度,每次翻页显示的内容高度即为屏幕高度 2. 对鼠标滚轮事件进行监听,注意滚轮事件的浏览器兼容问题. 废话不多说,直接上代码 html代码: <div id="wrap"> <div id="main" style="top: 0;"> <div class="content num

  • javascript实现可全选、反选及删除表格的方法

    本文实例讲述了javascript实现可全选.反选及删除表格的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • JavaScript控制浏览器全屏显示简单示例

    JavaScript控制浏览器全屏显示简单示例

    本文实例讲述了JavaScript控制浏览器全屏显示.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • JavaScript 数组基本操作全解

    JavaScript 数组基本操作全解

    目录 一.初识数组 二.创建数组 使用Array对象创建数组 使用“[]”创建数组 三.数组的基本操作 获取数组长度 访问数组元素 元素的添加与修改 添加元素 修改元素 元素的删除 解构赋值 好久不见,甚是想念! 大家好!我是洋哥 芜湖,起飞 一.初识数组 数组构成:数组由一个或多个数组元素组成的,各元素之间使用逗号“,”分割. 数组元素:每个数组元素由“下标”和“值”构成. 下标:又称索引,以数字表示,默认从0开始依次递增,用于识别元素. 值:元素的内容,可以是任意类型的数据,如数值型.字符型

  • 写出更好的JavaScript之undefined篇（上）

    "全局变量"和"全局对象的属性"是指同样的东西,只是因为要配合上下文才用了不同的说法,正文中我就不再另外解释了:"声明"指通过"var"语句声明变量和/或对函数及其签名的定义:"变量"指通过"var"语句声明过或者在函数体中试图访问的命名参数:"undefined"指名为"undefined"的值(全局或本地变量),而"未定义"

  • Web性能优化系列 10个提升JavaScript性能的技巧

    Nicholas Zakas是一位 JS 大师,Yahoo! 首页的前端主程.他是<高性能 Javascript>的作者,这本书值得每个程序员去阅读. 当谈到 JS 性能的时候,Zakas差不多就是你要找的,2010年六月他在Google Tech Talk发表了名为<Speed Up Your Javascript>的演讲. 但 Javascript 性能优化绝不是一种书面的技术,Nicholas 的技术演进列出了10条建议,帮助你写出高效的 JS 代码. 1. 定义局部变量 当

随机推荐