js连续赋值与求值顺序,应用场景举例

本文探讨了JavaScript中连续赋值与求值顺序的问题,通过一个面试题为例,解释了为什么`a.x = a = {n:2}`会导致`console.log(a.x)`输出`undefined`。关键在于理解`.`运算符的优先级高于赋值操作,并且JavaScript会沿着原型链查找属性。此外,文章提到了这种理论在Vue源码中的应用,特别是在状态值监控的情景下,对象地址改变会触发监控器,而变量值的简单赋值则不会。

面试题中经常会遇到js连续赋值与求值顺序问题:

var a = {n: 1};
var b = a; 
a.x = a = {n: 2}; 
console.log(a.x); // undefined
console.log(b.x); // {n:2}

上面的例子看似简单,但结果并不好了解a.x不是指向对象a了么?为啥log(a.x)是undefined?

这个题目其实就是问的你是否了解js引用类型“赋值”的工作方式。下面对这个进行分析:

首先是

var a = {n:1};
var b = a;

在这里a指向了一个对象A:{n:1},b指向了a所指向的对象,也就是说,在这时候a和b都是指向对象A的:
继续看下一行非常重要的代码:

a.x = a = {n:2};

js的赋值运算顺序永远都是从右往左的,不过由于“.”是优先级最高的运算符,所以这行代码先“计算”了a.x。

这时候发生了这个事情——a指向的对象{n:1}新增了属性x(虽然这个x是undefined的):a={n:1,x:undefined}
由于b跟a一样是指向对象A的,要表示A的x属性除了用a.x,所以:b={n:1,x:undefined}
接着继续执行 a.x=a,很多人会认为这里是“对象B也新增了一个属性x,并指向对象B自己”
但实际上并非如此,由于. 运算符最先计算,一开始js已经先计算了a.x,便已经解析了这个a.x是对象A的x,所以在同一条公式的情况下再回来给a.x赋值,也不会说重新解析这个a.x为对象B的x。
所以 a.x=a 应理解为对象A的属性x指向了对象B:{n:2},所以:
b={n:1,x:{n:2}}
a={n:2}
当console.log(a.x)的时候,a是指向对象B的,但对象B没有属性x。没关系,当查找一个对象的属性时,JavaScript

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值