箭头函数为何没有自身的this？箭头函数与普通函数的差异及适用场景解析

这个问题太典型了，正好能帮你搞懂箭头函数和普通函数最核心的区别！咱们一步步来拆解：

箭头函数是ES6专门为了简化词法作用域绑定设计的，它从诞生起就没有自己的执行上下文——也就是说，它不会像普通函数那样，根据调用方式绑定属于自己的this，而是直接“继承”定义它时外层作用域的this值。

回到你的代码例子：

• 用箭头函数定义的test方法，它的this是在定义时就确定的，也就是全局作用域的window（浏览器环境下），和调用它的myStr完全没关系。
• 而普通函数testing作为原型方法，当你用myStr1.testing()调用时，JS会自动把this绑定到调用这个方法的对象（也就是myStr1这个字符串实例），这是普通函数的标准this绑定规则。

除了this绑定，两者还有这些关键区别：

• 构造函数能力：箭头函数没有prototype属性，不能用new关键字调用，没法用来创建对象实例；普通函数可以作为构造函数使用。
• arguments对象：普通函数内部可以通过arguments获取所有传入的参数；箭头函数没有这个内置对象，要实现类似功能得用ES6的剩余参数...args。
• 动态this可能性：普通函数的this可以通过call/apply/bind手动修改；箭头函数的this一旦确定就没法改变，永远指向外层作用域的this。
• 生成器支持：箭头函数不能使用yield关键字，没法作为生成器函数。

优先用箭头函数的场景： #

• 数组回调：比如map、filter、forEach这类方法的回调，用箭头函数可以省去手动绑定this的麻烦，比如：

  const team = {
    name: "Frontend",
    members: ["Alice", "Bob"],
    listMembers() {
      return this.members.map(member => `${this.name} team has ${member}`);
    }
  };
  

  这里箭头函数直接继承了listMembers里的this（也就是team对象），不用写var self = this或者.bind(this)。
• 嵌套函数需要外层this：比如在对象方法内部的嵌套函数里，想直接用外层方法的this，箭头函数是最优解。

必须用普通函数的场景： #

• 对象的方法/原型方法：就像你例子里的testing，需要this指向调用方法的对象实例时，只能用普通函数。
• 构造函数：用来创建实例的函数，比如function Person(name) { this.name = name }，必须用普通函数。
• 事件处理函数：如果希望this指向触发事件的DOM元素，就得用普通函数，箭头函数的this会指向外层作用域，达不到预期。
• 需要使用arguments或动态修改this：这些场景箭头函数满足不了，只能用普通函数。

内容的提问来源于stack exchange，提问作者Yahya Ghandour