詳解jQuery的拷貝對象

Posted on by 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <script>
        $(function() {
            //1， 普通拷貝，默認為淺拷貝
            var targetObj = {};
            var obj = {
                id: 1,
                name: "andy"
            };
            $.extend(targetObj, obj); //拷貝語法，把obj內的屬性和屬性值拷貝給targetObj一個空對象
            console.log(targetObj); //輸出結果是 obj對象裡面的內容
            //2. 拷貝對象裡面有屬性和屬性值情況下
            var targett = {
                id: 0,
                gshg: 55
            };
            var objrr = {
                id: 1,
                name: "andy"
            };
            $.extend(targett, objrr);
            console.log(targett); // 如果拷貝對象targett裡面屬性和被拷貝對象objrr裡面屬性有相同的，則objrr裡面屬性值會覆蓋掉targett裡面屬性值
            //如果拷貝對象targett裡面有屬性與被拷貝對象objrr裡面屬性名不相同的不會被覆蓋，被拷貝對象objrr裡面屬性隻會後來居上
            //3. 拷貝對象裡面有對象情況下，淺拷貝
            var taytuj = {
                id: 0,
                msg: {
                    sex: '男'
                }
            };
            var rete = {
                id: 1,
                name: "andy",
                msg: {
                    age: 18
                }
            };
            $.extend(true, taytuj, rete);
            console.log(taytuj);
            // 執行過程：
            //1.兩個對象都在內存棧中，其中rete對象裡面的 msg: {  age: 18  }對象放在瞭內存堆中，在淺拷貝中，rete對象裡面的 msg: {  age: 18  }會覆蓋掉taytu對象的msg: {sex: '男' }，屬性值會變成一個16進制指向內存堆中的msg: {  age: 18  }對象,此時棧空間中兩個對象的 msg裡面都有同一個執向內存堆中msg: {  age: 18  }的16進制地址，所以如果淺拷貝完成後，兩個對象裡面msg屬性值隻要一個發生瞭改變，另外一個msg的屬性值也會隨著一起改變
            //淺拷貝：
            //1.屬性名相同的，被拷貝對象會覆蓋掉拷貝對象，排序永遠是後來居上
            //2. 屬性名不相同的則合並
            //深拷貝：
            //1.屬性名相同的，被拷貝對象的屬性和屬性值會覆蓋掉拷貝對象的屬性和屬性值，排序永遠是後來居上
            //2. 屬性名不相同的則合並
            //3.拷貝對象和拷貝對象裡面有對象的，如果對象名相同，屬性名不同，則會合並，並不是覆蓋。
        })
    </script>
</head>
<body>
</body>
</html>

總結

本篇文章就到這裡瞭，希望能夠給你帶來幫助，也希望您能夠多多關註WalkonNet的更多內容!

推薦閱讀：