(转)深入理解javascript连续赋值表达式

时间：2023-12-15 11:14:08

引入

今天逛园子的时候看到一道javascript面试题，是关于连续赋值的，正好最近读jQuery源码经常看到这种连续赋值的表达式，所以很感兴趣。

废话不多说，来看题：

var a = {n: 1}

var b = a;

a.x = a = {n: 2}

console.log(a.x);

console.log(b.x)

答案：

console.log(a.x); // undefined

console.log(b.x) //{n:2}

看到这个答案，我真是百思不得解。。。。 于是网上搜了搜，整理如下：

以下转自：http://www.iteye.com/topic/785445

1、引用(Reference)与GetValue & PutValue

引用
A Reference  is a reference to a property of an object. A Reference consists of two components, the base object and the property name.

“引用”是引用某个对象的一个属性（可能这个对象并没有这个属性），一个引用含“根对象”与“属性名”两个成员。 
后面以“(根对象,属性名)”来表达一个引用

引用
GetValue (V) 
1. If Type(V) is not Reference, return V. 
2. Call GetBase(V). 
3. If Result(2) is null, throw a ReferenceError exception. 
4. Call the [[Get]] method of Result(2), passing GetPropertyName(V) for the property name. 
5. Return Result(4).

GetValue，即取值操作，返回的是确定的值，而不是引用。（可以理解为变量与变量的值，或指针与指针指向的对象）

引用
PutValue (V, W) 
1. If Type(V) is not Reference, throw a ReferenceError exception. 
2. Call GetBase(V). 
3. If Result(2) is null, go to step 6. 
4. Call the [[Put]] method of Result(2), passing GetPropertyName(V) for the property name and W for the value. 
5. Return. 
6. Call the [[Put]] method for the global object, passing GetPropertyName(V) for the property name and W for the 
value. 
7. Return.

PutValue操作只对引用生效，在ECMAScript的描述中，修改对象的属性都是通过Refrence + PutValue进行的 
（ECMAScript是为了便于表达而引入Reference这个类型，实际上JS语言中并无此类型。The internal Reference type is not a language data type. It is defined by this specification purely for expository 
purposes.）

2、成员表达式(MemberExpression)解释过程

引用
The production MemberExpression : MemberExpression [ Expression ] is evaluated as follows: 
1. Evaluate MemberExpression. 
  53 
2. Call GetValue(Result(1)). 
3. Evaluate Expression. 
4. Call GetValue(Result(3)). 
5. Call ToObject(Result(2)). 
6. Call ToString(Result(4)). 
7. Return a value of type Reference whose base object is Result(5) and whose property name is Result(6).

着重看第7步：a value of type Reference

3、赋值表达式解析

引用
The production AssignmentExpression : LeftHandSideExpression = AssignmentExpression is evaluated as follows: 
1. Evaluate LeftHandSideExpression. 
2. Evaluate AssignmentExpression. 
3. Call GetValue(Result(2)). 
4. Call PutValue(Result(1), Result(3)). 
5. Return Result(3).

这里可以看到左侧得出的是引用，右侧调用GetValue取得的是确定值。

那么开始分析a.b = a = {n:2}这个表达式，先假设{n:1}这个对象为OBJ1，{n:2}为OBJ2，全局为GLOBAL。

它的解析如下： 
a.b = Expression1 
Expression1为另一个赋值表达式： 
a = {}

首先计算a.b = Expression1，按(3)中赋值表达式运行步骤 
step1先得到引用(OBJ1, "b") 
step2解析Expression1{ 
   Expression1解析 
   step1得到引用(GLOBAL, "a") 
   step2得到一个对象OBJ2 
   step3取值，仍是OBJ2 
   step4将引用(GLOBAL, "a")赋值为step3结果 
   step5返回OBJ2 
} 
step3取值，结果同样为OBJ2 
step4将(OBJ1, "b")赋值为OBJ2 
step5返回OBJ2

最终结果： 
OBJ1: {n:1, b:OBJ2} 
OBJ2: {n:2} 
a : OBJ2

PS: 
我们常说赋值运算是从右至左，是指右边先结合 
所以a.b = a = {n:2}解析为了a.b = ( a = {n:2})，而不会解析为(a.b = a) = {n:2} 
如果理解为右边先运算就会有误解了，虽然右边先赋值成功。

----------------------------分割线---------------------------

附上ECMA262文档：ECMA262

相关文章