a.x = a = {n: 2}在js中到底是怎么执行的?

680 阅读2分钟

一道面试题引发的思考

昨天在qq群看到了这样的一道面试题

QQ图片20220416115006.png

输出是undefined和{n:2}

既然赋值操作是自右向左的,为什么a.x变成了undefined,虽然网上的很多解释都是.运算符的优先级高,使得a.x优先执行,所以才会有这样的输出,我个人经过调试之后认为这个说法是不正确的。由此我就想到a.x = a = {n: 2}到底是怎么执行的。

通过控制台在a.x = a = {n:2}处打断点可以看到在此行时a的值。

QQ图片20220416115338.png

其实不管是前面的a还是后面的a,在此行执行时所指向的都是{n:1}的地址,也就是说这一行作为一个整体,在执行完之前是不会改变a的值的,为了验证我的想法,我们运行这一行再看a的值。

QQ图片20220416115528.png

很明显,执行完之后a理所应当的指向了{n:2}的地址。

同样的,为了验证想法,我们可以写一个简单的赋值例子

    var a = 1
    var b = 2
    a = b = 3

QQ图片20220416115743.png QQ图片20220416115740.png

可以看出来,在执行这行的时候,不管是a还是b都没有被赋值为3,他们的赋值操作均是在这行结束时才执行的。

也就是说虽然赋值的方向是从右向左进行赋值,但是这一行做为一个整体的语句,在执行完成之前都不会给对应的栈内存赋值

下面是我画的图,大概解释了一下到底a = b = 3做了什么,从而推导出a.x = a = {n:2}做了什么

image.png

image.png

总结

以上均为我根据调试器得到的结果进行的设想,我个人只是不赞成.运算符导致a.x先执行这个说法,不代表我的想法是完全正确的,如果我的想法有问题希望大家能够友善的在评论区指出,我一定虚心接受。