extend

2017-12-31

作用

extend的作用就是将其他对象的内容复制到目标对象上，当出现相同属性时，后者会覆盖前者

实现浅复制

function _extend() {
  var length = arguments.length;
  var target = arguments[0];
  var i = 1;
  var obj, key, value;
  for (; i < length; i++) {
    obj = arguments[i];
    if (obj != null) {
      for (key in obj) {
        value = obj[key];
        if (value !== undefined) {
          target[key] = value;
        }
      }
    }
  }
}

实现深复制

实现深复制需要一个参数控制是否进行深复制，且如果属性值是引用类型就需要进行递归

function _extend() {
  // 默认不是深复制
  var deep = false;
  var length = arguments.length;
  // 默认第一个是目标对象
  var target = arguments[0] || {};
  var i = 1;
  if (typeof target === "boolean") {
    deep = target;
    target = arguments[i] || {};
    i++;
  }
  // 复制属性要求target必须为对象，如果不是，就设为{}
  if (typeof target !== 'object') {
    target = {}
  }
  var obj, key, src, value;
  for (; i < length; i++) {
    obj = arguments[i];
    if (obj != null) {
      for (key in obj) {
        src = target[key];
        value = obj[key];
        // 如果要求深复制且属性值是引用类型，就进行递归
        if (deep && value && typeof value === "object") {
          _extend(deep, src, value);
        } else if (value !== undefined) {
          target[key] = value;
        }
      }
    }
  }
  return target;
}

其他细节

1.target可以是函数，毕竟函数也是对象

1
2
3

if (typeof target !== "object" && !isFunction(target)) {
  target = {};
}

2.属性进行覆盖时，如果目标类型不是object就被设为{}，此时会发生一些错误。因而要判断目标对象和待复制对象两者属性值类型是否一致，而且是目标对象属性值的类型要与待复制对象属性值类型保持一致

var valueIsArray, typeTarget;

if (deep && value && (isPlainObject(value) || (valueIsArray = Array.isArray(value)))) {
  if (valueIsArray) {
    valueIsArray = false;
    typeTarget = src && Array.isArray(src) ? src : [];
  } else {
    typeTarget = src && isPlainObject(src) ? src : {};
  }
  target[key] = _extend(deep, typeTarget, value);
} else if (value !== undefined) {
  target[key] = value;
}

3.可能会遇到循环引用，但是要避免这种情况。当待复制对象的属性值与目标对象target相同时需要跳出

src = target[key];
value = obj[key];
if (src === value) {
  continue;
}

最终代码

function _extend() {
  var obj, key, src, value, valueIsArray, typeTarget;
  // 默认不是深复制
  var deep = false;
  var length = arguments.length;
  // 默认第一个是目标对象
  var target = arguments[0] || {};
  var i = 1;
  if (typeof target === "boolean") {
    deep = target;
    target = arguments[i] || {};
    i++;
  }
  // 复制属性要求target必须为对象（包含函数），如果不是，就设为{}
  if (typeof target !== "object" && !isFunction(target)) {
    target = {};
  }
  for (; i < length; i++) {
    obj = arguments[i];
    if (obj != null) {
      for (key in obj) {
        src = target[key];
        value = obj[key];
        // 如果待复制对象的属性值与目标对象target相同就跳出
        if (target === value) {
          continue;
        }
        // 如果要求深复制且属性值是引用类型，就进行递归
        if (deep && value && (isPlainObject(value) || (valueIsArray = Array.isArray(value)))) {
          if (valueIsArray) {
            valueIsArray = false;
            typeTarget = src && Array.isArray(src) ? src : [];
          } else {
            typeTarget = src && isPlainObject(src) ? src : {};
          }
          target[key] = _extend(deep, typeTarget, value);
        } else if (value !== undefined) {
          target[key] = value;
        }
      }
    }
  }
  return target;
}

isFunction见JavaScript检测类型
isPlainObject见JavaScript检测复杂类型