关于一个js连续赋值问题之我见(词略穷,见谅)

简介: 前几天在搜索面试题时发现了这么一段代码,执行完后感觉完全不与所想的一样 1 var a = { 2 n : 1 3 }; 4 var b = a; 5 a.x = a = {n : 2}; 6 console.

前几天在搜索面试题时发现了这么一段代码,执行完后感觉完全不与所想的一样

1 var a = {
2     n : 1
3 };
4 var b = a;
5 a.x = a = {n : 2};
6 console.log(a.x);
7 console.log(b.x);

输出结果为:

undefined

[object Object]

一开始以为语句应该是先给 a 赋值 {n : 2} , 然后再将 a.x 赋值 {n : 2} ;

但事实却不是那样,于是改动了一下代码,添加几条log

var test;
var a = {
    get test () {
        console.log("call a get");
        return test;
    },
    set test (value) {
        console.log("call a set");
        test = value;
    }
}
var test2;
var b = {
    get test2 () {
        console.log("call b get");
        return test2;
    },
    set test2 (value) {
        console.log("call b set");
        test2 = value;
    }
}
a.test = {
    n : 1
};
b.test2 = a.test;
console.log("begin");
a.test.x = a.test = {n : 2};

这样,在begin后边,这条赋值到底执行了什么就一目了然了.

这是语句执行时打印的log

先触发了一次get,然后触发了一次set.

本人猜想,该条语句执行的顺序为,先将左边变量取出,然后执行赋值.(在执行该条语句前,先将对象引用取出,然后从右到左执行赋值)

上图来自 http://snandy.iteye.com/blog/785445

 

部分参考资料:

http://blog.csdn.net/kittyjie/article/details/8242523

 

目录
相关文章
|
6月前
|
JavaScript 前端开发 开发者
混淆赋值运算符(=)和相等比较运算符(==, ===)(js的问题)
混淆赋值运算符(=)和相等比较运算符(==, ===)(js的问题)
32 0
|
2月前
|
JavaScript 前端开发
js 变量作用域与解构赋值| 22
js 变量作用域与解构赋值| 22
|
4月前
|
JavaScript 前端开发 网络架构
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
JavaScript编码之路【对象的增强、ES6新特性之函数的默认值设置 、rest参数 (剩余参数)、拓展运算符、对象与数组的解构赋值】
56 1
|
5月前
|
JavaScript
详细讲解JS的解构赋值(Es6)
详细讲解JS的解构赋值(Es6)
|
5月前
|
JavaScript 前端开发 开发者
JavaScript进阶-解构赋值与展开运算符
【6月更文挑战第19天】ES6的解构赋值与展开运算符增强了JS开发效率。解构允许直接从数组或对象提取值,简化数据提取,而展开运算符则用于合并数组和对象或作为函数参数。解构时注意设置默认值以处理不存在的属性,避免过度嵌套。展开运算符需区分数组与对象使用,勿混淆于剩余参数。通过示例展示了这两种操作在数组和对象中的应用,提升代码可读性与简洁度。
143 5
|
5月前
|
JavaScript 前端开发 Java
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
【JavaScript】ECMAS6(ES6)新特性概览(二):解构赋值、扩展与收集、class类全面解析
59 2
|
4月前
|
存储 JavaScript 前端开发
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
js【详解】数据类型原理(含变量赋值详解-浅拷贝)
35 0
|
6月前
|
JavaScript 前端开发
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
JS中运算符的算术、赋值、+、比较(不同类型之间比较)、逻辑
40 1
|
6月前
|
JavaScript 前端开发
JavaScript高级主题:什么是 ES6 的解构赋值?
【4月更文挑战第13天】ES6的解构赋值语法简化了从数组和对象中提取值的过程,提高代码可读性。例如,可以从数组`[1, 2, 3]`中分别赋值给`a`, `b`, `c`,或者从对象`{x: 1, y: 2, z: 3}`中提取属性值给同名变量。
34 6
|
6月前
|
JavaScript 前端开发
js开发:请解释什么是ES6的解构赋值(destructuring assignment),并给出一个示例。
ES6的解构赋值简化了JavaScript中从数组和对象提取数据的过程。例如,`[a, b, c] = [1, 2, 3]`将数组元素赋值给变量,`{name, age} = {name: '张三', age: 18}`则将对象属性赋值给对应变量,提高了代码的可读性和效率。
35 3