黑马程序员技术交流社区

标题: [石家庄校区]JavaScript浅克隆和深克隆 [打印本页]

---

作者: longxf_sjz    时间: 2019-7-21 14:23
标题: [石家庄校区]JavaScript浅克隆和深克隆
一、浅克隆
        浅克隆是指对象只会被克隆最外部的一层,对于更深层的对象,则依然是通过引用指向同一块堆内存区域。
      

[JavaScript] 纯文本查看 复制代码

        <script>

                        // 浅克隆函数

                        function shallowClone(o) {

                                var obj = {};

                                for(var i in o) {

                                        obj = o;

                                }

                                return obj;

                        }

                        // 被克隆对象

                        var oldObj = {

                                a: 1,

                                b: ['e', 'f', 'g'],

                                c: {

                                        h: {

                                                i: 2

                                        }

                                }

                        };

                        var newObj = shallowClone(oldObj);

                        console.log(newObj.c.h, oldObj.c.h); // { i: 2 } { i: 2 }

                        console.log(oldObj.c.h === newObj.c.h); // true

        </script>

debug结果:

我们可以很看到,虽然oldObj.c.h被克隆了,但是它还与oldObj.c.h相等,这表明他们依然指向同一段堆内存,如果对newObj.c.h进行修改,也会影响oldObj.c.h。


二、深克隆
      JSON对象parse方法可以将JSON字符串反序列化成JS对象，stringify方法可以将JS对象序列化成JSON字符串,这两个方法结合起来就能产生一个便捷的深克隆。
     

[JavaScript] 纯文本查看 复制代码

<script>

                        // 浅克隆函数

                        function shallowClone(o) {

                                var obj = {};

                                for(var i in o) {

                                        obj = o;

                                }

                                return obj;

                        }

                        var oldObj = {

                                a: 1,

                                b: ['e', 'f', 'g'],

                                c: {

                                        h: {

                                                i: 2

                                        }

                                }

                        };

                        var newObj = JSON.parse(JSON.stringify(oldObj)); // 将oldObj先序列化再反序列化。

                        console.log(newObj.c.h, oldObj.c.h); // { i: 2 } { i: 2 }

                        console.log(oldObj.c.h === newObj.c.h); // false 这时候就已经不一样了

        </script>

     debug结果:

我们可以很看到,oldObj.c.h与oldObj.c.h不相等了,这表明他们指向了不同的一段堆内存,如果对newObj.c.h进行修改,则oldObj.c.h不受印象。

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2