JavaScript浅层克隆与深度克隆实现原理及代码示例

作者:青柠时间:2026-10-24 03:38:01浏览:221

本文详细解析JavaScript中浅层克隆与深度克隆的区别及实现方法。通过对比引用值变化,展示浅层克隆仅复制第一层对象的特性;深入探讨深度克隆如何处理数组和对象,利用Object.prototype.toString判断类型,并通过递归实现完整复制。附带完整代码示例,帮助开发者掌握对象拷贝的核心技术。

JavaScript浅层克隆与深度克隆概述

本文重点讲解JavaScript中浅层克隆与深度克隆的区别及具体实现方式,文中提供了详细的示例代码,旨在为读者的学习和工作提供有价值的参考。

浅层克隆机制与示例

浅层克隆:当修改引用类型的值时,原对象和克隆对象会同时发生变化。


var obj = {
        name : 'xiaoming',
        age : 12,
        children : ['mimi','lili','rokey']
      }
      var obj2 = {};

      function clone(origin, target) {
        var target = target || {};
         for(var prop in origin) {
           target[prop] = origin[prop];
         }
         return target;
      }

      clone(obj, obj2);

深度克隆实现原理

深度克隆:主要针对数组和对象进行完整复制。

实现深度克隆的第一步是判断值是否为原始类型。

第二步需区分数据类型是数组还是对象,可通过Object.prototype.toString.call([])返回'[object Array]',以及Object.prototype.toString.call({})返回'[object Object]'来进行判断。

第三步根据判断结果,分别创建对应的数组或对象容器。

第四步通过递归调用,遍历并复制对象或数组中的属性。


function deepClone(origin, target) {
        var target = target || {},
          toStr = Object.prototype.toString,
          arrStr = '[object Array]';
        for(var prop in origin) {
          if(origin.hasOwnProperty(prop)) {   //判断是不是对象自带的属性
            if(origin[prop] !== 'null' && typeof(origin[prop]) == 'object') {
              if(toStr.call(origin[prop]) == arrStr) {
                target[prop] = [];
              }else {
                target[prop] = {};
              }
              deepClone(origin[prop], target[prop]);
            }else {
              target[prop] = origin[prop];
            }
          }
        }
        return target;
      }

总结

以上就是本文的全部内容,希望这些解析对大家的JavaScript学习有所帮助,欢迎继续支持本站获取更多技术资源。

作者最新文章