$.extend() 实现对象合并

$.extend([deep], target, obj1, [objN])

概述

用一个或多个其它对象来扩展一个对象，返回被扩展的对象。

参数

参数	说明
deep	如果为 true，则深拷贝，默认浅拷贝。
target	待修改的对象
object1	待合并到第一个对象的对象
objectN	待合并到第一个对象的对象

示例

目的: 合并 obj1 和 obj2，修改并返回 obj1。

代码：

let obj1 = { name: 'cez', age: 22 }
let obj2 = { weight: 120, height: 173}
console.log('合并前',obj1);
$.extend(true, obj1, obj2)
console.log('合并后',obj1);

结果：

源码

jQuery.extend = jQuery.fn.extend = function () {
    var options, name, src, copy, copyIsArray, clone,
      target = arguments[0] || {},
      i = 1,
      length = arguments.length,
      deep = false;

    if (typeof target === "boolean") {
      deep = target; 
      target = arguments[1] || {};
      i = 2;
    }

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

    if (length === i) {
      target = this;
      --i;
    }

    for (; i < length; i++) {
      if ((options = arguments[i]) != null) {
        for (name in options) {
          src = target[name];
          copy = options[name];

          if (target === copy) {
            continue;
          }

          if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
            if (copyIsArray) {
              copyIsArray = false;
              clone = src && jQuery.isArray(src) ? src : [];
            } else {
              clone = src && jQuery.isPlainObject(src) ? src : {};
            }

            target[name] = jQuery.extend(deep, clone, copy);

          } else if (copy !== undefined) {
            target[name] = copy;
          }
        }
      }
    }

    return target;
  };

把 $.extend([deep], target, obj1, [objN]) 情况单独提取出来。

实现思路：循环待合并对象，把里面的属性添加到目标对象下。

$.extend = function () {
  let options, name, copy, src, clone, copyIsArray,
    target = arguments[0] || {}  // target = true
    i = 1,
    length = arguments.length,   // 3 参数长度
    deep = false                 // 是否深拷贝，默认为false

  // 是否是合并对象的情况
  if (typeof target === 'boolean') {
    deep = target                 // deep = true
    target = arguments[1] || {}   // target = obj1; 待修改对象
    i = 2                         // 待合并对象在arguments的位置，从0开始算
  }

  // i = 2; length = 3
  for (; i < length; i++) {
    if ((options = arguments[i]) != null) {   // options = { weight: 120, height: 173 }
      for (name in options) {                 // name = weight、height
        src = target[name]                    // src = null
        copy = options[name]                  // 120、173

        if (target === copy) {
          continue
        }

        //                   是否是对象                        是否是数组
        if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {   // 深拷贝
          if (copyIsArray) {   // 数组的深拷贝
            copyIsArray = false
            clone = src && jQuery.isArray(src) ? src : []
          } else {   // 对象的深拷贝
            clone = src && jQuery.isPlainObject(src) ? src : {}
          }

          target[name] = jQuery.extend(deep, clone, copy)   // 递归实现深拷贝

        } else if (copy !== undefined) {   // 浅拷贝
          target[name] = copy              // obj1[weight] = 120; obj1[height] = 173
        }
      }
    }
  }

  return target;   // obj1
}

– 若有错误的地方，欢迎指正 –