js作用域的问题

Question

如何解释下面的两端代码运行结果
1
a中回调b，b打印x。b为什么拿不到a中的x；
leta=fn=>{constx=1;fn();};
letb=()=>{console.log(x)};
a(b);//UncaughtReferenceError:xisnotdefined
2
leta=fn=>{x=1;fn();};
letb=()=>{console.log(x)};
x;//UncaughtReferenceError:xisnotdefined
a(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和面试题中这么写，项目中会被骂死的）