箭头函数和普通函数在处理this时的区别

箭头函数在处理this时与普通函数有所不同：它们从定义时的父作用域继承this。这种行为使得箭头函数特别适用于回调函数和保持上下文环境。然而，箭头函数没有自己的this绑定，因此它们的this值不能通过bind()、apply()或call()方法设置，也不会指向对象方法中的当前对象。以下是一个例子：

// 假设我们有一个哆啦A梦对象，它有一个口袋和一个使用箭头函数的方法
const doraemon = {
  gadgets: ['随意门', '竹蜻蜓', '时光机'],
  showGadgets: () => {
    // 箭头函数继承了定义时的this，这里的this不是doraemon对象，而是全局对象或undefined
    console.log(`口袋里有：${this.gadgets.join(', ')}`);
  }
};

// 当我们尝试调用showGadgets方法时
doraemon.showGadgets(); // 输出: 口袋里有：undefined 或 报错

// 如果我们使用普通函数定义方法
const doraemonWithFunction = {
  gadgets: ['随意门', '竹蜻蜓', '时光机'],
  showGadgets: function() {
    // 这里的this指向doraemonWithFunction对象
    console.log(`口袋里有：${this.gadgets.join(', ')}`);
  }
};

// 这时候调用showGadgets方法，this会正确指向doraemonWithFunction对象
doraemonWithFunction.showGadgets(); // 输出: 口袋里有：随意门, 竹蜻蜓, 时光机

在这个例子中，doraemon对象中的showGadgets方法是一个箭头函数，它试图访问this.gadgets。但由于箭头函数不绑定自己的this，它实际上是在尝试访问定义时的父作用域中的this，在这种情况下通常是全局作用域或者undefined（严格模式下）。这就是为什么doraemon.showGadgets()会失败的原因。

相比之下，doraemonWithFunction对象中的showGadgets方法是一个普通函数，它的this值指向调用它的对象，即doraemonWithFunction，因此能够正确地输出口袋里的道具。

希望这个例子能帮助你理解箭头函数和普通函数在处理this时的区别！