Javascript扩展对象extend实现

WanJieanZ1 7年前
   <p>jQuery的 $.extend 方法是我们在开发中经常用到的方法,用于合并若干个对象,且支持深度拷贝。</p>    <p>最常见的一个使用场景是参数的合并,比如我们要做一个显示对话框的组件,接收一个 option 对象参数,把它和默认参数 defaultOption 合并,得到新的参数。这样做的好处就是对 option 字段的拓展非常方便,并且使用者可以只传部分参数,其他均为默认值,代码可读性也比较好。</p>    <pre>  <code class="language-javascript">var showDialog = (function() {       var defaultOption = {          title:'',          width:500,          close:function(){}      }      return function(option) {          $.extend({},defaultOption,option);      }  })()    showDialog({      title:'',      close:function() {        console.log('dialog closed')      }  })</code></pre>    <p>这种模式在很多地方都用到,最常见的我们使用 $.ajax 发起ajax请求,对于传递的option也是这样处理的。</p>    <p>在现在的项目中,由于用的是Vue,避免了繁琐的Dom操作,所以用不到jQuery提供的dom操作。但是我需要 $.extend 方法。在查看了他的源码之后,本来打算直接copy过来使用,可是发现它有很多依赖项,懒得一一去找,所以索性自己从头写一个。</p>    <p>我们可以考虑首先实现一个最简单的extend函数,即用 for in 遍历源对象,覆盖目标对象的对应属性即可。</p>    <pre>  <code class="language-javascript">var extend = function(destination,source) {      for(var property in source) {          destination[property] = source[property]      }      return destination  }</code></pre>    <p>非常简洁易懂,这种实现方式满足了大部分情况下的需求,但存在一个问题,就是这种合并是浅拷贝。</p>    <p>如果合并的属性中含有对象 a ,那么在进行合并之后, destination 拥有的是对象a的引用,而 source 对象也有对象 a 的引用,那么如果我们修改对象 a 的属性, destination 和 source 都将被修改——它们引用的是同一个对象,这就是浅拷贝。我们想实现深拷贝,即在 destination 中的对象 a 是一份复制品,而不是引用,那么我们需要对对象的赋值做额外的判断和处理。</p>    <pre>  <code class="language-javascript">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  }</code></pre>    <p>上面的代码就实现了一个简单深拷贝。但这里还有一个漏洞,如果是数组的话,创建 copy 的时候应该设置为一个新的空数组,这样 for in 操作扩展才能正常执行。再参考 jQuery.extend 的实现方式,利用 arguments 处理多个对象合并的情况,最终的代码如下,较为完整的实现了 extend ,供参考。如果有bug欢迎留言指正。</p>    <pre>  <code class="language-javascript">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      }  })()</code></pre>    <p>测试代码如下</p>    <pre>  <code class="language-javascript">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</code></pre>    <p> </p>    <p>来自:http://www.jianshu.com/p/04b1d88dabf2</p>    <p> </p>