zoukankan      html  css  js  c++  java
  • IFE_part2_JavaScript_JS中的克隆(深度克隆的实现)

    了解JS中简易克隆与深度克隆的概念和区别:

    • 浅度克隆:原始类型为值传递,对象类型仍为引用传递。
    • 深度克隆:所有元素或属性均完全复制,与原对象完全脱离,也就是说所有对于新对象的修改都不会反映到原对象中。

      // 浅度克隆:原始类型为值传递,对象类型仍为引用传递。/对于对象的浅克隆,修改新对象的时候会把原对象的属性也一起修改
      var a="1";
      var b=a;
      b="2";
      console.log(a);// "1"
      console.log(b);// "2"
      
      // 深度克隆:所有元素或属性均完全复制,与原对象完全脱离,也就是说所有对于新对象的修改都不会反映到原对象中。
      function cloneObject(src) {
          var result
          if (typeof src == "string" || typeof src == "number") {
              var result = src;
          }
          else if (src instanceof Array == true) {
              var result = src
          }
          else if (typeof src == "object") {
              // 深度克隆实现方法1 /缺点:1.无法复制函数 2.原型链没有了,对象就是object,所属的类没有了。
              var result = JSON.parse (JSON.stringify(src))
          }
          return result;    
      }
      
      // 测试用例:
      var srcObj = {
          a: 1,
          b: {
              b1: ["hello", "hi"],
              b2: "JavaScript"
          }
      };
      var abObj = srcObj;
      var tarObj = cloneObject(srcObj);
      
      srcObj.a = 2;
      srcObj.b.b1[0] = "Hello";
      
      console.log(abObj.a);
      console.log(abObj.b.b1[0]);
      
      console.log(tarObj.a);      // 1
      console.log(tarObj.b.b1[0]);    // "hello"
      

      除了JSON.parse (JSON.stringify(src))这种方法,还有通过Object.assigin递归实现的,目前递归的方式正在理解中。

  • 相关阅读:
    Web--2019年5月7日移动端随笔
    Web-css3--19年5月5日随笔
    数据库指令----4月10日
    19--3--14--数据处理
    微信小程序全选,微信小程序checkbox,微信小程序购物车
    手机预览微信小程序
    原生H5页面模拟APP左侧滑动删除效果
    微信小程序实例:实现tabs选项卡效果
    CSS3文本溢出显示省略号
    前端自动化之路之gulp,node.js
  • 原文地址:https://www.cnblogs.com/No-harm/p/8995075.html
Copyright © 2011-2022 走看看