神刀安全网

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的属性,destinationsource都将被修改——它们引用的是同一个对象,这就是浅拷贝。我们想实现深拷贝,即在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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Javascript扩展对象extend实现

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址