【22/03】jQuery.each()打印对象已经具备还未添加的属性值问题

• jQuery 遍历 - each() 方法
• 语法： $(selector).each(function(index,element))
• 参数：function(index,element)
• 描述：必需。为每个匹配元素规定运行的函数。
  1. index - 回调函数第一个参数一定是索引号，可以自己指定索引号名称
  2. element - 回调函数第二个参数与一定是DOM对象（也可使用 “this” 选择器）

1.问题产生

学习jQuery.each()方法，发现在回调函数里面，先打印DOM对象，再修改DOM对象的某个属性值，打印出的对象已经具有该属性值了。照理说，脚本语言，不应该是逐行解释运行吗？

2. 问题相关代码

var colors = ['yellow', 'green', 'blue']; 
$('[class^="box"]').each(function (i, dom) {

	//模块1 DOm对象继承颜色属性为黑
    console.log(i); //0
    console.log(dom);   //color: yellow;
    console.log($(dom).css('color')); //rgb(0, 0, 0) 继承为黑色
    console.log(dom.style.color); //无结果
    
	//模块2   设置为蓝色
    $(dom).css('color', 'blue')
    console.log(dom); //color: yellow;
    console.log($(dom).css('color')); //rgb(0, 0, 255)
    console.log(dom.style.color); //blue
    
	//模块3   设置为黄色
    $(dom).css('color', colors[i])
    console.log(dom); //color: yellow;
    console.log($(dom).css('color')); //rgb(0, 0, 255)
    console.log(dom.style.color); //yellow
})

3. 运行结果及报错内容

所有的 console.log(dom); 执行结果都一样，为下面这行输出：
 <div class="box1" style="background-color: red; color: yellow;"></div>
    

回调函数执行一次的运行结果见备注，可以发现：

1. 问题一：
   明明是在到模块3里才更改了对象颜色属性为yellow，
   但是所有直接输出DOM对象的打印结果中，颜色属性为yellow？明明打印的时候还没有赋值
2. 问题二：
   模块1 console.log(dom.style.color); 该行输出结果dom元素打印颜色值为空?
   应该是因为我没有显式的赋予颜色值，而是继承的，继承的属性值是没有包含在DOM对象的属性里面吗

4. 我的解答思路和尝试过的方法

不管在callback 的任何地方，打印DOM对象，其颜色属性都是以最后一次修改为准
但是单独打印DOM颜色属性，不管是用jQuery对象还是DOM对象获取颜色属性，都是以上一次修改为准
更奇怪的事情发生了：
<div class="box1" style="background-color: red; color: yellow;"></div> 运行控制台输出结果
<div class="box1" style="background-color: red;"></div> 调试控制台输出结果

5. 我想要达到的结果

解决 DOM对象为什么还没赋予属性值，但打印对象已经添加了？
解决 DOM对象整个输出，对象内部的颜色属性 和 DOM对象.样式.颜色 不一致的问题

6. 解决方法

1. 大佬的回复

   • chrome可能做了优化，打印dom只显示最后设置的颜色
     题主将dom.style用JSON.stringify打印出来看color是blue的，这个肯定是没问题的，只是chrome显示不一样而已
   2. 就和打印引用对象一样，在打印对象后，再修改对象的数据，当从控制台展开后，实际是最后修改的值，并不是当时对象的值。要看当时的值要用JSON.stringify将对象转为字符串后打印才是当时的值。
      

2. 自己的单步调试
   
   对应的单步调试结果：
   

3. 只使用DOM

    var boxs = document.querySelectorAll('[class^="box"]')
        for (var i = 0; i < boxs.length; i++) {
           console.log(i); //0
           console.log(boxs[i]); 
           console.log(boxs[i].style.color); //无结果
   
           boxs[i].style.color = 'blue'
           console.log(boxs[i]);
           console.log(boxs[i].style.color); //blue
   
           boxs[i].style.color = 'yellow'
           console.log(boxs[i]);
           console.log(boxs[i].style.color); //yellow
       }
   

   对应的结果·
   

7. 结论

可以发现如大佬所言，实时情况（比如调试或JSON.stringify）下，DOM对象确实颜色属性为正确赋值，而不是以最后一次为准。通过解决方法3可以发现：这个问题的产生和JQuery一点关系都没有。回归问题本身 就是对象引用的问题。

打印引用对象：即使在打印对象后，再修改对象的数据；但当从控制台展开后，实际是最后修改的值，并不是当时对象的值。要看当时的值要用JSON.stringify将对象转为字符串后打印才是当时的值。

突然发现我好傻…对象其实存的是地址，那么打印对象的时候，地址里面的值已经被更改了