JavaScript 实现 extend

最近在写移动端的项目，目前还没有引用任何库，所以很多的方法都要自己写。

用惯了jQuery，当函数参数是对象的时候，定义默认参数的时候会写一个defaultOptions对象，然后通过jQuery.extend将实参扩展到defaultOptions对象上。JavaScript是没有extend这个原生方法的，今日得闲，就自己实现一个吧。

先想想这个函数需要做什么。jQuery extend文档中描述的jQuery.extend原型是
jQuery.extend( target [, object1 ] [, objectN ] )

它的含义是将object1、object2...合并到target中，并返回合并过的target。这里面有两个点需要注意一下。

• 合并是从后到前的；
• target的值是被修改了的；
• 是深拷贝的（若是参数对象中有属性是对象，也是会递归合并的）；

其实若不想原始数据被更改也很简单，只要第一个参数传空对象就好了。

那，直接上代吗吧：

void function(global){
    var extend,
        _extend,
        _isObject;

    _isObject = function(o){
        return Object.prototype.toString.call(o) === '[object Object]';
    }

    _extend = function self(destination, source){
        for (var property in source) {
            if (source.hasOwnProperty(property)) {

                // 若sourc[property]是对象，则递归
                if (_isObject(source[property])) {

                    // 若destination没有property，赋值空对象
                    if (!destination.hasOwnProperty(property)) {
                        destination[property] = {};
                    };

                    // 对destination[property]不是对象，赋值空对象
                    if (!_isObject(destination[property])) {
                        destination[property] = {};
                    };

                    // 递归
                    self(destination[property], source[property]);
                } else {
                    destination[property] = source[property];
                };
            }
        }
    }

    extend = function(){
        var arr = arguments,
            result = {},
            i;

        if (!arr.length) return {};

        for (i = 0; i < arr.length; i++) {
            if (_isObject(arr[i])) {
                _extend(result, arr[i])
            };
        }

        arr[0] = result;
        return result;
    }

    global.extend = extend;
}(window)

这样似乎可以了。但是貌似有一个小问题，我们这里是按照参数顺序从左到右依次执行的，但是其实若是最后一个参数有的属性，前面的参数上的该属性都不需要再扩展了。其实前面的所有参数都是将自己身上有的属性而最后一个参数没有的属性补到最后一个参数上。既如此，是不是从参数列表的右侧开始扩展更好一些。

修改以后的代码：

void function(global){
    var extend,
        _extend,
        _isObject;

    _isObject = function(o){
        return Object.prototype.toString.call(o) === '[object Object]';
    }

    _extend = function self(destination, source) {
        var property;
        for (property in destination) {
            if (destination.hasOwnProperty(property)) {

                // 若destination[property]和sourc[property]都是对象，则递归
                if (_isObject(destination[property]) && _isObject(source[property])) {
                    self(destination[property], source[property]);
                };

                // 若sourc[property]已存在，则跳过
                if (source.hasOwnProperty(property)) {
                    continue;
                } else {
                    source[property] = destination[property];
                }
            }
        }
    }

    extend = function(){
        var arr = arguments,
            result = {},
            i;

        if (!arr.length) return {};

        for (i = arr.length - 1; i >= 0; i--) {
            if (_isObject(arr[i])) {
                _extend(arr[i], result);
            };
        }

        arr[0] = result;
        return result;
    }

    global.extend = extend;
}(window)

写代码总是那么有意思！这里面可以看到，只要result身上有的属性，都不需要再赋值了，嘿嘿。

当然，目前水平有限，这段代码肯定也还有着优化空间，若看官有任何建议，还请不吝赐教。