js对象及深拷贝

JS 对象创建与拷贝

五种创建对象的方法

1、对象字面量的方式

person = { firstname: 'Mark', lastname: 'Yun', age: 25, eyecolor: 'black' }

2、用 function 来模拟无参的构造函数

function Person() {}
var person = new Person() //定义一个function，如果使用new"实例化",该function可以看作是一个Class
person.name = 'Mark'
person.age = '25'
person.work = function() {
  alert(person.name + ' hello...')
}
person.work()

3、用 function 来模拟参构造函数来实现（用 this 关键字定义构造的上下文属性）

function Pet(name, age, hobby) {
  this.name = name //this作用域：当前对象
  this.age = age
  this.hobby = hobby
  this.eat = function() {
    alert('我叫' + this.name + ',我喜欢' + this.hobby + ',是个程序员')
  }
}
var maidou = new Pet('麦兜', 25, 'coding') //实例化、创建对象
maidou.eat() //调用eat方法

4、用工厂方式来创建（内置对象）

var wcDog = new Object()
wcDog.name = '旺财'
wcDog.age = 3
wcDog.work = function() {
  alert('我是' + wcDog.name + ',汪汪汪......')
}
wcDog.work()

5、用原型方式来创建

function Dog() {}
Dog.prototype.name = '旺财'
Dog.prototype.eat = function() {
  alert(this.name + '是个吃货')
}
var wangcai = new Dog()

合并两个对象

let object1 = { a: 1, b: 2, c: 3 }
let object2 = { b: 30, c: 40, d: 50 }
let merged = { ...object1, ...object2 } //spread and re-add into merged
console.log(merged) // {a:1, b:30, c:40, d:50}

深拷贝和浅拷贝

js 数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和引用数据类型。

• 基本数据类型：直接存储在栈(stack)中的数据
• 引用数据类型点：存储的是该对象在栈中引用，真实的数据存放在堆内存里

深拷贝和浅拷贝的主要区别就是在内存中的存储类型不同。堆和栈是内存中划分出来用来存储的区域。

• 栈（stack）为自动分配的内存空间，它由系统自动释放。
• 堆（heap）则是动态分配的内存，大小不定也不会自动释放。

数据的比较

基本类型的比较是值的比较，只要它们的值相等就认为他们是相等的，例如：

var a = 10
var b = 10
console.log(a === b) //true

而引用类型的比较是引用的比较，所以每次我们对 js 中的引用类型进行操作的时候，都是操作其对象的引用，所以比较两个引用类型，是看其的引用是否指向同一个对象。例如：

var a = [1, 2, 3]
var b = [1, 2, 3]
console.log(a === b) // false

传值与传址

基础数据类型的赋值都是属于传值，两个变量是两个独立相互不影响的变量。举个例子；

var a = 10
var b = a

a++
console.log(a) // 11
console.log(b) // 10

但是引用类型的赋值是传址。只是改变指针的指向，例如，也就是说引用类型的赋值是对象保存在栈中的地址的赋值，这样的话两个变量就指向同一个对象，因此两者之间操作互相有影响。例如：

var a = {} // a保存了一个空对象的实例
var b = a // a和b都指向了这个空对象

a.name = 'jozo'
console.log(a.name) // 'jozo'
console.log(b.name) // 'jozo'

b.age = 22
console.log(b.age) // 22
console.log(a.age) // 22

console.log(a == b) // true

深拷贝

深拷贝复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制。 深拷贝后的对象与原来的对象是完全隔离的，互不影响，对一个对象的修改并不会影响另一个对象。

浅拷贝

浅拷贝是会将对象的每个属性进行依次复制，但是当对象的属性值是引用类型时，实质复制的是其引用，当引用指向的值改变时也会跟着变化。

区别

浅拷贝和深拷贝都只针对于引用数据类型，浅拷贝只复制指向某个对象的指针，而不复制对象本身，新旧对象还是共享同一块内存；但深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。

区别：浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制；

let obj = {
  name: 'Tom',
  age: 18,
  hobbies: ['reading', 'photography']
}
let obj1 = obj
let obj2 = Object.assign({}, obj)
let obj3 = { ...obj }
let obj4 = JSON.parse(JSON.stringify(obj))

obj.name = 'Jack'
obj.hobbies.push('coding')
console.log(obj) //{ name: 'Jack', age: 18,hobbies: [ 'reading', 'photography', 'coding' ] }
console.log(obj1) //{ name: 'Jack', age: 18,hobbies: [ 'reading', 'photography', 'coding' ] }
console.log(obj2) //{ name: 'Tom', age: 18,hobbies: [ 'reading', 'photography', 'coding' ] }
console.log(obj3) //{ name: 'Tom', age: 18,hobbies: [ 'reading', 'photography', 'coding' ] }
console.log(obj4) //{ name: 'Tom', age: 18,hobbies: [ 'reading', 'photography' ] }

从以上例子可以看出，当数据为引用数据类型时

1. 直接赋值属于浅拷贝
2. Object.assign，当数据第一层为基本数据类型时，新的对象和原对象互不影响，这属于深拷贝，但是如果第一层的属性值是复杂数据类型，那么新对象和原对象的属性值其指向的是同一块内存地址，这是浅拷贝。
3. 扩展运算符和Object.assign原理一样。
4. JSON.parse(JSON.stringify(obj))可实现深拷贝

深拷贝的实现

1. JSON.parse(JSON.stringify(obj)) 但存在一些缺陷

• 对象的属性值是函数时，无法拷贝。
• 原型链上的属性无法拷贝
• 不能正确的处理 Date，RegExp 类型的数据
• 会忽略 undefined

2. 实现一个 deepClone 函数

• 如果是基本数据类型，直接返回
• 如果是 RegExp 或者 Date 类型，返回对应类型
• 如果是复杂数据类型，递归。
• 考虑循环引用的问题

function deepClone(obj, hash = new WeakMap()) {
  //递归拷贝
  if (obj instanceof RegExp) return new RegExp(obj)
  if (obj instanceof Date) return new Date(obj)
  if (obj === null || typeof obj !== 'object') {
    //如果不是复杂数据类型，直接返回
    return obj
  }
  if (hash.has(obj)) {
    return hash.get(obj)
  }
  /**
   * 如果obj是数组，那么 obj.constructor 是 [Function: Array]
   * 如果obj是对象，那么 obj.constructor 是 [Function: Object]
   */
  let t = new obj.constructor()
  hash.set(obj, t)
  for (let key in obj) {
    //递归
    if (obj.hasOwnProperty(key)) {
      //是否是自身的属性
      t[key] = deepClone(obj[key], hash)
    }
  }
  return t
}