Javascript扩展对象extend实现

jQuery的$.extend方法是我们在开发中经常用到的方法，用于合并若干个对象，且支持深度拷贝。

最常见的一个使用场景是参数的合并，比如我们要做一个显示对话框的组件，接收一个option对象参数，把它和默认参数defaultOption合并，得到新的参数。这样做的好处就是对option字段的拓展非常方便，并且使用者可以只传部分参数，其他均为默认值，代码可读性也比较好。

var showDialog = (function() {
     var defaultOption = {
        title:'',
        width:500,
        close:function(){}
    }
    return function(option) {
        $.extend({},defaultOption,option);
    }
})()

showDialog({
    title:'',
    close:function() {
      console.log('dialog closed')
    }
})

这种模式在很多地方都用到，最常见的我们使用$.ajax发起ajax请求，对于传递的option也是这样处理的。
在现在的项目中，由于用的是Vue，避免了繁琐的Dom操作，所以用不到jQuery提供的dom操作。但是我需要$.extend方法。在查看了他的源码之后，本来打算直接copy过来使用，可是发现它有很多依赖项，懒得一一去找，所以索性自己从头写一个。

我们可以考虑首先实现一个最简单的extend函数，即用for in遍历源对象，覆盖目标对象的对应属性即可。

var extend = function(destination,source) {
    for(var property in source) {
        destination[property] = source[property]
    }
    return destination
}

非常简洁易懂，这种实现方式满足了大部分情况下的需求，但存在一个问题，就是这种合并是浅拷贝。
如果合并的属性中含有对象a，那么在进行合并之后，destination拥有的是对象a的引用，而source对象也有对象a的引用，那么如果我们修改对象a的属性，destination和source都将被修改——它们引用的是同一个对象，这就是浅拷贝。我们想实现深拷贝，即在destination中的对象a是一份复制品，而不是引用，那么我们需要对对象的赋值做额外的判断和处理。

var isObjFunc = function(name) {
    var toString = Object.prototype.toString
    return function() {
        return toString.call(arguments[0]) === '[object ' + name + ']'
    } 
}
var isObject = isObjFunc('Object'),
var extend = function(destination,source,isDeep) {
    var obj,copy
    for(var property in source) {
        obj = source[property]
        if(isDeep && isObject(obj) { // 判断是深拷贝且这个属性是纯对象
            var copy = {}
            destination[property] = extend(copy,obj,isDeep) // 递归调用，创建一份obj的拷贝，赋值给destination
        } else {
            destination[property] = obj
        }
    }
    return destination
}

上面的代码就实现了一个简单深拷贝。但这里还有一个漏洞，如果是数组的话，创建copy的时候应该设置为一个新的空数组，这样for in操作扩展才能正常执行。再参考jQuery.extend的实现方式，利用arguments处理多个对象合并的情况，最终的代码如下，较为完整的实现了extend，供参考。如果有bug欢迎留言指正。

var extend = (function() {
    var isObjFunc = function(name) {
        var toString = Object.prototype.toString
        return function() {
            return toString.call(arguments[0]) === '[object ' + name + ']'
        } 
    }
    var   isObject = isObjFunc('Object'),
        isArray = isObjFunc('Array'),
        isBoolean = isObjFunc('Boolean')
    return function extend() {
        var index = 0,isDeep = false,obj,copy,destination,source,i
        if(isBoolean(arguments[0])) {
            index = 1
            isDeep = arguments[0]
        }
        for(i = arguments.length - 1;i>index;i--) {
            destination = arguments[i - 1]
            source = arguments[i]
            if(isObject(source) || isArray(source)) {
                console.log(source)
                for(var property in source) {
                    obj = source[property]
                    if(isDeep && ( isObject(obj) || isArray(obj) ) ) {
                        copy = isObject(obj) ? {} : []
                        var extended = extend(isDeep,copy,obj)
                        destination[property] = extended 
                    }else {
                        destination[property] = source[property]
                    }
                }
            } else {
                destination = source
            }
        }
        return destination
    }
})()

测试代码如下

var a = {name:1}
var b = {name:2}
var c = {name:3}
extend(true,a,b,{name:[a,b,c],value:a})
console.log(a)
console.log(a.name[0] === a) // false
console.log(a.value === a) // false