jQuery.each()为什么callback log结果为必然为最后一次修改的值

学习jQuery.each()方法,发现在回调函数里面,先打印DOM对象,再修改DOM对象的某个属性值,打印出的对象已经具有该属性值了。照理说,脚本语言,不应该是逐行解释运行吗?
问题相关代码,请勿粘贴截图
var colors = ['yellow', 'green', 'blue'];
//问题1
 $('[class^="box"]').each(function (i, dom) {
                1.$(dom).css('color', 'blue')
                2.console.log($(dom).css('color')); //rgb(0, 0, 255)
                3.console.log(dom.style.color); //blue
                4.console.log(i); //0
                5.console.log(dom); //<div class="box1" style="background-color: red; color: yellow;">red</div>
                6.$(dom).css('color', colors[i]);
                7.console.log(dom); //<div class="box1" style="background-color: red; color: yellow;">red</div>
                8.console.log(dom.style.color); //yellow
            }
)
//问题2
 console.log($(dom).css('color')); //rgb(0, 0, 0)
                0.console.log(dom);     //<div class="box1" style="background-color: red; color: yellow;">red</div>
                1.console.log(dom.style.color); //无结果
                2.console.log(i); //0
                3.console.log(dom);     //<div class="box1" style="background-color: red; color: yellow;">red</div>
                4.$(dom).css('color', colors[i])
                5.console.log(dom);     //<div class="box1" style="background-color: red; color: yellow;">red</div>
                6.console.log(dom.style.color); //yellow
运行结果及报错内容

回调函数执行一次的运行结果见备注,可以发现:
问题一:
明明是在第6行再次更改了对象颜色属性为yellow,
但是第5行的打印结果也是yellow?当第5行明明还没有赋值
问题二:
第1行dom元素打印颜色值为空?
应该是因为我没有显式的赋予颜色值,而是继承的
继承的属性值是没有包含在DOM对象的属性里面吗

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

不管在callback 的任何地方,打印DOM对象,其颜色属性都是以最后一次修改为准
但是单独打印DOM颜色属性,不管是用jQuery对象还是DOM对象获取颜色属性,都是以上一次修改为准

我想要达到的结果
  1. 解决 DOM对象为什么还没赋予属性值,但打印对象已经添加了?
  2. 解决 DOM对象整个输出,对象内部的颜色属性 和 DOM对象.样式.颜色 不一致的问题

firefox第5行正常的是blue

img


chrome可能做了优化,打印dom只显示最后设置的颜色
题主将dom.style用JSON.stringify打印出来看color是blue的,这个肯定是没问题的,只是chrome显示不一样而已

img

就和打印引用对象一样,在打印对象后,再修改对象的数据,当从控制台展开后,实际是最后修改的值,并不是当时对象的值。要看当时的值要用JSON.stringify将对象转为字符串后打印才是当时的值。

img

您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!
PS:问答VIP年卡 【限时加赠:IT技术图书免费领】,了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632