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

速冻鱼
750 阅读2分钟

「这是我参与2022首次更文挑战的第17天，活动详情查看：2022首次更文挑战」

大家好，我是速冻鱼🐟，一条水系前端💦，喜欢花里胡哨💐，持续沙雕🌲
欢迎小伙伴们加我微信：sudongyuer拉你进群
关注我的公众号:前端速冻鱼一起进步，期待与大家共同成长🥂

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

  • 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

mdn对连等的解释

连等为右结合性

image-20220203014846074

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

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}

image-20220203013454493

line 2

let prevA=a

image-20220203013615974

line3

a.x=(a={n:2})
image-20220203013134637

结论 🥷

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

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

结束语🌞

那么鱼鱼的的淦！五行代码，难倒几十个前端群的小伙伴这篇文章就结束了，菜不菜不重要，但是热爱🔥，喜欢大家能够喜欢我的短文，也希望通过文章认识更多志同道合的朋友，如果你也喜欢折腾，欢迎加我好友，一起沙雕，一起进步。

github🤖:sudongyu

个人博客👨‍💻:速冻鱼blog

vx👦:sudongyuer

写在最后

伙伴们，如果喜欢我的口水话给🐟🐟点一个赞👍或者关注➕都是对我最大的支持。

avatar
文章
阅读
粉丝