JS-05拷贝继承

目录

1 前置问题

2 拷贝继承实现

3 拷贝封装

4 浅拷贝和深拷贝

5 应用广泛

---

场景：想使用某个对象中的属性，但是又不能直接修改它，于是就可以创建一个该对象的拷贝

1 前置问题

   直接将一个对象source赋值给另一个对象target，此时两个是同一个对象（共享），修改任一个对象，另一个对象也会随之改变（不能实现上述问题）

var source={name:"张三",age:18};

var target=o3

• var source={name:"张三",age:18}
• var target={};
• target.name=source.name
• target.age=source.age;

这段代码可以实现需求，但是如果属性过多，则会出现代码冗余现象。

2 拷贝继承实现

 1、已经拥有了o3对象

 2、创建一个o3对象的拷贝(克隆)：for...in循环

        a、取出o3对象中的每一个属性

        b、获取到对应的属性值

        c、把属性值放到o4中

3、修改克隆对象，把该对象的name属性改为"李四"

  。。。后续如果修改了o4对象中的相关属性，就不会影响到o3

代码实现：

<script>
    var o3={name:"张三",age:18};
    var o4={};
    for (var key in o3) {//key就是o3对象中的每一个属性
        var value = o3[key];
        o4[key] = value;
    }

    o4.name="李四"
    console.log(o4);    //最终的目标对象的结果

</script>

3 拷贝封装

上面的方式很明显无法重用，实际代码编写过程中，很多时候都会使用拷贝继承的方式，所以为了重用，可以编写一个函数把他们封装起来： 

<script>
函数：封装拷贝代码块
    function extend(source,target){
        for (var key in source) {
            var value = source[key];
            target[key] = value;
        }
    }

    var o3={name:"张三",age:18};

    var o4={};
    extend(o3,o4);
    o4.name="李四";

    var o5={};
    extend(o3,o5);
    o5.name="wangwu";
</script>

4 浅拷贝和深拷贝

- 浅拷贝知识拷贝一层属性，没有内部对象

-  深拷贝其实是利用递归的原理，将对象的若干层属性拷贝出来

var students=[
    {name:"",age:""},
    {name:"",age:""}
]

5 应用广泛

+ 由于拷贝继承在实际开发中使用场景非常多，所以很多库都对此有了实现
    - jquery：$.extend

+ es6中有了对象扩展运算符仿佛就是专门为了拷贝继承而生：

  var source={name:"张三",age:18}
//让target是一个新对象，同时拥有了name、age属性
  var target={ ...source }
  var target2={ ...source,age:20 } 修改属性值