浅克隆和深克隆
发布日期:2021-05-07 23:08:23 浏览次数:30 分类:精选文章

本文共 2036 字,大约阅读时间需要 6 分钟。

目录


浅克隆和深克隆的实现 

  • 深浅克隆主要是为了区分引用类型和基本类型的克隆

深拷贝时首先要区分数组和对象(js中数组和对象都是Object类型,因此要做区分)

  • 方法一:利用Object.prototype.toString.call()

var tem = "[object Array]";			// 区分对象和数组			function test() {                 //首先判断是不是对象				if (typeof(arguments[0]) == "object") {                      //在判断是不是数组					if (Object.prototype.toString.call(arguments[0]) == tem) {						console.log("数组");					} else {						console.log("对象");					}				} else {					console.log("不是对象");				}			}
  • 方法二:利用instanceof

function test1() {                //利用instanceof				if (arguments[0] instanceof Array) {					console.log("数组");				} else {					console.log("对象");				}			}

浅拷贝实现

  • 浅克隆直接将旧对象的地址复制给新对象,导致新对象值改变时,旧对象值也会跟着变

var obj = {				name: "abc",				age: 12,				cord: ["2", "3"],			}			var obj1 = {};			//浅拷贝			function clone(origin, target) {				var target = target || {};				for (var prop in origin) {					target[prop] = origin[prop];				}			}
  •  浅拷贝后,obj中的cord为数组,数组在js中为引用类型,obj1 cord中的值改变后,obj接着也会变

     

深拷贝实现

法一:原生

  • 深度克隆实现时,先创建一个新的空对象或者数组,再将要拷贝的对象的(值)赋给新的对象
  • 深度克隆完之后不管是引用值还是基本值的改变都不会影响源对象
var obj = {				name: "abc",				age: 12,				cord: ["2", "3"],			}			var obj1 = {};            // 深度克隆完之后不管是引用值还是原始值的改变都不会影响源对象			// 先判断是不是原始值 typeof() object			// 判断是数组还是对象  instancof  Object.prototype.toString.call  constructor			// 建立相应的数组或对象			function deepClone(origin, target) {				var target = target || {},					//用来判断是数组还是对象					toStr = Object.prototype.toString,					//存放数组类型的String					arrStr = "[object Array]";				//遍历对象				for (var prop in origin) {					//只克隆对象的属性,不拿他原型链上的属性					if (origin.hasOwnProperty(prop)) {						// 判断当前是不是对象						if (origin[prop] !== "null" && typeof(origin[prop]) == "object") {							// 是数组建立一个空数组是对象建立一个空对象							target[prop] = toStr.call(origin[prop]) == arrStr ? [] : {};							//再次克隆对象内部							deepClone(origin[prop], target[prop]);						} else {							target[prop] = origin[prop];						}					}				}				return target;			}			deepClone(obj, obj1);
  •  深克隆之后就完全解决了这个问题,obj1中cord的内容改变之后,obj不会变

       

法二:JSON

var a = {name:122};var b = JSON.parse(JSON.stringify(a));

 

上一篇:JS封装Tools
下一篇:CSS子元素相对父元素水平垂直居中

发表评论

最新留言

感谢大佬
[***.8.128.20]2025年05月14日 15时49分16秒