云驹博客

路漫漫其修远兮,吾将上下而求索。

0%

JavaScript箭头函数和普通函数的区别

JavaScript 普通函数和箭头函数的区别

普通函数

1
2
3
function fun() {
return "Hello World!";
}

箭头函数

1
const fun = () => "Hello World!";

区别:

  • 声明方式
    • function关键词可以声明具名函数和匿名函数。也可声明为匿名函数然后使用赋值给变量
    • 箭头函数只能声明为匿名函数,如果需要重复使用,可将匿名函数赋值给变量(如上方代码案例)
  • this指向不同
    • 普通函数的this指向为函数运行时所在的对象
    • 箭头函数的this指向为上层作用域中的this
  • 箭头函数的this无法通过call, apply, bind方法改变
  • 箭头函数没有原型prototype
  • 箭头函数不能作为构造函数
  • 箭头函数自身没有arguments字段
  • 箭头函数中不能出现重复的参数变量名称,function关键字声明的函数可以
  • 不可以使用yield命令,因此箭头函数不能用作Generator函数

不适用

  • 使用对象字面量声明对象时使用箭头函数this指向对象外层的this
  • 当函数需要动态this时,如addEventListener方法的第二个参数是回调函数,有时会需要在回调函数中调用this(this中指向触发事件的元素对象)

可能有遗漏,欢迎评论区补充