js中变量的连续赋值(实例讲解)


Posted in Javascript onJuly 08, 2017

今天遇到了一个连续赋值的经典案例,网友们给出的答案也是五花八门,看起来有些繁琐,我也来说说自己的看法。

下面就是这个经典案例:

var a = {n: 1};
var b = a;
a.x = a = {n: 2};

console.log(a);
console.log(b);
console.log(a.x);
console.log(b.x);

我们先来看一下普通连续赋值,即:变量赋值的类型是数据类型值

var a=3;
var b=a=5;
console.log(a);
console.log(b);

一般来说,等号赋值的方向是从右至左,那么上面的代码等同于下面这段代码,那么我们就用下面这段代码来解释上面的代码:

var a=3;//全局变量a被赋值为3
var a=5;
//此时a被重新赋值为5
var b=a;
//将a的值赋给全局变量b
console.log(a);//a最终的值就是第二次被赋的值:5
console.log(b);//按照代码执行顺序b的值也是:5

上面的小案例用来抛砖引玉,现在我们来分析这个经典案例:

var a = {n: 1};//a第一次被赋值,是一个引用类型值,请记得变量赋值为引用类型值的时候,通过变量改变这个对象的时候,对象本身也发生了变化
var b = a;//b被赋值为a,因此b就是对象{n:1}

a.x = a = {n: 2};
//这个赋值与之前的简单案例有所不同,a.x指的是给a添加一个x属性,在js的运算中“.”和"="运算符同时出现,会先执行"."运算
//因此,赋值顺序被改变了,是先给a.x赋值,再给a赋值
//就是先执行:a.x={n:2},注意这里a并未改变,是给a的x属性赋值为{n:2},a还是{n:1}
//再回到我代码中的第一句话,这个赋值行为,改变了{n:1}这个对象,即给它增加了名为x的属性
//再执行a={n:2},这是变量a不再是对象{n:1},而被重新赋值为一个新的对象{n:2};

console.log(a);//自然此时a是对象{n:2}
console.log(b);//a的二次赋值,并没有影响b,b还是对象{n:1},但是由于a在重新赋值之前,给{n:1}这个对象,增加了一个x属性,因此,这时的b已经有了x属性
console.log(a.x);//{n:2}对象没有x属性,所以结果是undefined
console.log(b.x);//综上所述,这个结果是{n:2}

以上这篇js中变量的连续赋值(实例讲解)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
屏蔽Flash右键信息的js代码
Jan 17 Javascript
javaScript 关闭浏览器 (不弹出提示框)
Jan 31 Javascript
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
js控制的回到页面顶端goTop的代码实现
Mar 20 Javascript
JS 按钮点击触发(兼容IE、火狐)
Aug 07 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
jquery 中ajax执行的优先级
Jun 22 Javascript
JavaScript模块化开发之SeaJS
Dec 13 Javascript
js实现文字滚动效果
Mar 03 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 #Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 #Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 #Javascript
JS仿QQ好友列表展开、收缩功能(第二篇)
Jul 07 #Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 #Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 #Javascript
JS实现搜索关键词的智能提示功能
Jul 07 #Javascript
You might like
文件上传类
2006/10/09 PHP
PHP实现获取域名的方法小结
2014/11/05 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP树的深度编历生成迷宫及A*自动寻路算法实例分析
2015/03/10 PHP
php视频拍照上传头像功能实现代码分享
2015/10/08 PHP
清空上传控件input file的值
2010/07/03 Javascript
js查错流程归纳
2012/05/04 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
实现React单页应用的方法详解
2016/08/02 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
2018/08/17 Javascript
在vue中阻止浏览器后退的实例
2019/11/06 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
Python迭代器和生成器介绍
2015/03/06 Python
python图像处理之反色实现方法
2015/05/30 Python
以一个投票程序的实例来讲解Python的Django框架使用
2016/02/18 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Python生成器以及应用实例解析
2018/02/08 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
Python socket实现的文件下载器功能示例
2019/11/15 Python
django数据模型on_delete, db_constraint的使用详解
2019/12/24 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
实习生自我评价
2014/01/18 职场文书
境外导游求职信
2014/02/27 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
希特勒的演讲稿
2014/05/23 职场文书
教师自我剖析材料(四风问题)
2014/09/30 职场文书
银行先进个人总结
2015/02/15 职场文书
2016年基层党支部书记公开承诺书
2016/03/25 职场文书