深拷贝、浅拷贝和赋值

123 阅读2分钟

赋值、浅拷贝、深拷贝

赋值是该对象在栈中的地址,而不是堆中的数据。通俗讲两个对象指向同一个存储空间,无论哪个改变都是改变的存储空间的内容,因此两个对象是联动的。

var person = {
    name: '哈哈',
    hobby: [' 学习',['看电视''购物'],'跑步']
}
var obj = person // 赋值

浅拷贝重新在堆中创建内存,拷贝前后对象的基本参数互不影响,但拷贝前后对象的引用类型因共享同一个内存,会互相影响。

1Object.assign() // 将所有可枚举属性的值从一个或多个源对象分配到目标对象,返回目标对象
2、lodash.clone() // 克隆
3、扩展运算符 ...
4Array.prototype.concat() // 合并两个或多个数组,返回一个新数组
5Array.prototype.slice(begin,end) // 由begin和end决定的原数组浅拷贝
// 浅拷贝
function shallowCopy (obj) {
    var target = {}
    for(var i in obj) {
        if(obj.hasOwnProperty(i)) {
            target[i] = obj[i]
        }
    }
    return target
}

深拷贝从堆内存中开辟一个新的区域存放新对象,对对象中的子对象进行递归拷贝,拷贝前后的两个对象互不影响。

1JSON.parse(JSON.stringify())
2、递归操作
3、cloneDeep // 深度克隆 
4Jquery.extend([Boolean(可选,深度合并)],target,obj1,obj2) // 将一个或多个对象的内容合并到目标对象(深度合并)
// 递归 深拷贝
function deepClone (obj) {
    var cloneObj = new obj.constructor();
    // var cloneObj = {};
    if(obj === null) return obj;
    if(obj instanceof Date) return new Date(obj);
    if(obj instanceof RegExp) return new RegExp(obj);
    if(typeof obj !== 'object') return obj; 
    for(var i in obj) {
        if(obj.hasOwnProperty(i)) {
            cloneObj[i] = deepClone(obj[i]);
        }
    }
    return cloneObj;
}

备注知识

1、hasOwnProperty() 返回布尔值,检测对象是否含有特定的自身属性(会忽略掉原型链上继承的属性)

2、constructor() 返回对创建对象的数组函数的引用

3、instanceof() 检测构造函数的prototype属性是否出现在实例对象的原型链上

image.png

堆、栈

一般数据类型包含:number、string、boolean、undefined、null

引用类型包含:object

栈 指向 堆:var obj = {} image.png