阅读 538

js---值类型和引用类型!小伙伴们,耐心看哦!

首先我们来了解一下js中的数据类型(废话很多!但应该解释的挺清楚吧!)

js八种数据类型:Number String Boolean undefined null Object Bigint Symbol

基本的值类型有: null,undefined,boolean,number,string,symbol

引用类型有: object

常见的引用类型如:array,function

在开始讲这两中类型之前,我们先来普及一下什么语言类型的强弱和动静态。那么什么叫强类型?弱类型语言?什么是动态?静态?语言

使用之前就需要确认其变量类型的称为静态语言

在运行过程中需要检查数据类型的语言称为动态语言

偷偷发生转换的操作 --隐式类型转换,支持隐式类型转换的语言称为弱类型语言

在使用这些数据类型我们也要知道这些类型存储空间的位置(分为栈空间和堆空间)

image.png

image.png

数值类型:

function foo(){
    var a = 1
    var b = a
    a = 2
    console.log(a);//2
    console.log(b);//1
}
foo()
复制代码

先执行foo()然后执行a=1(预编译过程咱们就先忽略),这时栈中就有了数据:

image.png

在执行b=a,b指向a的值

image.png

然后a=2,把a的值改为2

image.png

输出就直接在栈中寻找a和b的值!

引用类型:

function foo() {
    var a = 'login'
    var b = a
    c = { name: 'htable' }//这是一个对象Object
    var d = c
  }
  foo()
复制代码

先执行foo()然后执行a=login(预编译过程咱们就先忽略),这时栈中就有了数据:

image.png

在执行b=a,b指向a的值

image.png

在执行 c = { name: 'htable' },把c存入栈中,这是因为c是一个Object类型(引用类型)所以值是存在堆中

image.png

最后执行d=c,d在栈中存放c的值

image.png

再看一个引用类型代码

function bar(){
    var c = {name:'佳鑫'}
    var d = c
    c.name= '刘老大'
    console.log(c.name);//刘老大
    console.log(d.name);//刘老大
}
foo()
复制代码

其他步骤就由大家推一下: image.png 我们直接看c.name='刘老大',在堆中把c的值改为刘老大,栈中不变

image.png

所以最后输出的值都为刘老大

总结一下值类型和引用类型

  1. 对象类型是存放在堆空间的,在栈空间只保留了对象的引用地址
  2. 值赋值会完全复制变量的值,而引用类型的赋值是复制引用的地址

下面我们来思考一个问题:我们为什么要引入一个堆结构来存放数据?

大家都应该知道栈结构的特点是:先进去的后出来,所以当我们把所有的类型都存在栈里面,就会影响上下文的切换速度。好比你和一个女生出去看电影(你提前买好了票,不过先去吃饭)女生力量小,提不了多少东西,就把她所有的东西放在自己包里,把包想象成一个栈,所有东西往包里放,当你们去看电影的时候,要票,就得往包里翻(假设东西很多)当你找到票时。电影已经放完了,这时你是不是失去了一个女朋友?

总的来说:

  1. js引擎需要用栈来维护程序执行期间的上下文状态,如果栈过大,所有数据都放在栈里面,会影响上下文的切换效率
  2. 堆存储的缺点是分配内存和回收内存都会占用一定时间
文章分类
前端
文章标签