javascript中的箭头函数有何特点【教程】

箭头函数不是普通函数的简写,它没有自己的this、arguments、super、new.target,不能用作构造函数,不支持yield,无prototype属性,无法访问argum

ents对象,单参数单表达式可省略括号和return。

箭头函数不是普通函数的简写替代,它没有自己的 thisargumentssupernew.target,也不能用作构造函数。

箭头函数没有独立的 this 绑定

它的 this 始终继承自外层作用域(词法绑定),不会随调用方式改变。这在事件回调、定时器或对象方法中特别明显:

  • 普通函数:obj.method()this 指向 obj;但 setTimeout(obj.method, 100)this 会变成 windowundefined(严格模式)
  • 箭头函数:无论怎么调用,this 都固定为定义时所在上下文的 this
  • 因此不能用来定义对象方法(除非你明确想捕获外层 this),也不适合需要动态 this 的场景(如 Vue 选项对象里的 methods)

箭头函数不能用 new 调用

它没有 [[Construct]] 内部方法,尝试 new (() => {}) 会直接抛出 TypeError: xxx is not a constructor

  • 没有 prototype 属性((() => {}).prototypeundefined
  • 无法通过 instanceof 判断实例关系
  • 若需构造行为,必须用 function 声明或 class

没有 arguments 对象,也不支持 yield

箭头函数体内访问 arguments 会报 ReferenceError,因为它不创建自己的参数绑定。

  • 替代方案是使用剩余参数:(...args) => args[0]
  • 不支持 yield,所以不能用作生成器函数(() => { yield 1 } 语法错误)
  • 也没有 callercallee(已被废弃,但普通函数仍可访问;箭头函数彻底不可用)

单参数、单表达式可省略括号和 return

这是唯一被广泛接受的语法糖,但容易误读逻辑边界:

  • x => x * 2 等价于 function(x) { return x * 2; }
  • x => { x * 2 } 不会返回值(块级语句无隐式返回),必须写成 x => ({ x: x * 2 }) 才返回对象字面量
  • 多参数或含语句体时,括号和花括号不可省:(a, b) => { console.log(a + b); }

真正容易踩坑的是把箭头函数当“更短的 function”来用——它改写了函数的核心契约。是否用它,关键看你要不要 this 动态绑定、要不要构造实例、要不要 arguments。这些不是风格问题,是语义差异。