JavaScript 復(fù)制對(duì)象與Object.assign方法無(wú)法實(shí)現(xiàn)深復(fù)制

let val = 123;
let copy = val;
console.log(copy); //123
val = 456;     //修改val的值對(duì)copy的值不產(chǎn)生影響
console.log(copy); //123

// obj只是指向?qū)ο蟮闹羔?let obj = {
  character: 'peaceful'
};
//copy變量復(fù)制了這個(gè)指針，指向同一個(gè)對(duì)象
let copy = obj;
console.log(copy);     //{character: 'peaceful'}
obj.character = 'lovely';
console.log(copy);     //{character: 'lovely'} 

let arr = [1, 2, 3];
let copy = arr;
console.log(copy); // [1, 2, 3]
arr[0] = 'keith';
console.log(copy); // 數(shù)組對(duì)象被改變： ['keith', 2, 3]
arr = null;
console.log(copy); // ['keith', 2, 3] 即使arr=null，也不會(huì)影響copy。因此此時(shí)的arr變量只是一個(gè)指向數(shù)組對(duì)象的指針

function foo () {
  return 'hello world';
};
let bar = foo;
console.log(foo());
foo = null;   //foo只是指向函數(shù)對(duì)象的指針
console.log(bar());

let target = {a: 123};
let source1 = {b: 456};
let source2 = {c: 789};
let obj = Object.assign(target, source1, source2);
console.log(obj);

let target = {a: 123};
let source1 = {b: 456};
let source2 = {c: 789, d: {e: 'lovely'}};
let obj = Object.assign(target, source1, source2);
source2.d.e = 'peaceful';
console.log(obj);  // {a: 123, b: 456, c: 789, d: {e: 'peaceful'}}

let obj = {
  a: 123,
  b: {
    c: 456,
    d: {
      e: 789
    }
  }
};
let copy = JSON.parse(JSON.stringify(obj));
// 對(duì)obj對(duì)象無(wú)論怎么修改，都不會(huì)影響到copy對(duì)象
obj.b.c = 'hello';
obj.b.d.e = 'world';
console.log(copy); // {a: 123, b: {c: 456, d: {e: 789}}}

jQuery.extend = jQuery.fn.extend = function() {
  var options, name, src, copy, copyIsArray, clone,
    target = arguments[0] || {},
    // 使用||運(yùn)算符，排除隱式強(qiáng)制類型轉(zhuǎn)換為false的數(shù)據(jù)類型
    // 如'', 0, undefined, null, false等
    // 如果target為以上的值，則設(shè)置target = {}
    i = 1,
    length = arguments.length,
    deep = false;

  // 當(dāng)typeof target === 'boolean'時(shí)
  // 則將deep設(shè)置為target的值
  // 然后將target移動(dòng)到第二個(gè)參數(shù)，
  if (typeof target === "boolean") {
    deep = target;
    // 使用||運(yùn)算符，排除隱式強(qiáng)制類型轉(zhuǎn)換為false的數(shù)據(jù)類型
    // 如'', 0, undefined, null, false等
    // 如果target為以上的值，則設(shè)置target = {}
    target = arguments[i] || {};
    i++;
  }

  // 如果target不是一個(gè)對(duì)象或數(shù)組或函數(shù)，
  // 則設(shè)置target = {}
  // 這里與Object.assign的處理方法不同，
  // assign方法會(huì)將Boolean、String、Number方法轉(zhuǎn)換為對(duì)應(yīng)的基本包裝類型
  // 然后再返回，
  // 而extend方法直接將typeof不為object或function的數(shù)據(jù)類型
  // 全部轉(zhuǎn)換為一個(gè)空對(duì)象
  if (typeof target !== "object" && !jQuery.isFunction(target)) {
    target = {};
  }

  // 如果arguments.length === 1 或
  // typeof arguments[0] === 'boolean', 且存在arguments[1]，
  // 這時(shí)候目標(biāo)對(duì)象會(huì)指向this
  // this的指向哪個(gè)對(duì)象需要看是使用$.fn.extend還是$.extend
  if (i === length) {
    target = this;
    // i-- 表示不進(jìn)入for循環(huán)
    i--;
  }

  // 循環(huán)arguments類數(shù)組對(duì)象，從源對(duì)象開始
  for (; i < length; i++) {
    // 針對(duì)下面if判斷
    // 有一點(diǎn)需要注意的是
    // 這里有一個(gè)隱式強(qiáng)制類型轉(zhuǎn)換 undefined == null 為 true
    // 而undefined === null 為 false
    // 所以如果源對(duì)象中數(shù)據(jù)類型為Undefined或Null
    // 那么就會(huì)跳過(guò)本次循環(huán)，接著循環(huán)下一個(gè)源對(duì)象
    if ((options = arguments[i]) != null) {
      // 遍歷所有[[emuerable]] === true的源對(duì)象
      // 包括Object, Array, String
      // 如果遇到源對(duì)象的數(shù)據(jù)類型為Boolean, Number
      // for in循環(huán)會(huì)被跳過(guò)，不執(zhí)行for in循環(huán)
      for (name in options) {
        // src用于判斷target對(duì)象是否存在name屬性
        src = target[name];

        // 需要復(fù)制的屬性
        // 當(dāng)前源對(duì)象的name屬性
        copy = options[name];

        // 這種情況暫時(shí)未遇到..
        // 按照我的理解，
        // 即使copy是同target是一樣的對(duì)象
        // 兩個(gè)對(duì)象也不可能相等的..
        if (target === copy) {
          continue;
        }

        // if判斷主要用途：
        // 如果是深復(fù)制且copy是一個(gè)對(duì)象或數(shù)組
        // 則需要遞歸jQuery.extend(),
        // 直到copy成為一個(gè)基本數(shù)據(jù)類型為止
        if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
          // 深復(fù)制
          if (copyIsArray) {
            // 如果是copy是一個(gè)數(shù)組
            // 將copyIsArray重置為默認(rèn)值
            copyIsArray = false;
            // 如果目標(biāo)對(duì)象存在name屬性且是一個(gè)數(shù)組
            // 則使用目標(biāo)對(duì)象的name屬性，否則重新創(chuàng)建一個(gè)數(shù)組，用于復(fù)制
            clone = src && jQuery.isArray(src) ? src : [];

          } else {
            // 如果目標(biāo)對(duì)象存在name屬性且是一個(gè)對(duì)象
            // 則使用目標(biāo)對(duì)象的name屬性，否則重新創(chuàng)建一個(gè)對(duì)象，用于復(fù)制
            clone = src && jQuery.isPlainObject(src) ? src : {};
          }

          // 因?yàn)樯顝?fù)制，所以遞歸調(diào)用jQuery.extend方法
          // 返回值為target對(duì)象，即clone對(duì)象
          // copy是一個(gè)源對(duì)象
          target[name] = jQuery.extend(deep, clone, copy);

        } else if (copy !== undefined) {
          // 淺復(fù)制
          // 如果copy不是一個(gè)對(duì)象或數(shù)組
          // 那么執(zhí)行elseif分支
          // 在elseif判斷中如果copy是一個(gè)對(duì)象或數(shù)組，
          // 但是都為空的話，排除這種情況
          // 因?yàn)楂@取空對(duì)象的屬性會(huì)返回undefined
          target[name] = copy;
        }
      }
    }
  }

  // 當(dāng)源對(duì)象全部循環(huán)完畢之后，返回目標(biāo)對(duì)象
  return target;
};   

let obj1 = $.extend();
console.log(obj1); // 返回一個(gè)空對(duì)象 {}

let obj2 = $.extend(undefined);
console.log(obj2); //返回jQuery對(duì)象，Object.assign傳入undefined會(huì)報(bào)錯(cuò)

let obj3 = $.extend('123');
console.log(obj3); // 返回jQuery對(duì)象，Object.assign傳入'123'會(huì)返回字符串的String對(duì)象

let target = {
  a: 123,
  b: 234
};

let source1 = {
  b: 456,
  d: ['keith', 'peaceful', 'lovely']
};

let source2 = {c: 789};
let source3 = {};

let obj4 = $.extend(target, source1, source2);
// let obj4 = $.extend(false, target, source1, source2);
console.log(obj4); // {a: 123, b: 456, d: Array(3), c: 789}
// 默認(rèn)情況下，復(fù)制方式都是淺復(fù)制
// 如果只需要淺復(fù)制，不傳入deep參數(shù)也可以
// 淺復(fù)制時(shí)，obj4對(duì)象中的d屬性只是指向數(shù)組對(duì)象的指針

let obj5 = $.extend(target, undefined, source2);
let obj6 = $.extend(target, source3, source2);
console.log(obj5, obj6);
// {a: 123, b: 234, c: 789}, {a: 123, b: 234, c: 789}
// 會(huì)略過(guò)空對(duì)象或Undefined、Null值

let obj7 = $.extend(true, target, source1, source2);
console.log(obj7); // {a: 123, b: 456, d: Array(3), c: 789}
// 這里target對(duì)象有b屬性，源對(duì)象source1也有b屬性
// 此時(shí)源對(duì)象的b屬性會(huì)覆蓋目標(biāo)對(duì)象的b屬性
// 這里deep=true，屬于深復(fù)制
// 當(dāng)name=d時(shí)，會(huì)遞歸調(diào)用$.extend, 直到它的屬性對(duì)應(yīng)的屬性值全部為基本數(shù)據(jù)類型
// 源對(duì)象的改變不會(huì)影響到obj7對(duì)象

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

  // 如果第一個(gè)參數(shù)的數(shù)據(jù)類型是Boolean類型
  // target往后取第二個(gè)參數(shù)
  if (typeof target === 'boolean') {
    deep = target;
    // 使用||運(yùn)算符，排除隱式強(qiáng)制類型轉(zhuǎn)換為false的數(shù)據(jù)類型
    // 如'', 0, undefined, null, false等
    // 如果target為以上的值，則設(shè)置target = {}
    target = arguments[1] || {};
    i++;
  }

  // 如果target不是一個(gè)對(duì)象或數(shù)組或函數(shù)
  if (typeof target !== 'object' && !(typeof target === 'function')) {
    target = {};
  }

  // 如果arguments.length === 1 或
  // typeof arguments[0] === 'boolean',
  // 且存在arguments[1]，則直接返回target對(duì)象
  if (i === length) {
    return target;
  }

  // 循環(huán)每個(gè)源對(duì)象
  for (; i < length; i++) {
    // 如果傳入的源對(duì)象是null或undefined
    // 則循環(huán)下一個(gè)源對(duì)象
    if (typeof (options = arguments[i]) != null) {
      // 遍歷所有[[emuerable]] === true的源對(duì)象
      // 包括Object, Array, String
      // 如果遇到源對(duì)象的數(shù)據(jù)類型為Boolean, Number
      // for in循環(huán)會(huì)被跳過(guò)，不執(zhí)行for in循環(huán)
      for (name in options) {
        // src用于判斷target對(duì)象是否存在name屬性
        src = target[name];
        // copy用于復(fù)制
        copy = options[name];
        // 判斷copy是否是數(shù)組
        copyIsArray = Array.isArray(copy);
        if (deep && copy && (typeof copy === 'object' || copyIsArray)) {
          if (copyIsArray) {
            copyIsArray = false;
            // 如果目標(biāo)對(duì)象存在name屬性且是一個(gè)數(shù)組
            // 則使用目標(biāo)對(duì)象的name屬性，否則重新創(chuàng)建一個(gè)數(shù)組，用于復(fù)制
            clone = src && Array.isArray(src) ? src : [];
          } else {
            // 如果目標(biāo)對(duì)象存在name屬性且是一個(gè)對(duì)象
            // 則使用目標(biāo)對(duì)象的name屬性，否則重新創(chuàng)建一個(gè)對(duì)象，用于復(fù)制
            clone = src && typeof src === 'object' ? src : {};
          }
          // 深復(fù)制，所以遞歸調(diào)用copyObject函數(shù)
          // 返回值為target對(duì)象，即clone對(duì)象
          // copy是一個(gè)源對(duì)象
          target[name] = copyObject(deep, clone, copy);
        } else if (copy !== undefined){
          // 淺復(fù)制，直接復(fù)制到target對(duì)象上
          target[name] = copy;
        }
      }
    }
  }
  // 返回目標(biāo)對(duì)象
  return target;   
}