问题：

JQuery中，对于.data([key],[value])函数，当使用其进行数据绑定时，假设要绑定的数据是“引用数据类型”，也就是对象；那么.data函数绑定的是该对象的副本还是该对象的一个引用？下面通过以下小例子来测试下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Test</title>

     <style type="text/css">

         div{

             min-height: 40px;

             width: 70%;

             text-align: center;

             padding: 10px;

             border: 1px solid green;

         }

     </style>

     <script src="jquery-1.11.1.js" type="text/javascript"></script>

 </head>

 <body>

     <h3>测试$.data函数</h3>

     <h4>

         <li>当绑定的数据是有多层嵌套的JSON对象时，</li>

         <li>给第一层DIV绑定第一层的JSON对象</li>

         <li>给第二层DIV绑定第二层的JSON对象</li>

         <li>......</li>

         <li>那么，如果修改了第N层DIV绑定的JSON对象，则上层、上上层、。。。绑定的JSON对象会不会更新对应修改层的JSON对象？</li>

         <li>---------</li>

         <li>测试一：取数据 - 改取出的数据，不重新绑定 - 打印该元素的绑定数据</li>

         <li>测试二：取数据 - 改取出的数据，重新绑定给该元素 - 打印该元素的绑定数据</li>

         <li>测试三：取数据 - 改取出的数据，重新绑定给该元素 - 更新上级、上上级、...元素绑定的数据 - 打印该元素的绑定数据 和 上级、上上级、...元素绑定的数据</li>

         <li>---------</li>

         <li>测试一：已更新， 并且包括上级、上上级、...元素绑定的数据都更新了</li>

         <li>测试二：OK</li>

         <li>测试三：OK</li>

     </h4>

     <div class="first">

         <div class="second">

             <div class="third"></div>

         </div>

     </div>

     <script type="text/javascript">

         var data = {

             name: "first",

             next: {

                 name: "second",

                 next: {

                     name: "third",

                     next: false

                 }

             }

         };

         $('.first').data('test', data);

         $('.second').data('test', data["next"]);

         $('.third').data('test', data["next"]["next"]);

         //测试一

         var td = $('.third').data('test');

         td["name"] = td["name"] + "-modify";

         //打印

         console.log($('.first').data('test'));

         console.log($('.second').data('test'));

         console.log($('.third').data('test'));

     </script>

 </body>

 </html>

使用Chrome打开该网页后，并查看页面的控制台打印如下：

由上图，可以推断出：$.data函数绑定给元素的对象时引用了该对象，而不是将对象“复制了一份”的副本绑定给元素；

也就是说，把一个对象绑定给A元素，再把该对象的子对象绑定给B元素，然后取出B元素绑定的对象，并修改这个取出的对象，之后，即使我们不把修改后的对象重新绑定给B元素；下次取B对象绑定的该数据时，他也已经被修改了；并且取A元素绑定的对象时，该对象中的绑定给B元素的子对象也显示被修改了；如以上代码：

我们在第55行、56行修改了.third的绑定的数据，之后第59行、60行、61行直接打印的当前对象、父对象、父父对象，显示都被修改了（也就是third变成了third-modify）；

结论：

$.data函数绑定的对象是对源对象的一个引用，当我们修改该源对象时，绑定到元素上的对象也会“随之而修改（其实引用并未变，只是源对象发生了改变）”；

这下，只要我们绑定的数据是引用数据类型，大可放心、任意修改之了！

关于JQuery中$.data绑定数据原理或逻辑的更多相关文章

  1. 【 D3.js 选择集与数据详解 — 2 】 使用data()绑定数据

    D3 中绑定数据大多是由 data() 函数来完成的,它是怎样工作的,它与 datum() 有什么区别呢? data()函数能够将数组各项分别绑定到各元素上,而且能够设置绑定的规则.data()还能够 ...

  2. 练习 jquery+Ajax+Json 绑定数据 分类： asp.net 练习 jquery+Ajax+Json 绑定数据 分类： asp.net

    练习 jquery+Ajax+Json 绑定数据

  3. jQuery 中 data 方法的实现原理

    前言:jQuery 作为前端使用最多最广泛的 JS 库,其源码每个 JSer 都应该研究一下.早就打算看却一直被各种事拖着,上次某公司面试时被问到 jQuery 中 data 方法是如何实现的,结果答 ...

  4. 05 HTML字符串转换成jQuery对象、绑定数据到元素上

    1 要求 将一段 HTML脚本 封装成一个字符串,将这个字符串转换成一个jQuery对象:然后将这个jQuery对象添加到指定的元素中去 2 步骤 定义字符串 var str = '<div i ...

  5. D3.js系列——初步使用、选择元素与绑定数据

    D3 的全称是(Data-Driven Documents),顾名思义可以知道是一个被数据驱动的文档.听名字有点抽象,说简单一点,其实就是一个 JavaScript 的函数库,使用它主要是用来做数据可 ...

  6. D3.js 选择元素和绑定数据/使用数据

    选择元素和绑定数据是 D3 最基础的内容,本文将对其进行一个简单的介绍. 一.如何选择元素 在 D3 中,用于选择元素的函数有两个: d3.select():是选择所有指定元素的第一个 d3.sele ...

  7. 【 D3.js 入门系列 — 2 】 绑定数据和选择元素

    1. 如何绑定数据 D3 有一个很独特的功能:能将数据绑定到 DOM 上,也就是绑定到文档上.这么说可能不好理解,例如网页中有段落元素<p>,我们可以将整数 5 与 <p>绑定 ...

  8. 【菜鸟学习jquery源码】数据缓存与data()

    前言 最近比较烦,深圳的工作还没着落,论文不想弄,烦.....今天看了下jquery的数据缓存的代码,参考着Aaron的源码分析,自己有点理解了,和大家分享下.以后也打算把自己的jquery的学习心得 ...

  9. jQuery源码解读 - 数据缓存系统：jQuery.data

    jQuery在1.2后引入jQuery.data(数据缓存系统),主要的作用是让一组自定义的数据可以DOM元素相关联——浅显的说:就是让一个对象和一组数据一对一的关联. 一组和Element相关的数据 ...

随机推荐

  1. mysql学习(三)

    //解决linux下不能远程登陆的方法 http://www.blogjava.net/jasmine214--love/archive/2011/01/14/342981.html mysql数据类 ...

  2. Mysql表锁定解决

    #查看进程SELECT *FROM information_schema.processlistWHERE USER = 'root' AND state LIKE 'Waiting%';#杀掉进程K ...

  3. FAQ:Python 断点调试

    Python程序调试:断点调试是必须有的功能,以Pycharm开发工具为例: 一.理论知识: 1. step into(F7)就是单步执行,遇到子函数就进入并且继续单步执行: 2  step over ...

  4. PHP之MVC微型框架简单搭建

    好长时间没有写博客了,这段时间过得紧张的不行,以致于都没有抽出时间来好好的总结一下自己这段时间的生活和学习. 其实今天不想写什么技术博客,就想简单总结一下这段时间的生活.10月8号从家里回来以后决定自 ...

  5. JSP中的Attribute和InitParameter

    属性:Attribute类型:应用/上下文,请求,会话(ServletContext,HttpServletRequest/ServletRequest,HttpSession)设置方法:setAtt ...

  6. 几家SIEM

    HP Arcsight Imperva is a HP Business Partner. HP is the world's largest IT company, providing infras ...

  7. vs指定QT的工作目录（其它项目也是如此）

    当一个工程依赖第三方动态库时,这时vs编译出来后,运行会提示缺少动态库.解决方法: 项目->属性->调试: 工作目录:指定程序运行时的目录 环境:指定程序运行时的环境变量 我们可以在环境变 ...

  8. 在Centos 5.x或6.x上安装RHEL EPEL Repo

    本文介绍了如何在CentOS 5.x或者CentOS 6.x的系统上使用Fedora Epel repos一个第三方repo:remi资源库.这些资源包并不是天然地支持CentOS,但是提供了很多流行 ...

  9. NOI2014 Day2

    NOI2014 Day2 动物园 题目描述:给出一个字符串(长度为\(Len\)),设\(num[i]\)为字符串的前\(i\)个字符构成的子串(\(A\))中,满足\(A\)的前\(L\)个字符既是 ...

  10. poj1657---chessboard

    对棋盘横纵坐标的解读 str1="f3" str2="e9" x=abs(str1[0]-str2[0]) y=abs(str1[1]-str1[1]) 如果x ...