js作用域的问题

Question

如何解释下面的两端代码运行结果1a中回调b，b打印x。b为什么拿不到a中的x；leta=fn=>{constx=1;fn();};letb=()=>{console.log(x)};a(b);//UncaughtReferenceError:xisnotdefined2leta=fn=>{x=1;fn();};letb=()=>{console.log(x)};x;//UncaughtReferenceError:xisnotdefineda(b);//1

Answer 1

这个问题主要是箭头函数的作用域问题。
箭头函数的作用域在定义时就绑定好了。
第一题：
执行a(b)
a函数中定义x变量，并执行b
但b函数的作用域，在定义时就已经绑定为window，window中没有x，故报错，xisnotdefined。
第二题：
打印x，这是两个函数都没执行，故报错，xisnotdefined。
执行a(b)
a函数中直接给x赋值，由于没有声明，会直接赋值到window对象上，这时window.x=1。
执行b，b的作用域在window，所以自然就能打印出x
                            

Answer 2

作用域是看文法环境的。在1中，首先b的函数作用域中没有变量x的定义，然后就去作用域链的上层去找。这一步很关键，作用域链的上层是‘b函数定义’所在的环境，我们假设b函数是在全局定义的，那b函数作用域的上层就是全局作用域。很明显在全局作用域下没有x变量。不同是是在2中，定义x时没有用关键字，所以x还就是一个全局变量（也就是在demo和面试题中这么写，项目中会被骂死的）