j*ascript箭头函数是什么_它与普通函数有何不同

箭头函数是ES6引入的简洁函数表达式,无自身this/arguments/super/new.target,继承外层作用域值;语法更短,单表达式自动返回;不能用作构造函数、Generator函数,不支持call/apply/bind改变this。

javascript箭头函数是什么_它与普通函数有何不同

箭头函数是 ES6 引入的一种简洁写法的函数表达式,它没有自己的 thisargumentssupernew.target,而是从外层作用域继承这些值。它最直观的特点是语法更短,且行为上与普通函数有关键差异。

语法更简洁,省略 function 关键字和 return(单表达式时)

箭头函数用 => 定义,参数列表后直接跟函数体。当只有一条表达式语句时,可省略花括号和 return 关键字。

  • 普通函数:const add = function(a, b) { return a + b; };
  • 箭头函数:const add = (a, b) => a + b;(自动返回)
  • 单参数时还可省括号:const square = x => x * x;
  • 无参数需写空括号:const sayHi = () => console.log('Hi');

this 绑定方式完全不同:箭头函数不绑定 this,而是继承外层 this

这是最常被忽略也最重要的区别。普通函数的 this 取决于调用方式(如对象方法、call/apply、事件回调等),而箭头函数的 this 在定义时就确定了,始终等于外层作用域的 this

  • 在对象方法中使用箭头函数,this 不会指向该对象,而是指向定义时所在上下文(通常是全局或外层函数)
  • 适合用在回调中避免 this 丢失,比如 setTimeout(() => this.doSomething(), 100),不用再写 bind(this) 或缓存 const self = this
  • 不能用 callapplybind 改变箭头函数的 this

没有自己的 arguments 对象,也不支持 new 调用

箭头函数内部访问 arguments 会报错(ReferenceError),应改用剩余参数 ...args;它也没有 prototype 属性,因此不能作为构造函数使用,调用 new 会抛出错误。

MagicArena MagicArena

字节跳动推出的视觉大模型对战平台

MagicArena 163 查看详情 MagicArena
  • 错误写法:const fn = () => console.log(arguments); → 报错
  • 正确替代:const fn = (...args) => console.log(args);
  • new (() => {}) → TypeError: is not a constructor

不能用作 Generator 函数,也没有 yield 关键字支持

箭头函数不支持 function* 语法,也不能使用 yield。如果需要生成器行为,必须使用普通函数声明或表达式。

  • const gen = () => yield 1;(语法错误)
  • function* gen() { yield 1; }

基本上就这些。箭头函数不是普通函数的“升级版”,而是定位不同的工具:适合写简短回调、避免 this 陷阱;但涉及动态上下文、构造实例或需要 arguments 的场景,就得用普通函数。

以上就是j*ascript箭头函数是什么_它与普通函数有何不同的详细内容,更多请关注其它相关文章!

本文转自网络,如有侵权请联系客服删除。