JavaScript中普通函数function(){}与箭头函数()=>{}的区别及this问题解析

为什么箭头函数版本输出Hello undefined？ #

你的代码里，Person.prototype.sayHi用箭头函数定义时，箭头函数不会绑定自身的this，它的this继承自定义时的外层作用域。这里外层是全局作用域（浏览器中为window，Node.js中为global），全局作用域不存在name属性，因此this.name返回undefined。

换成普通函数function () {}时，函数作为对象方法调用（person1.sayHi()），this会自动指向调用该方法的对象person1，所以能正确获取person1.name的值。

JavaScript中普通函数function () {}与箭头函数() => {}的核心区别 #

• this绑定规则不同

  • 普通函数：this指向在调用时确定，取决于调用方式（作为对象方法、构造函数、直接调用，或通过call/apply/bind修改）。
  • 箭头函数：没有自身的this，它的this是定义时外层作用域的this，一旦确定就无法通过call/apply/bind修改。

• 构造函数能力不同

  • 普通函数：可作为构造函数，用new关键字调用时，this指向新创建的实例对象。
  • 箭头函数：不能作为构造函数，用new调用会抛出错误——它没有prototype属性，也无法将this绑定到实例。

• arguments对象存在性不同

  • 普通函数：内部包含arguments对象，存储调用时传入的所有参数。
  • 箭头函数：没有自身的arguments对象，如需访问参数，需使用剩余参数...args替代。

• 写法与简洁性不同

  • 普通函数：写法繁琐，需完整的function关键字与括号。
  • 箭头函数：单个参数可省略括号；函数体仅一行返回语句时，可省略大括号与return关键字，例如const add = (a,b) => a+b。

• prototype属性存在性不同

  • 普通函数：拥有prototype属性，作为构造函数时，实例会继承原型上的方法。
  • 箭头函数：没有prototype属性，无法为其原型添加方法。

内容的提问来源于stack exchange，提问作者Abraham Abah