对象的复制

我们一般常用的js类型有5种基本类型（undefined、null、number、string、boolean）和Object。其中Object又包含Date、RegExp、Array、Function这些常用的类型。以下是一个函数，可以更细致的区分数据的类型。函数主要是参考了@wengjq的文章javaScript中浅拷贝和深拷贝的实现 #3。个人在此基础上，做了一点微调

(function ($) {
    var types = 'Array Object String Date RegExp Function Boolean Number Null Undefined'.split(' ');
    types.forEach(type => ($['is' + type] = obj => Object.prototype.toString.call(obj).slice(8, -1) === type))
})(window.$ || (window.$ = {}))

对代码进行测试

var a = [[], {}, 'hello', new Date(), /^a/, () => {}, true, 11, null, undefined]
var b = a.map((item, i) => {
    let type = Object.prototype.toString.call(item).slice(8, -1)
    return {
        item,
        type: type.toLowerCase(),
        typeof: typeof item,
        ['is' + type]: $['is' + type](item)
    }
})
console.log(b)

可以看到输出结果

image.png

有了这个函数，可以很方便在对象的拷贝，进行一些类型的判断。对于各个类型的拷贝方法，如下

null、number、string、undefined、bool类型的数据。拷贝时候直接返回对应的值
Date、RegExp。通过valueOf生成new一个新的对象。注意RegExp的时候，需要设置是否忽略大小写等配置
函数。调用新函数的时候，执行对拷贝函数的调用，更改this的指向。同时，注意函数也是一个对象，可以设置属性等，所以不要忘记对函数属性的拷贝
对象
1 拷贝对象的__proto__
2 拷贝对象的constructor
3 拷贝对象的属性。个人建议使用Object.getOwnPropertyNames而不使用for...in来获取属性。第一：for...in会获取继承来的属性，继承而来的属性，应该继承不应该赋值给拷贝对象。第二：for...in无法获取不可枚举属性

代码如下

function copy(obj, deep) {
    if(obj === null || (typeof obj !== 'object' && !$.isFunction(obj))) return obj
    if ($.isDate(obj)) return new Date(obj.valueOf())
    if ($.isRegExp(obj)) {
        let config = obj.ignoreCase ? 'i' : ''
            + obj.global ? 'g' : ''
            + obj.multiline ? 'm' : ''
        return new RegExp(obj.valueOf(), config)
    }
    if ($.isFunction(obj)) {
        let fn = function () { obj.apply(this, arguments) }
        copyProperty(obj, fn, deep)
        return fn
    }
    if ($.isArray(obj)) return obj.map(v => copy(v, deep))
    return copyObj(obj, deep)
}

function copyObj (obj, deep) {
    let target = Object.create(Object.getPrototypeOf(obj))
    Object.defineProperty(target, 'constructor',  {
        value: obj.constructor,
        configurable: true,
        enumerable: false,
        writable: true
    })
    copyProperty(obj, target, deep)
    return target
}
function copyProperty (obj, target, deep) {
    Object.getOwnPropertyNames(obj).forEach(key => {
        let desps = Object.getOwnPropertyDescriptor(obj, key)
        Object.defineProperty(target, key, {
            value: deep ? copy(obj[key]) : desps.value,
            configurable: desps.configurable,
            enumerable: desps.enumerable,
            writable: desps.writable
        })
    })
}

简单写了一点测试代码

var a = {aa: 11}
var b = Object.create(a)
Object.defineProperty(b, 'cc', {value: '100', enumerable: false})

var fun = function() { console.log(arguments, this) }
fun.aa = Object.create(b)

var arr = ['', true, undefined, null, 19, new Date(), /9{2}/ig, [a, b, fun], fun, {a, b, fun}]
var arrCopy = copy(arr, true)
arrCopy.forEach((v, i) => console.log(v === arr[i], v))

运行结果如图

image.png

有错误的地方，欢迎大家指正

最后编辑于：2018.05.06 18:07:14