也许这样理解JavaScript连续赋值更加简单明了一些

抽象苔藓
• 阅读 803

最近发现很多同学的博客里都会解释js连续赋值问题,各种概念辈出,特别是对于不理解的同学来说,更加一头雾水,我这里做个简单解释,也许不懂的一看就明白了。

先抛出一个问题:

var a = {c:1}         //第一步
var b = a;            //第二步
a.x = b.y = b = {c:2} //第三步
console.log(a)        // {c:1,x:{c:2},y:{c:2}}
console.log(b)        // {c:2}

第一步,第二步相信大家都很好理解,但是第三步是什么鬼,现实中基本上很难遇到,而且也不推荐这么写,好好的赋值不行么,干嘛要搞事情?对,话虽这么说,但是这毕竟是考验大家对赋值的理解嘛。在拆解以上问题的时候,大伙儿要先明白两个概念

1、引用数据细节

给一个变量赋值的时候,若“=”右侧是基本数据类型(Boolean String Number Null Undefined),就是真的“赋值”了;若“=”右侧是复合型数据(Array Object),则是数据的引用,也就是“指向”不一样而已

2、赋值数据可拆分成两步

例如:var d = 1 其实相当于 var d;d = 1;

理解以上两个概念后,我们以图示演示第一步、第二步执行完毕的结果
也许这样理解JavaScript连续赋值更加简单明了一些
执行到第二步是以上结果,相信不难理解。
然后我们再将第三步拆解为步骤甲、乙、丙

甲步骤:

a.x = undefined
b.y = undefined

图示
也许这样理解JavaScript连续赋值更加简单明了一些

乙步骤:

这个时候b的指向发生了变化

b = {c:2}

图示:
也许这样理解JavaScript连续赋值更加简单明了一些

丙步骤:

最后将b指向的内容分别赋值给a.x a.y。这个时候问题的难点就来了。不是b.y么,为毛变成a.y了? 逗我玩呢是不?我们往上看,步骤乙,这个时候a和b都是指向同一个内存地址,谁的x谁的y没有区别,大家是好兄弟,共用的。

a.x = {c:2}
a.y = {c:2}

图示:
也许这样理解JavaScript连续赋值更加简单明了一些

是不是很简单?如果你还是不理解,那么哥只能给你一个建议:吃饭睡觉上厕所,夜里别想妹子,只要脑袋是清醒的,就思考这个问题。不用两天,你肯定可以搞懂。
PS:还搞不懂咋整?还搞不懂你打我(打不到)

点赞
收藏
评论区
推荐文章
Symbol卢 Symbol卢
4年前
秒懂js作用域与作用域链
JavaScript中有一个被称为作用域(Scope)的特性。虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,本文我会尽我所能用最简单的方式来解释作用域和作用域链,希望大家有所收获!好了下面开始我们的正文作用域常见的解释(什么是作用域)1.一段程序代码中所用到的名字并不总是有效,而限定它的可用性的范围就是这个名字的作用域;2.作用域规定了
郜小超 郜小超
4年前
面试问题总结(持续更新中。。。)
1.letconstvar的区别在JavaScript中,有三个关键字可用于声明一个变量,并且每个关键字都有其不同之处。分别var,let和const。一个简单粗暴的解释:使用const关键字声明的变量不能被重新赋值,let而且var可以。也可以这么说:const只可以声明一个常量(js中一旦被定义就无法再被修改的变量,称之为常量)。eg:
待兔 待兔
10个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
九路 九路
4年前
iOS 图片和文字一起上传
最近在忙着开发公司的一个项目,中间遇到很多坑,对于图片的上传在这里我也不做太多的介绍,网上各种大神的资料都有的,今天我主要说一下我再上传图片和文字的时候遇到的一些坑(图文上传我们很多时候都会遇到,遇到多了网上找的各种博客,解决了图文一起上传的问题)废话不多说,直接上代码:/上传图文/(void)upLoadImageViewToS
顺心 顺心
4年前
带你全面了解 Flutter,它好在哪里?它的坑在哪里? 应该怎么学?
回顾了这段时间解答关于Flutter的各种问题后,我突然发现很多刚刚接触Flutter的萌新,对于Flutter都有着不同程度的误解,而每次重复的解释又十分浪费时间,最终我还是决定写篇文章来做个总结。内容有点长,但是相信能帮你更好地去认识Flutter。Flutter的起源Flutter的诞生其实比较有意思,Flutter
希望的天 希望的天
4年前
RecyclerView基础用法
是一款非常强大的widget,它可以帮助您灵活地显示列表数据。当我开始学习RecyclerView的时候,我发现对于复杂的列表界面有很多资源可以参考,但是对于简单的列表展现就鲜有可参考的资源了。虽然RecyclerView的组成结构乍一看有些复杂,但是深入理解以后您会发现它其实非常简单明了。本文会通过创建一个简单的RecyclerView实现一
Stella981 Stella981
3年前
JavaScript易错知识点整理
前言本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES6的知识点。JavaScript知识点1.变量作用域vara1;functio
Stella981 Stella981
3年前
ES2019 中的 JavaScript 新特性
JavaScript从成立之初就已经走了很长一段路,提供了许多新的功能,这些功能是专门设计来使该语言更加人性化和提升效率。以下是我最近发现的一些有趣的JavaScript新增内容。其中一些功能已在Node,Chrome,Firefox和Safari中可用,而其他功能仍处于建议阶段。Optionalchaining(可选链)
Stella981 Stella981
3年前
JavaScript 非常重要的几个概念
JavaScript是一门比较复杂的语言。如果你是一名JavaScript开发人员,不管处于什么样的水平,都有必要了解JavaScript的基本概念。小编最近的工作涉及到JavaScript,于是本文就介绍了几个非常重要的JavaScript概念,但绝对不是说JavaScript开发人员只需要知道这些就可以了。01变量赋值(值与引用)Java
Wesley13 Wesley13
3年前
JS篇(004)
答案:1.脚本语言。JavaScript是一种解释型的脚本语言,C、C等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。2.基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。3.简单。JavaScript语言中采用的是弱类型的变量
Wesley13 Wesley13
3年前
35岁是技术人的天花板吗?
35岁是技术人的天花板吗?我非常不认同“35岁现象”,人类没有那么脆弱,人类的智力不会说是35岁之后就停止发展,更不是说35岁之后就没有机会了。马云35岁还在教书,任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢?所以35岁根本就不是一个问题,我今年已经37岁了,我发现我才刚刚找到自己的节奏,刚刚上路。