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

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

下面就是这个经典案例：

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中变量的连续赋值(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • js 连续赋值的简单实现

    js 连续赋值的简单实现

    无意中网上发现的这个问题,预想的结果和真实的结果大相径庭. var a={n:1} var b=a; a.x=a={n:2} console.log(a.x); console.log(b.x); undefined Object{n:2} 要是拆开来看,结果就是我所想的那样 var a={n:1} var b=a; a={n:2}: a.x={n:2} console.log(a.x);//Object{n:2}console.log(b.x);//undefined 分析: a.x=a={n

  • javascript连续赋值问题

    javascript连续赋值问题

    前几天在搜索面试题时发现了这么一段代码,执行完后感觉完全不与所想的一样 var a = { n : 1 }; var b = a; a.x = a = {n : 2}; console.log(a.x); console.log(b.x); 输出结果为: undefined [object Object] 一开始以为语句应该是先给 a 赋值 {n : 2} , 然后再将 a.x 赋值 {n : 2} ; 但事实却不是那样,于是改动了一下代码,添加几条log var test; var a = {

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

    今天遇到了一个连续赋值的经典案例,网友们给出的答案也是五花八门,看起来有些繁琐,我也来说说自己的看法. 下面就是这个经典案例: 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

  • js中arguments的用法(实例讲解)

    如下所示: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8&qu

  • js实现随机点名系统(实例讲解)

    废话不多说,直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>随机点名</title> <style type="text/css"> td{ text-align: center; } </style> </head> <body

  • js排序与重组的实例讲解

    js排序与重组的实例讲解

    前几天同学发给我一个问题,思路想整理一下,也供大家参考.实际上这道题本质就是考察的是去重与排序的问题.好了闲话少说,上题. function input(req){ if(req<=100){ var arr=[],arr1=[]; for(var i=0;i<req;i++){ var num=parseInt(Math.random()*(1000-1)+1); arr.push(num); if(arr1.indexOf(arr[i])==-1) arr1.push(arr[i]); }

  • jQuery获取table表中的td标签(实例讲解)

    首先我来介绍一下我遇到的问题 1.当有一个table表包含了<tr>标签,<td>标签,大致可以认为是这样的: <tr> <td> @scene.ID </td> <td> @scene.SceneName </td> <td> @scene.QRUrl </td> <td> @scene.LocalUrl </td> <td> <!--如果有图片,展示图片

  • js 发布订阅模式的实例讲解

    废话不多说,直接上代码 //发布订阅模式 class EventEmiter{ constructor(){ //维护一个对象 this._events={ } } on(eventName,callback){ if( this._events[eventName]){ //如果有就放一个新的 this._events[eventName].push(callback); }else{ //如果没有就创建一个数组 this._events[eventName]=[callback] } } e

  • Java成员变量的隐藏(实例讲解)

    Java成员变量的隐藏(实例讲解)

    一.如果子类与父类中有一个相同名称的成员变量,那么子类的成员变量会不会覆盖父类的成员变量?我们看下在的例子: public class A { public int x=10; } public class B extends A { public int x=20; } public class C { public static void main(String[] args) { A a=new B(); System.out.println(a.x); //1 B b=new B();

  • vue项目中使用ueditor的实例讲解

    以vue-cli生成的项目为例 1.static文件夹下先放入ueditor文件 2.index.html添加如下代码 <script type="text/javascript" charset="utf-8" src="static/ueditor/ueditor.config.js"></script> <script type="text/javascript" charset="

  • java中调用super的实例讲解

    在java中类之间也是有着继承关系的,就我们之前有提到不少父类与子类的一些问题. 讲的以子类的调用为主,那么有小伙伴知道父类的调用方法吗?这里我们需要借助关键字super来实现.下面我们就来讲讲super的概念.调用方法.应用范围,帮助大家找到使用supei调用父类的方法. 1.概念 super关键字用于引用使用该关键字的类的超类. 作为独立语句出现的 super 表示调用超类的构造方法. 2.调用超类方法 super.<methodName>() 只有在如下情况中才需要采用这种用法:要调用在

  • requests在python中发送请求的实例讲解

    当我们想给服务器发送一些请求时,可以选择requests库来实现.相较于其它库而言,这种库的使用还是非常适合新手使用的.本篇要讲的是requests.get请求方法,这里需要先对get请求时的一些参数进行学习,在掌握了基本的用法后,可以就下面的requests.get请求实例进一步的探究. 1.get请求的部分参数 (1) url(请求的url地址,必需 ) import requests url="http://www.baidu.com" resp=requests.get(url

随机推荐