为何全局作用域定义调用的箭头函数用this.title返回undefined？

问题根源 #

1. 箭头函数的this绑定规则：箭头函数没有独立的this，它会继承外层作用域的this。你这里的func是箭头函数，外层是全局作用域，所以this指向浏览器的全局对象window，这和控制台输出一致。
2. let/const的全局变量特性：ES6中用let或const声明的全局变量，不会挂载到全局对象（浏览器环境的window）上。只有var声明的全局变量才会成为window的属性。所以你用let title = "global"定义的变量，并没有变成window.title，自然this.title会返回undefined。

解决方案 #

方案1：改用var声明全局变量

把let换成var，让全局变量挂载到window上，这样this.title就能获取到值：

var title = "global";

const func = () => {
  const title = "func";
  console.log(this); // 输出window对象
  console.log(this.title); // 输出"global"
};

func();

方案2：直接访问全局变量（无需this）

全局作用域下的变量可以直接访问，箭头函数能读取外层作用域的变量。如果要区分函数内的局部变量和全局变量，可以修改局部变量的名称避免冲突：

let title = "global";

const func = () => {
  const funcTitle = "func"; // 修改局部变量名
  console.log(title); // 直接访问全局的"global"
};

func();

方案3：使用普通函数而非箭头函数

普通函数在全局调用时，this也指向window，配合var声明全局变量即可：

var title = "global";

function func() {
  const title = "func";
  console.log(this.title); // 输出"global"
}

func();

内容的提问来源于stack exchange，提问作者Muhammad Azlan khan