關於JQuery中$.data綁定數據原理或邏輯

時間 2019-11-12

原文原文鏈接

問題：

JQuery中，對於.data([key],[value])函數，當使用其進行數據綁定時，假設要綁定的數據是「引用數據類型」，也就是對象；那麼.data函數綁定的是該對象的副本仍是該對象的一個引用？下面經過如下小例子來測試下：javascript

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Test</title>
 6     <style type="text/css">
 7         div{
 8             min-height: 40px;
 9             width: 70%;
10             text-align: center;
11             padding: 10px;
12             border: 1px solid green;
13         }
14     </style>
15     <script src="jquery-1.11.1.js" type="text/javascript"></script>
16 </head>
17 <body>
18     <h3>測試$.data函數</h3>
19     <h4>
20         <li>當綁定的數據是有多層嵌套的JSON對象時，</li>
21         <li>給第一層DIV綁定第一層的JSON對象</li>
22         <li>給第二層DIV綁定第二層的JSON對象</li>
23         <li>......</li>
24         <li>那麼，若是修改了第N層DIV綁定的JSON對象，則上層、上上層、。。。綁定的JSON對象會不會更新對應修改層的JSON對象？</li>
25         <li>---------</li>
26         <li>測試一：取數據 - 改取出的數據，不從新綁定 - 打印該元素的綁定數據</li>
27         <li>測試二：取數據 - 改取出的數據，從新綁定給該元素 - 打印該元素的綁定數據</li>
28         <li>測試三：取數據 - 改取出的數據，從新綁定給該元素 - 更新上級、上上級、...元素綁定的數據 - 打印該元素的綁定數據 和 上級、上上級、...元素綁定的數據</li>
29         <li>---------</li>
30         <li>測試一：已更新， 而且包括上級、上上級、...元素綁定的數據都更新了</li>
31         <li>測試二：OK</li>
32         <li>測試三：OK</li>
33     </h4>
34     <div class="first">
35         <div class="second">
36             <div class="third"></div>
37         </div>
38     </div>
39     <script type="text/javascript">
40         var data = {
41             name: "first",
42             next: {
43                 name: "second",
44                 next: {
45                     name: "third",
46                     next: false
47                 }
48             }
49         };
50         $('.first').data('test', data);
51         $('.second').data('test', data["next"]);
52         $('.third').data('test', data["next"]["next"]);
53 
54         //測試一
55         var td = $('.third').data('test');
56         td["name"] = td["name"] + "-modify";
57 
58         //打印
59         console.log($('.first').data('test'));
60         console.log($('.second').data('test'));
61         console.log($('.third').data('test'));
62     </script>
63 </body>
64 </html>

使用Chrome打開該網頁後，並查看頁面的控制檯打印以下：css

由上圖，能夠推斷出：$.data函數綁定給元素的對象時引用了該對象，而不是將對象「複製了一份」的副本綁定給元素；html

也就是說，把一個對象綁定給A元素，再把該對象的子對象綁定給B元素，而後取出B元素綁定的對象，並修改這個取出的對象，以後，即便咱們不把修改後的對象從新綁定給B元素；下次取B對象綁定的該數據時，他也已經被修改了；而且取A元素綁定的對象時，該對象中的綁定給B元素的子對象也顯示被修改了；如以上代碼：java

咱們在第55行、56行修改了.third的綁定的數據，以後第59行、60行、61行直接打印的當前對象、父對象、父父對象，顯示都被修改了（也就是third變成了third-modify）；jquery