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.log(b.x);//undefined

执行机制深度分析

对代码执行过程进行详细分析：

核心语句为a.x=a={n:2}

在JavaScript中，赋值运算符具备右结合性。因此，上述语句在语法解析上等价于a.x=(a={n:2})。

JavaScript引擎对表达式的求值顺序遵循从左至右的原则（注：此前曾与同事讨论，对方认为从左至右，我起初误以为从右至左，经核实确认从左至右是正确的）。

具体执行步骤1：a.x=(括号内的最终结果)。

引擎首先查找对象a的属性x。由于该属性不存在，引擎会在a当前指向的对象中创建一个名为x的新属性。此时，引擎预留该位置以接收后续计算得出的结果，并暂停对该属性的赋值操作，等待右侧表达式的求值。

步骤2：由于左侧已预留属性x以接收返回值，引擎开始求值括号内的表达式a={n:2}。待该表达式计算出最终结果后，将该结果赋值给左侧预留的属性x。

步骤3：回到括号内的表达式a={n:2}。在此过程中，变量a的引用指向发生了改变，指向了新创建的对象{n:2}。

DOM属性赋值示例

JavaScript实现给<a href=""> href赋值

document.getElementById("a").href=""; a是要添加超链接a的id，比如<a id='a' >信息提示</a>
<form action="" method="post" name="myform" >
<a href="" id=links >信息提示 </a >
</form >
<script >
document.getElementById("links").href="http://www.baidu.com";
</script >

此段代码实现了为<a hre="">标签的href属性进行赋值，代码实现简洁明了。

以上内容即为本文关于JavaScript实现连续赋值的完整解析，希望能为读者提供帮助。本站每日持续更新新技术内容，敬请关注！