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 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态。