javascript连等赋值问题(这是从segmentfault转过来的一个问题)

点点乐淘淘      2022-02-09     738

关键词:

var a = {n:1};  
var b = a; // 持有a,以回查  
a.x = a = {n:2};  
alert(a.x);// --> undefined  
alert(b.x);// --> {n:2}

对于这段代码,大部分人的理解是这样的:========错误的理解=======

对于 a.x = a = {n:2},大部分人的思路应该是:

  1. 先把 {n:2} 赋值给 a
  2. 然后再创建 a.x,将 {n:2} 再赋值给 a.x

这样似乎确实说不通 a.x 的值是 undefined,因为 a.x 确实是被赋值了的啊。
可是事实上,a.x 的值却是 undefined。

再来看一下这个: a = a.x = {n:2}的话,按原先的思路应该是:

  1. 先把 {n:2} 赋值给 a.x,那么也就相当于 b.x = {n:2} 啦
  2. 再把 a 重新指向 {n:2}。那么这是后 a.x 的值确实是 undefined,a 对象 {n:2} 中就没有 x 属性嘛。

按这个思路,上述两种方式的结果应该是不同的。但事实却是a = a.x = {n:2}a.x = a = {n:2}的结果是一致的。所以很明显这个思路不对。

===========================正确的理解是这样的===================

解析器在接受到 a = a.x = {n:2} 这样的语句后,会这样做:

  1. 找到 a 和 a.x 的指针。如果已有指针,那么不改变它。如果没有指针,即那个变量还没被申明,那么就创建它,指向 null。
    a 是有指针的,指向 {n:1};a.x 是没有指针的,所以创建它,指向 null。
  2. 然后把上面找到的指针,都指向最右侧赋的那个值,即 {n:2}

所以执行以后,就有了如下的变量关系图。大家可以慢慢体会下,想通了就很简单的。

技术分享

 

如果大家觉得这种理解比较难,可以先按下面一种方式理解,等理解了再过来看看上面的解释

赋值是从右到左的,但不要被绕晕了, 其实很简单,从运算符优先级来考虑

a.x = a = {n:2};

.运算优先于=赋值运算,因此此处赋值可理解为

  1. 声明a对象中的x属性,用于赋值,此时b指向a,同时拥有未赋值的x属性
  2. 对a对象赋值,此时变量名a改变指向到对象{n:2}
  3. 对步骤1中x属性,也即a原指向对象的x属性,也即b指向对象的x属性赋值

赋值结果:

a => {n: 2}
b => {n: 1, x: {n: 2 } }    

关于javascript中连等赋值那点事

今天看了前端网上关于JS的题目,其中有一道题目挺有意思的。如下1vara=b=10;2(function(){3vara=b=20;4})();5console.log(a);6console.log(b);7问:输出的a=?b=?你们想到的结果是什么?也许绝大多数人和我一样认为是20、20。然而答案是10、20,别急... 查看详情

js连等赋值

 引用:http://www.iteye.com/topic/785445   https://segmentfault.com/q/1010000002637728 这是一个问题1vara={n:1};//a指向了一块地址{n:1};2varb=a;//持有a,以回查//b对a的引用,也指向那块地址{n:1};3a.x=a={n:2};4alert(a.x);//--> 查看详情

java连等赋值问题

阅读目录一、描述二、分析三、总结一、描述关于Java连等赋值,例如a=b=c;我们知道它是从右往左依次赋值的,其结果大致可以拆分为b=c;a=b;,但是当栈中没有持有变量的引用时,则会出现问题,例如:publicclassNode{inti;Noden;Node(inti... 查看详情

从 PHP 到 JavaScript 的赋值

】从PHP到JavaScript的赋值【英文标题】:ValueassignmentfromPHPtoJavaScript【发布时间】:2010-10-0209:20:14【问题描述】:我正在使用jQuery、JavaScript和PHP。我的Ajax.php文件只显示数据。文件test.php已将值分配给JavaScript函数。我的问题是我无... 查看详情

MaskRCNN 的 segm IoU 指标从何而来 = 0?

...henceMaskRCNN\'ssegmIoUmetrics=0?【发布时间】:2021-12-1202:44:45【问题描述】:在我的多类实例分割自定义数据集上训练MaskRCNN时,输入格式为:image-)shape:torch.Size([3,850,600]),dtype:torch.float32,min:tensor(0.0431),max:tensor( 查看详情

javascript基础1

  本篇适合javascript新手或者学了前端一段时间,对js概念不清晰的同学~~。学习目的本文针对javascript基础薄弱的同学,可以加深对javascript的理解。本文将讲述以下几点对于初学者开说javascript(有的是大部分语言都有的)的坑... 查看详情

Javascript:为数组数据赋值

】Javascript:为数组数据赋值【英文标题】:Javascript:assignvalueonarraysdata【发布时间】:2017-10-1215:32:27【问题描述】:这是我的代码functiongotData(data)result=data.val()consturls_kws=Object.keys(result).filter(key=>result[key].last_res>10)varkeywo 查看详情

java示例代码_从Javascript调用Java代码,并为JSP页面赋值

java示例代码_从Javascript调用Java代码,并为JSP页面赋值 查看详情

在 JavaScript 中,链式赋值可以吗?

】在JavaScript中,链式赋值可以吗?【英文标题】:InJavaScript,ischainedassignmentokay?【发布时间】:2011-03-2404:02:48【问题描述】:我对JS或其语法并不陌生,但有时,该语言的语义有时让我感到困惑。今天上班,有同事提到这个:vara=... 查看详情

javascriptes6-解构赋值

ES6语法:解构赋值本文主要讲解‘解构赋值’相关内容,从两个方面入手:1.什么是结构赋值;2.解构赋值的分类。如图所示:1.什么是ES6解构赋值1.ES6入门标准一书中的定义是:允许按照一定的模式从数组和对象中取值,然后对变量进行赋... 查看详情

javascript------解构赋值

解构赋值从ES6开始,JavaScript引入了解构赋值,可以同时对一组变量进行赋值。什么是解构赋值?我们先看看传统的做法,如何把一个数组的元素分别赋值给几个变量:vararray=[‘hello‘,‘JavaScript‘,‘ES6‘];varx=array[0];vary=array[1];va... 查看详情

javascriptes6-解构赋值(代码片段)

ES6语法:解构赋值本文主要讲解‘解构赋值’相关内容,从两个方面入手:1.什么是结构赋值;2.解构赋值的分类。如图所示:1.什么是ES6解构赋值1.ES6入门标准一书中的定义是:允许按照一定的模式从数组和对象中取值,然后对变量进行赋... 查看详情

对象从数组而不是硬代码中赋值

】对象从数组而不是硬代码中赋值【英文标题】:ObjectAssignvaluesfromarrayratherthanhardcode【发布时间】:2021-07-2923:46:25【问题描述】:我正在尝试按多个属性对数据进行分组并对它们的值求和。这是我按照thisquestion尝试的方法我对这... 查看详情

[javascript]解构赋值详解(代码片段)

文章目录概念数组解构声明分别赋值解构默认值交换变量值解构函数返回的数组忽略返回值(或跳过某一项)赋值数组剩余值给一个变量嵌套数组解构字符串解构对象解构基础对象解构赋值给新变量名解构默认值赋值给... 查看详情

javascript中变量重新赋值和引用重新赋值问题

javascript中经常会遇到这样的问题: vara=3;varb=a;a=5;;//结果为5;;//结果为3; 而在下面的代码中情况却发生了变化: vara=1,b=2,c=3;varArray=[a,b,c];a=5;;  //结果为1,没有发生变化;  vara=1,b=2,c=3;varArray=[a,b,c];Ar 查看详情

Javascript 对象解构赋值是不是使用 const、let 或 var?

】Javascript对象解构赋值是不是使用const、let或var?【英文标题】:DoesaJavascriptObjectDestructureassignmentuseconst,let,orvar?Javascript对象解构赋值是否使用const、let或var?【发布时间】:2017-05-0713:41:20【问题描述】:在ES6/ES2015中,我可以使... 查看详情

javascript中将一个对象赋值给另一个的问题

...bj1 参考技术Bfunction(buyList)function(good)?这两个是函数吗?javascript中函数的定义格式是这样的!functiondisplaymessage()alert("HelloWorld!")di 查看详情

在 Javascript 中使用赋值运算符将一个对象设置为等于另一个对象

】在Javascript中使用赋值运算符将一个对象设置为等于另一个对象【英文标题】:SettingoneobjectequaltoanotherobjectwiththeassignmentoperatorinJavascript【发布时间】:2010-12-2906:15:34【问题描述】:我从C背景开始学习javascript。在javascript中,当... 查看详情