对象深浅拷贝封装方法和案例

一.js的内存结构

js的内存结构 === js的原型类型和引用类型
原始数据类型:数值,字符串,布尔,null,undefined
引用类型:对象(存储在堆内存中)

//基本类型例子:
let a = 10
let b = a;
a = 20
conosle.log(a)//20
console.log(b)//10


a = 10(后来改成了20)                                       空
b = a = 10												  空
栈内存	                                                 堆内存

//注:所以a=20,b还是原来的10

//引用类型例子:
let a = {name:'小花'}
let b = a;
a.name = '小红'
console.log(a)//小红
console.log(b)//小红

a                   ------------->
b = a               ------------->                    小花(改成了小红)
栈内存                                                     堆内存
//注:
//a和b都指向了堆内存中的小花,
//把小花改成小红,
//那么他们指向的都是小红,
//所以a和b都变成了小红

二.vue.js的对象列表

	//提交表单向列表添加数据例子:
	<form>
      <input type="text" v-model="stu.name">
      <input type="text" v-model="stu.age">
      <button @click="innerList">添加</button>
    </form>
    <ul>
      <li v-for="(item,index) in list" v-key="item">年龄:{{item.name}},年龄:{{item.age}}</li>
    </ul>

	innerList () {
      this.list.push(this.copy(this.stu))
    },
    copy (obj) {
      let newObj = {}
      for (let i in obj) {
        newObj[i] = obj[i]
      }
      return newObj
    },

	 stu: {
        name: '',
        age: ''
      },
      stu: {
        name: '',
        age: '',
        girlfriend:{
          name:''
        }
      },

三.浅拷贝(无法拷贝引用类型)

	var obj = {
      name: '小明',
      age: '2',
      girlfriend: {
        name: '小花'
      }
    }
    // 浅拷贝
    var newObj = this.ShallowCopy(obj)
    obj.name = '小华'
    obj.girlfriend.name = '小红'
    console.log("浅拷贝:", JSON.stringify(obj))//浅拷贝: {"name":"小华","age":"2","girlfriend":{"name":"小红"}}
    console.log("浅拷贝:", JSON.stringify(newObj))//浅拷贝: {"name":"小明","age":"2","girlfriend":{"name":"小红"}}

浅拷贝封装方法

 //浅拷贝封装方法
    ShallowCopy (obj) {
      let newObj = {}
      for (let i in obj) {
        newObj[i] = obj[i]
      }
      return newObj
    }

四.递归

function fun(n){
	if(n == 1){
		return 1
	}else{
		return n+fun(n-1)
	}
}
let result = fun(1)
console.log(result)


fun(1):1
fun(2):2+fun(2-1)=3
fun(3):3-fun(3-1)=6

五.深度拷贝

// 深拷贝
    var obj = {
      name: '小明',
      age: '2',
      girlfriend: {
        name: '小花'
      }
    }
    var newObj = this.DeepCopy(obj)
    obj.name = '小华'
    obj.girlfriend.name = '小红'
    console.log("深拷贝:", JSON.stringify(obj))//深拷贝: {"name":"小华","age":"2","girlfriend":{"name":"小红"}}
    console.log("深拷贝:", JSON.stringify(newObj))//深拷贝: {"name":"小明","age":"2","girlfriend":{"name":"小花"}}

(1)深拷贝封装方法

//深拷贝封装方法
	 DeepCopy (obj) {
      let newObj = {}
      for (let i in obj) {
        if (obj[i] instanceof Object) {
          newObj[i] = this.DeepCopy(obj[i])
        } else {
          newObj[i] = obj[i]
        }
      }
      return newObj
    }

(2)深度克隆方法JSON.parse(JSON.stringify(obj))

	var newObj = JSON.parse(JSON.stringify(obj))
    obj.name = '小华'
    obj.girlfriend.name = '小红'
    console.log("深拷贝:", JSON.stringify(obj))
    console.log("深拷贝:", JSON.stringify(newObj))