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 相关文章推荐
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
Node.js中的模块机制学习笔记
Nov 04 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
表单验证插件Validation应用的实例讲解
Oct 10 Javascript
JavaScript中获取时间的函数集
Aug 16 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
理解 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
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
php fsockopen伪造post与get方法的详解
2013/06/14 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
jQuery子窗体取得父窗体元素的方法
2015/05/11 Javascript
原生JS和JQuery动态添加、删除表格行的方法
2015/05/28 Javascript
详解JavaScript的while循环的使用
2015/06/03 Javascript
JavaScript学习总结之JS、AJAX应用
2016/01/29 Javascript
AngularJs定时器$interval 和 $timeout详解
2017/05/25 Javascript
jQuery判断网页是否已经滚动到浏览器底部的实现方法
2017/10/27 jQuery
Vue.js划分组件的方法
2017/10/29 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
vue内置指令详解
2018/04/03 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
JavaScript中的函数申明、函数表达式、箭头函数
2019/12/06 Javascript
微信小程序实现列表的横向滑动方式
2020/07/15 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
python实现简单爬虫功能的示例
2016/10/24 Python
Python之文字转图片方法
2018/05/10 Python
python实现机器学习之元线性回归
2018/09/06 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Python中的几种矩阵乘法(小结)
2019/07/10 Python
武汉高蓝德国际.net机试
2016/06/24 面试题
房地产开盘策划方案
2014/02/10 职场文书
求职简历自我评价范例
2014/03/12 职场文书
出国英文推荐信
2014/05/10 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
房地产公司工程部经理岗位职责
2015/04/09 职场文书
民事起诉书范本
2015/05/19 职场文书
《圆的周长》教学反思
2016/02/17 职场文书
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js