美文网首页
简述普通类型和对象的区别

简述普通类型和对象的区别

作者: 猫晓封浪 | 来源:发表于2018-08-11 16:39 被阅读0次

简单类型:number、string、boolean、undefined、null、symbol
复杂类型(引用类型):object
要了解这个问题,我们首先要知道内存。
当我们打开浏览器的时候,浏览器会占用一些内存,浏览器会把这些内存分布给网页,网页再讲内存分配给页面渲染器、网络模块、浏览器外壳和 JS 引擎(V8引擎)等。我们学习JS主要研究JS引擎部分。
JS引擎将得到的内存分成代码区和数据区。我们要了解普通类型和对象的区别,所以我们只研究数据区。
在数据区分为栈内存Stack)和堆内存Heap)。简单类型的数据直接存在 Stack 里。复杂类型的数据是把 Heap 地址存在 Stack 里。

下面我们通过几个面试题来更加深入了解栈和堆

为了更方便的解题,我们引入内存图的概念。

  • 第一题
var a = 1
var b = a
b = 2
请问 a 显示是几?  

当执行到var b=a时,内存中可以表示为:


此时执行b=2直接将 2 的值放在 b 的stack中,如: 所以b的改变并没有影响到aa的结果还是1
  • 第二题
var a = {name: 'a'}
var b = a
b = {name: 'b'}
请问现在 a.name 是多少?

从上图可知对于复杂类型,在栈(Stack)上存储的是一个地址,在堆(Heap)上存储的是数据。按照地址有指向关系。运行到var b = a时,是将a中的addr1地址复制一份放到bstack中。当运行b = {name: 'b'}时是在heap中重新开出一块放置{name: 'b'}且地址为2,并且b的地址更改为addr2。这个时候b指向addr1的作废,重新指向2。所以这个时候a还是原来的。即a.name的结果是a
  • 第三题
var a = {name: 'a'}
var b = a
b.name = 'b'
请问现在 a.name 是多少?

当运行至var b = aab的指向相同,此时运行b.name = 'b',更改了heap中地址1中的信息,如图所示。所以这个时候a.name的结果是{name: 'b'}
  • 第四题
var a = {name: 'a'}
var b = a
b = null
请问现在 a 是什么?

当运行至var b = aab的指向相同,这个时候运行b = null(这是一个普通类型,直接将null的值在stack中给向b),所以导致bheap中的指向消失并没有改变heap内存中数据。所以a的结果还是本身,即{name: 'a'}

小结

JS在数据区分为栈内存(Stack)和堆内存(Heap)。普通类型只是在栈内存中运行,而对象的是堆内存中存储数据在栈内存中存储heap地址,同过引用(指向)简历关系。
值类型之间传递的是值,引用类型之间传递的是地址(引用)。
值类型作为函数的参数传递的是值,引用类型作为函数的参数传递的是地址(引用)。

深拷贝和浅拷贝

var a = 1
var b = a
b = 2 

上边的代码中当对b改变a完全不受影响,即为深拷贝。
对于简单类型中,赋值就是深拷贝。
对于复杂类型(对象),就有深拷贝和浅拷贝一说。因为复杂类型存在引用关系,所以在更改其中一个对象时,两者的指向还是相同的,即存在一个发生变化,另个也一起变化。

GC 垃圾回收机制

如果一个对象没有被引用,就是垃圾,将被回收。


图中例1中被圈起来的就是垃圾,会被回收。
例2中function(){}不是垃圾,因为它被其它所引用。
附:易踩坑面试题

注:其中黄框中在heap中产生一个地址81的对象,蓝框是将这个地址复制给a.x。所以alert(b.x)是一个对象转为字符串的形式。

相关文章

  • 简述普通类型和对象的区别

    简单类型:number、string、boolean、undefined、null、symbol复杂类型(引用类型...

  • 普通类型和对象的区别

    本篇文章将主要介绍普通类型与对象在内存中储存方式的不同,也正因为这种不同,导致普通类型和对象在JS的使用中存在着一...

  • 普通类型和对象的区别

    JavaScript的7种数据类型中,number、string、boolean、null、undefined、s...

  • 普通类型和对象的区别

    简单类型:number、string、boolean、undefined、null、symbol复杂类型(引用类型...

  • 普通类型和对象的区别

    1.Chrome 打开即占用 1G 内存2.Chrome 各每个网页分配一定数量的内存3.这些内存要分给页面渲染器...

  • 普通类型和对象的区别

    JavaScript的7种数据类型中,number、string、boolean、null、undefined、s...

  • 普通类型和对象的区别

    JavaScript里的数据类型分为7种,分别为:number、string、boolean、null、undef...

  • 普通类型和对象的区别

    1 其他类型变字符串 方法一:String( )函数(这是一个全局函数) 方法二:x + " "(与空字符串相加)...

  • 2018-07-05

    javascript 普通类型和对象的区别 1、基本数据类型和引用数据类型ECMAScript包括两个不同类型的值...

  • 基本类型和对象的区别

    这篇文章主要介绍JS中基本类型与对象之间的区别。 对象包括普通对象,数组以及函数。普通对象是基本类型的混合,同时其...

网友评论

      本文标题:简述普通类型和对象的区别

      本文链接:https://www.haomeiwen.com/subject/csddbftx.html