JavaScript 实现 extend

发布时间:2019-06-24 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了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身上有的属性,都不需要再赋值了,嘿嘿。

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

脚本宝典总结

以上是脚本宝典为你收集整理的JavaScript 实现 extend全部内容,希望文章能够帮你解决JavaScript 实现 extend所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。