js对象等号赋值的bug
var a = {n: 1};
var b = a;
a.x = a = {n: 2};
console.log(a.x);
console.log(b.x);
有道题是这样的,觉得很奇葩,分析一下
1.对象 引用类型
对象属于引用类型,c,java,js里面都是的,对象就是引用类型,包括数组。
上面的a是引用类型,a保存的是对象 {n: 1}的地址,对这个对象的引用。b = a 。把a里面的地址赋值给了b,b也指向{n: 1}这个对象的物理地址。所以,a 一旦做赋值更改,修改的是a对引用的修改。b也同时修改,b修改的时候,a也会被修改。这就是引用类型。
堆和栈。堆是真实的{n:1} 。栈里面存放的是堆的物理地址,值比较小。根据栈的地址去找堆里面的数据。
2.
var a = {n:1};
var b = a;
a.x = a = {n:2};
console.log(a===b.x); //true
第二个奇葩结果
3.
https://blog.csdn.net/qiphon3650/article/details/78860973
我把这篇看了,然后觉得还是不理解
就这句: 执行a.x=a,此时a已经指向了新对象,而a.x因为在执行前保留了原引用。
不理解的点是 a都已经改变指向了,a指向了{n: 2},a.x里面的a的指向当然也改变成了{n: 2},为什么,a.x还会保留原引用
4.我又看了别人写的,觉得这样比较好绕回来
a.x的运算优先级最高
也就是说
var a = {n:1};
var b = a;
a.x = a = {n:2};
console.log(a===b.x); //true
这段代码可以写成这样
var a = {n:1};
var b = a;
a.x = (a = {n:2});
console.log(a===b.x); //true
这样就解释通了
1.a指向 {n: 1}; ---> var a = {n: 1};
2.b指向 a指向的这个 {n: 1} ---> var b = a;
3.计算 a.x = (a = {n: 2}); a.x的值是 后面值的结果,后面的值先不管。此时 a.x = (某个值),是先计算的。a.x 这个a 指向并没有被 改变
所以. a.x 里面的a仍然是原来的 {n: 1};a.x里面的值是后面( a = {n: 2})这个结果的返回值。这个返回值是 {n: 2};
4.所以拆分成a.x = { n: 2 }; 然后原来的a的值被 a = {n: 2},b是对原来对象的引用; a 最后赋值的结果是a = {n: 2};
所以。a.x是underfined,因为新的a里面并没有 x这个属性
所以我觉得这个赋值运算的结果,a = {n: 2}这个a并没有更改引用的时候,它的返回值就已经确定了,就先赋值给原来的a.x里面的a了。我只是猜想。。。连等式可能并不会去计算过程,其中所有的值都直接被最后一个等号的值给赋值,其中,引用类型的赋值. 会优先赋值计算。
这个图表示最后的结果,并不能表示赋值过程。

js对象等号赋值的bug的更多相关文章
- js对象结构赋值const {XXX } =this
样例1: const { xxx } = this.state; 上面的写法是es6的写法,其实就相当于: const xxx = this.state.xxx 样例2: const {comment ...
- js对象动态赋值
<view class="movies-template"> <template is="movieListTemplate" data=&q ...
- jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象
这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...
- js对象的直接赋值、浅拷贝与深拷贝
最近Vue项目中写到一个业务,就是需要把对话框的表单中的数据,每次点击提交之后,就存进一个el-table表格中,待多次需要的表单数据都提交进表格之后,再将这个表格提交,实现多个表单数据的同时提交,期 ...
- js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象
我最近在做一个vue + element-UI + vue-resource + vuex项目的时候,遇到了一个对象的问题. 当我们在项目需要 复制一个对象到另一个对象并且 被复制的对象不能受复制后 ...
- JS连等赋值的坑
cnblogs标题: JS连等赋值的坑 关于JS连等赋值有个经典的笔试题: var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x); ...
- JS对象继承篇
JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...
- JS 对象封装的常用方式
JS是一门面向对象语言,其对象是用prototype属性来模拟的,下面,来看看如何封装JS对象. 常规封装 function Person (name,age,sex){ this.name = na ...
- js 对象深复制,创建对象和继承
js 对象深复制,创建对象和继承.主要参考高级编程第三版,总结网上部分资料和自己的代码测试心得.每走一小步,就做一个小结. 1.对象/数组深复制 一般的=号传递的都是对象/数组的引用,如在控制台输入 ...
随机推荐
- 报警视图 报警窗口 报警指示器 的组态 PLC变量 事故信息 MW16 报警确认变量 MW18 转速变量 MW20 温度变量 MW22 用 M17.0 来模拟事故信息的最低位。用PLCSIM 给定温度为800 度 报警视图与报警窗口显示故障
组态报警并用PLCSIM进行仿真 步骤1 : 组态离散变量报警 在PLC 的默认变量表中 创建变量"事故信息" 数据类型是word 绝对地址是MW16 同时建立 报警确认变量 MW ...
- Ubuntu的妥协将支持精选的32位应用
据外媒Tom's hardware,Ubuntu开发人员Canonical在早先的时候宣布Ubuntu 19.10将不再更新32位软件包和应用程序,引来了诸多应用开发者的不满.现在,Ubuntu方面宣 ...
- 新闻网大数据实时分析可视化系统项目——7、Kafka分布式集群部署
Kafka是由LinkedIn开发的一个分布式的消息系统,使用Scala编写,它以可水平扩展和高吞吐率而被广泛使用.目前越来越多的开源分布式处理系统如Cloudera.Apache Storm.Spa ...
- 六、ibatis1.2.8查询性能优化,实现百万数据zip导出
经测试发现将查询的结果100万数据(池子中共有大概14亿的数据)写入Excle文件并进行压缩导出zip文件最耗时的地方竟然在查询,因此本篇文章主要是针对如何在spring+ibatis1.2.8中优化 ...
- 四、java基础-面向过程_对象_类中可出现的因素
1.面向过程和面向对象区别: 1)面向过程:开发一个应用程序.一个项目,必须先了解整个过程,了解各个步骤.模块间的因果关系,使的面向过程方式去开发程序时,代码和代码之间的关联程度是非常强.所以其中任何 ...
- 【MAVEN】maven项目下载更新pom jar包速度慢 解决方案
1·下载安装 最新版本的maven https://maven.apache.org/download.cgi 2·速度慢的主要原因是因为默认setting.xml里配置的国外的 maven 数据源 ...
- SciPy 基础功能
章节 SciPy 介绍 SciPy 安装 SciPy 基础功能 SciPy 特殊函数 SciPy k均值聚类 SciPy 常量 SciPy fftpack(傅里叶变换) SciPy 积分 SciPy ...
- JavaScript 环境污染
定义全局变量有 3 种方式: 在任何函数体外直接使用 var 语句声明. var f = 'value1'; 直接添加属性到全局对象上.在 Web 浏览器中,全局作用域对象为 window. wind ...
- Vue中 onmouseenter,onmouseleave,onmouseover,onmouseout的区别
今天在学Vue视频的时候,提到了这四个触发事件,我就想做下笔记: 1.onmouseenter和onmouseleave是一组:当鼠标进入指定区域的时候触发,但是不支持冒泡,进入或者离开子组件都不触发 ...
- 查看 Secret【转】
可以通过 kubectl get secret 查看存在的 secret. 显示有两个数据条目,kubectl describe secret 查看条目的 Key: 如果还想查看 Value,可以用 ...