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的更多相关文章

  1. js对象结构赋值const {XXX } =this

    样例1: const { xxx } = this.state; 上面的写法是es6的写法,其实就相当于: const xxx = this.state.xxx 样例2: const {comment ...

  2. js对象动态赋值

    <view class="movies-template"> <template is="movieListTemplate" data=&q ...

  3. jquery实现点击展开列表同时隐藏其他列表 js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    这篇文章主要介绍了jquery实现点击展开列表同时隐藏其他列表的方法,涉及jquery鼠标事件及节点的遍历与属性操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jquery实现点击 ...

  4. js对象的直接赋值、浅拷贝与深拷贝

    最近Vue项目中写到一个业务,就是需要把对话框的表单中的数据,每次点击提交之后,就存进一个el-table表格中,待多次需要的表单数据都提交进表格之后,再将这个表格提交,实现多个表单数据的同时提交,期 ...

  5. js 对象操作 对象原型操作 把一个对象A赋值给另一个对象B 并且对象B 修改 不会影响 A对象

    我最近在做一个vue + element-UI + vue-resource + vuex项目的时候,遇到了一个对象的问题. 当我们在项目需要 复制一个对象到另一个对象并且  被复制的对象不能受复制后 ...

  6. JS连等赋值的坑

    cnblogs标题: JS连等赋值的坑 关于JS连等赋值有个经典的笔试题: var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x); ...

  7. JS对象继承篇

    JS对象继承篇 ECMAScript只支持实现继承,而且其实现继承主要是依靠原型链来实现的 原型链 其基本思路是利用原型让一个引用类型继承另一个引用类型的属性和方法 function Person() ...

  8. JS 对象封装的常用方式

    JS是一门面向对象语言,其对象是用prototype属性来模拟的,下面,来看看如何封装JS对象. 常规封装 function Person (name,age,sex){ this.name = na ...

  9. js 对象深复制,创建对象和继承

    js 对象深复制,创建对象和继承.主要参考高级编程第三版,总结网上部分资料和自己的代码测试心得.每走一小步,就做一个小结. 1.对象/数组深复制 一般的=号传递的都是对象/数组的引用,如在控制台输入 ...

随机推荐

  1. Linux下搭建一个nginx+2tomcat负载均衡环境(转)

    一.安装tomcat 1.将tomcat安装包上传到Linux下: 2.解压2个tomcat,并分别修改名称: 1).解压命令:unzip 2).修改用户名:mv 3.分别修改两个tomcat的端口号 ...

  2. Java对象根据属性排序

    参考:https://blog.csdn.net/wangtaocsdn/article/details/71500500

  3. Percona XtraBackup不锁库搭建slave数据库-基于GTID

    Percona XtraBackup不锁库搭建slave数据库-基于GTID 1.下载安装epel源并安装 wget http://ftp.cuhk.edu.hk/pub/linux/fedora-e ...

  4. jQuery EasyUI window窗口实例

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  5. Vue 集成easyUI

    原 Vue 集成easyUI https://blog.csdn.net/m0_37948170/article/details/84960320   参考vue官网用cli创建了Vue项目之后: n ...

  6. Oracle查看正在执行的存储过程

    正在执行的存储过程 select owner,name from v$db_object_cache where type like '%PROCE%' and locks >0 and pin ...

  7. 097、Java中String类之修改字符串对象引用

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  8. leetcode814 Binary Tree Pruning

    """ We are given the head node root of a binary tree, where additionally every node's ...

  9. i春秋-百度杯九月场-YeserCMS(cmseasy的UpdateXML注入漏洞)

    学习了大佬们的操作才做出来,记录一次菜鸡的无能为力. tips:flag在网站根目录下的flag.php中.我们的目标就是flag.php了. 题目说是心的CMS:YeserCMS,然而百度一下,出来 ...

  10. Spring声明式事物原理分析

    基础准备 pom <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www. ...