jS浅拷贝实现

一个新的对象直接拷贝已存在的对象的对象属性的引用，即浅拷贝。

Array.prototype.slice()属于浅拷贝。

var arr = [2, 4, 6, { y: 10 }]
var newArr = arr.slice()
newArr[3].x = 20
newArr[3].y = 30
console.log(arr)     // [2, 5, 6, { y: 30, x: 20 }]
console.log(newArr)  // [2, 5, 6, { y: 30, x: 20 }]

浅拷贝只拷贝已存在对象的对象属性的引用，其余非对象属性是占用新的内存空间，并非与原对象共享。

var newArr = Array.prototype.slice.call(arr)
newArr[1] = 50
console.log(arr)  // [2, 4, 6, { y: 10 }]
console.log(newArr)  // [2, 50, 6, { y: 10 }]

浅拷贝：新的对象复制已有对象中非对象属性的值和对象属性的引用。

简单实现一个浅拷贝函数：

var arr = [2, 4, 6, { y: 10 }]
function shallowCopy (arr) {
    var newArr = Array.isArray(arr) ? [] : {}
    // var newArr = arr instanceof Array ? [] : {}
    for (let key in arr) {
        newArr[key] = arr[key]
    }
    return newArr
}
var newArr = shallowCopy(arr)
console.log(newArr)

像常用的数组方法slice()和对象方法Object.assign()都属于浅拷贝。

var obj = { x: 1, y: 2, z: { num: 10 } }
var newObj = {}
Object.assign(newObj, obj)
newObj.y = 3
console.log(obj)  // { x: 1, y: 2, z: { num: 10 } }
console.log(newObj) // { x: 1, y: 3, z: { num: 10 } }

浅拷贝只拷贝已存在对象的对象属性的引用：

var obj = { x: 1, y: 2, z: { num: 10 } }
var newObj = {}
Object.assign(newObj, obj)
newObj.z.num = 20
console.log(obj)  // { x: 1, y: 2, z: { num: 20 } }
console.log(newObj)  // { x: 1, y: 2, z: { num: 20 } }