JavaScript中作用域由什么构成？对象大括号为何不算作用域？

一、JavaScript里的作用域由啥构成？ #

JavaScript的作用域分三类：

• 全局作用域：代码运行的最外层环境，浏览器里对应window对象，Node.js模块顶层的this指向module.exports（初始是空对象）。
• 函数作用域：每声明一个函数，就会生成一个独立的作用域，函数内部的变量和外部互不干扰。
• 块级作用域：ES6之后新增的，只有用let/const配合{}才能创建，比如if判断、for循环的大括号里，用这两个关键字声明的变量只在当前块里有效。

二、为啥对象的大括号不算作用域？ #

对象字面量的{}只是用来写键值对的语法结构，根本不会创建新的作用域。也就是说，对象里定义的函数（不管是普通函数还是箭头函数），它的作用域还是看它被声明时所在的外部环境，和对象本身没关系。

拿你的代码举例：

• 普通函数sayHi调用时，this会指向调用它的user对象，所以能正常拿到this.firstName。
• 箭头函数sayHiWithArrow在声明时，就绑定了它外围作用域的this——在Node.js模块里，这个外围作用域就是模块顶层，this指向空的module.exports，所以this.firstName就是undefined，输出才会那样。

要是想让箭头函数能访问到user的属性，可以把它放到普通函数里面，利用函数作用域来捕获正确的this：

const user = {
  firstName: "John",
  sayHi() {
    const arrowHi = () => {
      console.log(`Hello, ${this.firstName} from inner arrow!`);
    };
    arrowHi(); // 这里的this继承自sayHi的this，也就是user
  }
};
user.sayHi(); // 输出 Hello, John from inner arrow!

内容的提问来源于stack exchange，提问作者aarshin gupta