淦！五行代码，难倒几十个前端群的小伙伴

下面三道题，你能非常清晰的知道为什么结果会是那样么？是否符合你心中的预期呢？🤪

• first

let a={n:1}
let prevA=a
a.x=a={n:2}
console.log(a.x)//undefined
console.log(prevA.x)//{n:2}

• second

function good() {
  var var1 = 1, var2 = 1, var3 = 1;
}

function bad() {
  var var1 = var2 = var3 = 1;
}

good();
console.log(window.var2); // undefined

bad();

console.log(window.var2); // 1. Aggh!

• third

    function go(){
            let a=b=c=1 
        }
        go()
        console.log(b)//1
        console.log(c)//1

• four

var president = {name:"Pooh",next:president}
console.log(president)

• five

let president = {name:"Pooh",next:president}
console.log(president)

mdn对连等的解释

连等为右结合性

根据以上题目代码的执行结果,我更倾向于将连等的想象成下面这样的模型

let a=b=c=1

👇

let a=b b=c c=1

or

let a=(b=(c=1))

第一题的详细解析🔥

Source code

let a ={n:1}
let prevA=a
a.x=(a={n:2})
console.log(a.x)
console.log(prevA)

下面是对javascript代码的模型构建👇

line 1

let a ={n:1}

line 2

let prevA=a  

line3

a.x=(a={n:2})

结论

Tip:如果你还是无法理解，你可以理解为a.x作为表达式的左侧它被缓存住了，不受表达式右侧的影响，如果你的心智模型足够强壮💪，你就能像我一样画出上面的图来解释这段代码了

• 永远记住在javascript模型中 =左边是wire（线）
• 永远记住在javascript模型中 =右边是value（值）
• let a=b=c=1 👉 let a=(b=(c=1))