关于深拷贝与浅拷贝

1. 需要了解javaScript 的变量类型:

  • [1] 基本类型:
    5种基本数据类型Undefined、Null、Boolean、Number 和 String,变量是直接按值存放的,存放在栈内存中的简单数据段,可以直接访问。

  • [2] 引用类型:
    存放在堆内存中的对象,变量保存的是一个指针,这个指针指向另一个位置。当需要访问引用类型的值时,首先从栈中获取该对象的地址指针,然后再从堆内存中获取所需的数据。

  • [3] 注意:
    typeof 是无法判断 function 和 array 的,使用Object.prototype.toString.call(obj) 方法。

2. 不同:

  • [1] 深拷贝:(拷贝对象和源对象)互不影响,开辟一块新的内存地址
    实现:
    1). Array 的 slice 和 concat 方法(实际上是浅拷贝,看起来是深拷贝)
    2). JSON 对象的 parse 和 stringify
    3). Lodash 实现 _.cloneDeep(value)
    4). 借用 jquery 的 $.extend( true, target, object1 [, objectN ] )

  • [2] 浅拷贝:(拷贝对象和源对象)双向改变,指向同一片内存空间
    实现:
    1). 简单的引用复制
    2). Object.assign()
    3). Lodash 实现 _.clone(value)
    4). 借用 jquery 的 $.extend( false, target, object1 [, objectN ] )

注意:遇到比较简单的对象我们应该直接调用clone方法而不是cloneDeep(或者JSON.parse(JSON.stringify(obj)) ),这样既保险也可以减少性能损耗。

3. 应用:
在vue组件中prop传值,遇到下面情况,可以用深度拷贝避免子组件影响到父组件的状态。

对于一个数组或对象类型的 prop 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态。

你可能感兴趣的:(前端学习)