js-由深拷贝浅拷贝,传值与传址-引发的关于堆(“heap”)栈(“stack”)的思考!

前端面试一定会都遇到输出值的问题,并且不止一道题而是几乎两页纸。这类问题大多都是看一个前端开发者的js基础,数据类型和变量作用域。今天我们就堆栈的概念来看看js中的变量是如何存储的。

Js的数据类型可分为 值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)。和 引用数据类型:对象(Object)、数组(Array)、函数(Function)。

由于栈和堆的缓存设计各异所以存储的数据也有所不同。

栈使用的是一级缓存,内置在CPU内部并与CPU同速运行,效率高,但存储空间小。适合存储简单的数据段,占据固定空间大小的基本数据类型(String,Number,Boolean,Null,Undefined)。

堆存放在二级缓存中,是位于CPU与内存之间的临时存储器,比一级缓存容量更大,但处理速度更慢。适合存储大小不定,构造复杂的引用类型值(Function,Array,Object)。

传值&传址

传值就是变量之间值的传递与引用,传址是相对于引用类型而言。如例:


js-由深拷贝浅拷贝,传值与传址-引发的关于堆(“heap”)栈(“stack”)的思考!_第1张图片

会输出什么呢?

按照js自上而下的执行顺序我们期望得到<5,1,[2],[0],false>而事实却是这样的<5,1,[2],[2],true>。

例子1:a为Number基本类型,存在栈内存中。将a赋值给b也就是将a的值赋值给b,所以b=1;改变a的值对b不会有影响。

例子2:arr为Array引用类型,存储在堆内存中,栈内存储的是arr(Array)在堆内存空间的引用指针。将arr赋值给arr1也就是将arr在堆内存空间的引用指针赋值给arr1,所以他们都指向了同一个存储空间的相同数据,固 arr === arr1。


js-由深拷贝浅拷贝,传值与传址-引发的关于堆(“heap”)栈(“stack”)的思考!_第2张图片

那么同样是存储为什么会有存值和存址之分?这就要从栈和堆的存储方式说起。

前面提到栈使用的是一级缓存,一级缓存被内置在CPU内部并与CPU同速运行,容量小,速度快,更适合占据固定空间的简单数据段,故而存值。而堆使用的是二级缓存,二级缓存比一级缓存速度慢,容量大,是一级缓存和内存之间临时交换数据的地方。适合存储大小不固定,构造复杂的引用类型值。所以当我们在程序中调用引用类型时,是通过栈内存中的引用指针在堆内存中查找到相应的存储数据。

现在回看arr的例子,先var申明arr,再申明arr1并赋值为arr,再改变arr的值,然后分别调用输出了arr和arr1。从执行顺序考虑只是改变了arr的值,arr1是不受影响的,但是在arr1 = arr的时候我们只是传递了引用类型再堆内存中的引用指针。所以都变了...

假如两个例子同时出现在面试题中,是不是一点疑惑都没有了呢。

深拷贝&浅拷贝

我们经常会遇到将对象赋值给另一对象的场景,有时候也会费力去写一些clone的方法,为什么呢?

如上面例子2中我们看到,对象的传递是传址是通过指针的引用,例子中的传递也就是表面上的传址这是浅拷贝。而深拷贝就是申请新的存储空间,将源对象的值循环遍历赋值给目标对象,存入到新的存储空间。

function clone(origin){

    var target = null;

    if(origin instanceof Array){

        target = origin.concat();

    }else{

        target = {};

        for(var item in origin){

            var val = origin[item];

            target[item] = typeof val == 'object'?clone(val):val;

        }

    }

    return target;

}

而ES6也给我们提供了更好用的方法 Object.assign(target, ...source)用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它返回目标对象。这里需要注意假如源对象的属性值是一个对象的引用,那么它也只指向那个引用。所以要慎用。


当然还有一种方法也不得不提就是jQuery的$.extend()与Object.assign有着异曲同工之妙,但$.extend多了首个参数deep从而实现了深拷贝如列:


 第一次试着写这种长篇大论,可能漏洞百出,还请多多指正。文章没有深层意义,仅供参考,以免将您带入歧途。一些堆栈,一级缓存,二级缓存的知识也都是参照百度百科,如果感兴趣的可以自己去研究研究。

你可能感兴趣的:(js-由深拷贝浅拷贝,传值与传址-引发的关于堆(“heap”)栈(“stack”)的思考!)