对象的复制

我们一般常用的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

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

  1. null、number、string、undefined、bool类型的数据。拷贝时候直接返回对应的值
  2. Date、RegExp。通过valueOf生成new一个新的对象。注意RegExp的时候,需要设置是否忽略大小写等配置
  3. 函数。调用新函数的时候,执行对拷贝函数的调用,更改this的指向。同时,注意函数也是一个对象,可以设置属性等,所以不要忘记对函数属性的拷贝
  4. 对象
    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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。