原型模式与深浅拷贝|青训营笔记

这是我参与【第四届青训营】笔记创作活动的第31天。

什么是原型模式？

原型模式是创建型模式的一种，它可以基于一个已经创建的实例作为原型，通过拷贝这个原型对象来创建一个和该对象相同或相似的对象。

也就是说，它是一种依赖已有对象模板通过拷贝来创建对象的模式。

浅拷贝和深拷贝

浅拷贝：在浅拷贝中，如果拷贝对象内的属性是引用类型的话，拷贝的内容将是引用对象的地址。

深拷贝：在深拷贝中，如果拷贝对象内的属性是引用类型的话，他将会创建一个新的空间拷贝一份独立的属性。

下面让我们通过代码来看看深浅拷贝的区别：

浅拷贝

// 浅拷贝实现
function shallowCopy(obj){
  if(typeof obj !== 'object') return
  var newObj = obj instanceof Array ? [] : {}
  
  for (key in obj){
    if(obj.hasOwnProperty(key)){
      newObj[key] = obj[key]
    }
  }
  return newObj
}
let obj = {
  a: 1, 
  b: {
    c: 2, 
    d: 3
  }
}
let newObj = shallowCopy(obj)
console.log(obj);
console.log(newObj);
obj.b.c = 10
console.log(obj);
console.log(newObj);

输出结果：

{ a: 1, b: { c: 2, d: 3 } }
{ a: 1, b: { c: 2, d: 3 } }

{ a: 1, b: { c: 10, d: 3 } }
{ a: 1, b: { c: 10, d: 3 } }

代码解析： 在代码中，我们通过 shallowCopy( ) 函数对 obj 进行了浅拷贝，通过打印我们可以看到拷贝后的新内容和原内容一致。随后我们对原内容进行了更改并再次打印，发现内容同样保持一致。这就是浅拷贝，拷贝内容会受原内容的影响。

深拷贝

// 深拷贝实现
function deepCopy(obj){
  if(typeof obj !== 'object') return
  var newObj = obj instanceof Array ? [] : {}
  for (key in obj){
    if(obj.hasOwnProperty(key)){
      newObj[key] = typeof obj[key] == 'object' ? deepCopy(obj[key]) : obj[key]
    }
  }
  return newObj
}
let obj = {
  a: 1, 
  b: {
    c: 2, 
    d: 3
  }
}
let newObj = deepCopy(obj)
console.log(obj);
console.log(newObj);
obj.b.c = 10
console.log(obj);
console.log(newObj);

输出结果：

{ a: 1, b: { c: 2, d: 3 } }
{ a: 1, b: { c: 2, d: 3 } }

{ a: 1, b: { c: 10, d: 3 } }
{ a: 1, b: { c: 2, d: 3 } }

代码解析： 在代码中，我们通过 deepCopy( ) 函数对 obj 进行了深拷贝，通过打印我们同样可以看到拷贝后的新内容和原内容一致。随后我们同样对原内容进行了更改并再次打印，发现原内容发生改变，而新内容保持不变。这就是深拷贝，拷贝结果不受原内容的影响。

因此，在使用原型模式前，一定要搞清楚深浅拷贝的区别，有时候使用浅拷贝导致的数据混乱，可能会让你排查大半天。