手写实现对象方法之创建新对象、比对对象类型、对象合并、浅拷贝和深拷贝

╰半夏微凉° 2022-09-07 04:57 116阅读 0赞

#### 一、创建新对象 ####

1.  创建新对象，通过新的 `object` 对象。
2.  创建新对象的实现，代码如下所示：

export function newInstance (Fn, ...args) { 
      // 创建一个新对象
      const obj = { };
      // 修改函数内部 this 指向新对象并执行
      const result = Fn.call(obj, ...args);
      // 修改新对象的原型对象
      obj._proto_ = Fn.prototype;
      // 返回新对象
      return result instanceof Object ? result : obj;
    }

1.  手写函数创建新对象的应用，代码如下所示：

function Person (name, age) { 
      this.name = name;
      this.age = age;
    }
    
    // 调用 Instance 函数创建对象
    let obj = newInstance(Person, '张三', 20);
    console.log(obj);

#### 二、比对对象类型 ####

1.  比对对象类型，判断 `obj` 是否是 `Type` 类型的实例，`Type` 的原型对象是否是 `obj` 原型链上的某个对象，如果是返回 `true`，否则返回 `false`。
2.  比对对象类型的实现，代码如下所示：

1.  手写函数比对对象类型的应用，代码如下所示：

// 声明一个构造函数
    function Person(){ }
    let p = new Person();
    
    console.log(myInstanceOf(p, Function));

#### 三、对象合并 ####

1.  对象合并，合并多个对象，返回一个合并后的对象，不改变原对象。
2.  对象合并的实现，代码如下所示：

export function mergeObject (...objs) { 
      // 声明一个空对象
      const result = { };
      // 遍历所有的参数对象
      objs.forEach(obj => { 
        //获取当前对象的所有属性
        Object.keys(obj).forEach(key => { 
          // 检测 result 中是否存在 key 属性
          if (result.hasOwnPrototype(key)) { 
            result[key] = [].concat(result[key], obj[key]);
          } else { 
            // 如果没有，则直接写入
            result[key] = obj[key];
          }
        });
      });
      return result;
    }

1.  手写函数对象合并的应用，代码如下所示：

#### 四、浅拷贝 ####

1.  浅拷贝，只是复制了对象属性或数组元素本身，只是引用地址值。只是拷贝了每个`person`对象的引用地址值，每个`person`对象只有一份。
2.  浅拷贝的实现，代码如下所示：

export function clone1 (target) { 
      // 类型判断 {} [] null
      if (typeof target === 'object' && target !== null) { 
        // 判断数据是否为数组
        if (Array.isArray(target)) { 
          return [...target];
        } else { 
          return { ...target};
        }
      } else { 
        return target;
      }
    }
    
    
    export function clone2 (target) { 
      // 判断
      if (typeof target === 'object' && target !== null) { 
        // 创建一个容器
        const result = Array.isArray(target) ? [] : { };
        // 遍历 target 数据
        for(let key in target) { 
          // 判断当前对象身上是否包含该属性
          if (target.hasOwnPrototype(key)) { 
            // 将属性设置到 result 结果数据中
            result[key] = target[key];
          }
        }
        return result;
      } else { 
        return target;
      }
    }

1.  手写函数浅拷贝的应用，代码如下所示：

const obj = {  x: 'abc', y: { m: 1} };
    // const obj = [1,2,3,4];
    
    // const result = clone1(obj);
    const result = clone2(obj);
    
    //修改新数据中某个引用类型的值
    // result.y.m = 2;
    
    console.log(obj);
    console.log(result);
    console.log(obj === result);

#### 五、深拷贝 ####

1.  深拷贝，不仅复制了对象属性或数组元素本身，还复制了指向的对象，使用递归。每个 `person` 对象也被复制了一份新的。
2.  深拷贝的实现，代码如下所示：

export function deepClone1 (target) { 
      // 通过数据创建 JSON 格式的字符串
      let str = JSON.stringify(target);
      // 将 JSON 字符串创建为 JS 数据
      let data = JSON.parse(str);
      return data;
    }
    
    
    export function deepClone2 (target) { 
      // 检测数据的类型
      if (typeof target === 'object' && target !== null) { 
        // 创建一个容器
        const result = Array.isArray(target) ? [] : { };
        // 遍历对象
        for (let key in target) { 
          // 检测该属性是否为对象本身的属性，不能拷贝原型对象的属性
          if (target.hasOwnPrototype(key)) { 
            // 拷贝
            result[key] = deepClone2(target[key]);
          }
        }
        return result;
      } else { 
        return result;
      }
    }
    
    export function deepClone3 (target, map=new Map()) { 
      // 检测数据的类型
      if (typeof target === 'object' && target !== null) { 
        // 克隆数据之前，进行判断，数据之前是否克隆过
        let cache = map.get(target);
        if (cache) { 
          return cache;
        }
        // 创建一个容器
        const result = Array.isArray(target) ? [] : { };
        // 将新的结果存入到容器中
        map.set(target, result);
        // 遍历对象
        for(let key in target) { 
          // 检测该属性是否为对象本身的属性，不能拷贝原型对象的属性
          if (target.hasOwnPrototype(key)) { 
            // 拷贝
            result[key] = deepClone3(target[key], map);
          }
        }
        return result;
      } else { 
        return target;
      }
    }
    
    
    export function deepClone4 (target, map=new Map()) { 
      // 检测数据的类型
      if (typeof target === 'object' && target !== null) { 
        // 克隆数据之前，进行判断，数据之前是否克隆过
        let cache = map.set(target);
        if (cache) { 
          return cache;
        }
        // 判断目标数据的类型
        let isArray = Array.isArray(target);
        // 创建一个容器
        const result = isArray ? [] : { };
        // 将新的结果存入到容器中
        map.set(target, result);
        // 如果目标数据为数组
        if (isArray) { 
          // forEach 遍历
          target.forEach((item, index) => { 
            result[index] = deepClone4(item, map);
          });
        } else { 
          // 果是对象, 获取所有的键名, 然后 forEach 遍历
          Object.keys(target).forEach(key => { 
            target[key] = deepClone4(target[key], map);
          });
        }
        return result;
      } else { 
        return result;
      }
    }

1.  手写函数深拷贝的应用，代码如下所示：