问题：

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. 怎样在Eclipse中使用debug模式调试程序

    最基本的操作是: 1, 首先在一个java文件中设断点,然后运行,当程序走到断点处就会转到debug视图下, 2, F5键与F6键均为单步调试,F5是step into,也就是进入本行代码中执行,F6 ...

  2. php数组分页类

    <?php class ArrayPage{ public $totalPage;//全部页数 public $lists;//每页显示数目 public $arr = array();//分页 ...

  3. 通过Orchard认识的Autofac

    反射Reflection 这是.Net中获取运行时类型信息的方式,.Net的应用程序由几个部分:'程序集(Assembly)'.'模块(Module)'.'类型(class)'组成,而反射提供一种编程 ...

  4. Java安全学习

    http://blog.csdn.net/wbw1985/article/details/5506515 http://blog.csdn.net/wbw1985/article/details/60 ...

  5. 解决Qt程序发布时中文乱码问题（通过QApplication.addLibraryPath加载QTextCodec插件）

    Qt程序的文字编码,是通过插件来解决的,所以我们发布的时候需要把相应的插件也发布出去,在开发者电脑上程序会自动从插件目录加载到插件,但是如果发布给别的电脑使用,需要手动指定插件路径,如下所示: int ...

  6. [原]基于CAS实现单点登录（SSO）：cas client端的退出问题

    自从CAS 3.4就很好的支持了单点注销功能,配置也很简单. 之前版本因为在CAS服务器通过HttpClient发送消息时并未指定为POST方式,所以在CAS客户端的注销Filter中没有收到POST ...

  7. java入门学习（九） 算术运算符

    请大家关注我的博客www.taomaipin.com 运算符在java基础中也占有着举足轻重的位置,我们当然要学会它.java 其实和其他计算机语言一样,基本的算术运算符基本一样,让我们看看 有哪些算 ...

  8. oracle 11g常用命令

    1.监听启动监听lsnrctl start停止监听 lsnrctl stop 查看监听状态 lsnrctl status 2.启动用oracle用户进入su - oracle运行sqlplus命令,进 ...

  9. Bootstrap的aria-label与aria-labelledby

    aria-label: 正常情况下,form表单的input组件都有对应的label,当input组件获取到焦点时,屏幕阅读器会读出相应label里的文本. 但是如果没有给输入框设置label时,当其 ...

  10. JavaScript之怎样获取元素节点

    JavaScript获取元素节点一共有三种方法,分别是通过元素ID.通过标签名字和通过类名字来获取: 1.通过元素ID属性的ID值来获得元素对象-getElementById() DOM提供了一个名为 ...