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

引入

今天逛园子的时候看到一道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

时间: 2024-11-05 18:53:16

(转)深入理解javascript连续赋值表达式的相关文章

深入理解JavaScript系列(4):立即调用的函数表达式

前言 大家学JavaScript的时候,经常遇到自执行匿名函数的代码,今天我们主要就来想想说一下自执行. 在详细了解这个之前,我们来谈了解一下“自执行”这个叫法,本文对这个功能的叫法也不一定完全对,主要是看个人如何理解,因为有的人说立即调用,有的人说自动执行,所以你完全可以按照你自己的理解来取一个名字,不过我听很多人都叫它为“自执行”,但作者后面说了很多,来说服大家称呼为“立即调用的函数表达式”. 本文英文原文地址:http://benalman.com/news/2010/11/immedia

深入理解JavaScript系列(2):揭秘命名函数表达式

前言 网上还没用发现有人对命名函数表达式进去重复深入的讨论,正因为如此,网上出现了各种各样的误解,本文将从原理和实践两个方面来探讨JavaScript关于命名函数表达式的优缺点. 简单的说,命名函数表达式只有一个用户,那就是在Debug或者Profiler分析的时候来描述函数的名称,也可以使用函数名实现递归,但很快你就会发现其实是不切实际的.当然,如果你不关注调试,那就没什么可担心的了,否则,如果你想了解兼容性方面的东西的话,你还是应该继续往下看看. 我们先开始看看,什么叫函数表达式,然后再说一

深入理解JavaScript系列(2):揭秘命名函数表达式(转)

前言 网上还没用发现有人对命名函数表达式进去重复深入的讨论,正因为如此,网上出现了各种各样的误解,本文将从原理和实践两个方面来探讨JavaScript关于命名函数表达式的优缺点. 简 单的说,命名函数表达式只有一个用户,那就是在Debug或者Profiler分析的时候来描述函数的名称,也可以使用函数名实现递归,但很快你 就会发现其实是不切实际的.当然,如果你不关注调试,那就没什么可担心的了,否则,如果你想了解兼容性方面的东西的话,你还是应该继续往下看看. 我们先开始看看,什么叫函数表达式,然后再

<深入理解JavaScript>学习笔记(2)_揭秘命名函数表达式

写在前面的话 注:本文是拜读了 深入理解JavaScript 之后深有感悟,故做次笔记方便之后查看. 感觉这章的内容有点深奥....略难懂啊. 先坐下笔记,加深一下印象吧. 我主要记一下自己感觉有用的东西...哈哈 函数表达式和函数声明 在ECMAScript中,创建函数的最常用的两个方法是函数表达式和函数声明,两者期间的区别是有点晕,因为ECMA规范只明确了一点:函数声明必须带有标示符(Identifier)(就是大家常说的函数名称),而函数表达式则可以省略这个标示符: 函数声明: funct

深入理解javascript:揭秘命名函数表达式

这是一篇转自汤姆大叔的文章:http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 前言 网上还没用发现有人对命名函数表达式进去重复深入的讨论,正因为如此,网上出现了各种各样的误解,本文将从原理和实践两个方面来探讨JavaScript关于命名函数表达式的优缺点. 简单的说,命名函数表达式只有一个用户,那就是在Debug或者Profiler分析的时候来描述函数的名称,也可以使用函数名实现递归,但很快你 就会发现其实是不切实际的.当然

深入理解javascript闭包

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. Js代码 var n=999; function f1(){ alert(n); } f1(); // 999 另一方面,在函数外部自然无法读取函数内的局部变量. Js代码 function

深入理解JavaScript中创建对象模式的演变(原型)

创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Object构造函数和对象字面量方法 工厂模式 自定义构造函数模式 原型模式 组合使用自定义构造函数模式和原型模式 动态原型模式.寄生构造函数模式.稳妥构造函数模式 第一部分:Object构造函数和对象字面量方法 我之前在博文<javascript中对象字面量的理解>中讲到过这两种方法,如何大家不熟悉,可以点进去看一看回顾一下.它们的优点是用来创建单个的对象非常方

深入理解JavaScript系列(1):编写高质量JavaScript代码的基本要点(转)

才华横溢的Stoyan Stefanov,在他写的由O’Reilly初版的新书<JavaScript Patterns>(JavaScript模式)中,我想要是为我们的读者贡献其摘要,那会是件很美妙的事情.具体一点就是编写高质量JavaScript的一些要素,例如避免全局变量,使用单变量声明,在循环中预缓存length(长度),遵循代码阅读,以及更多. 此摘要也包括一些与代码不太相关的习惯,但对整体代码的创建息息相关,包括撰写API文档.执行同行评审以及运行JSLint.这些习惯和最佳做法可以

JavaScript大杂烩6 - 理解JavaScript中的this

在JavaScript开发中,this是很常用的一个关键字,但同时也是一个很容易引入bug的一个关键字,在这里我们就专门总结一下页面中可能出现的this关键字(包括几种在其他页面文件中出现的this). JavaScript中的this关键字通常只使用在函数中,它指向当前函数的调用者,这是this关键字的本质,所有的使用方式都是围绕这个展开的,让我们来看一下在各种性质的函数中this的用法.1. 在对象的函数中使用this var person = { name: 'Frank', say: f