es6中箭头的用法

打印 上一主题 下一主题

主题 566|帖子 566|积分 1698

在ES6(ECMAScript 2015)中,箭头函数(Arrow Functions)提供了一种更简洁的函数表达式语法,并且它们不绑定自己的this、arguments、super或new.target。这些值由外围的正常函数值(即包含箭头函数的函数)提供。以下是关于箭头函数用法的详细解释:
1. 基本语法
箭头函数的基本语法是:
javascript
复制
(参数1, 参数2, ..., 参数N) => { 函数体 }
// 或者当函数体只有一条语句时,可以省略大括号和return关键字
(参数1, 参数2, ..., 参数N) => 表达式
2. 参数处理
单个参数:当函数只有一个参数时,可以省略小括号。
javascript
复制
a => a * 2
无参数:当函数没有参数时,必须写一对空的小括号。
javascript
复制
() => { console.log('Hello, World!') }
多个参数:当函数有多个参数时,需要使用小括号包裹参数,并用逗号分隔。
javascript
复制
(a, b) => a + b
3. 函数体处理
单条语句:如果函数体只有一条语句,可以省略大括号,并自动返回该语句的结果。
javascript
复制
a => a * 2
多条语句:如果函数体有多条语句,需要使用大括号包裹,并使用return关键字返回结果。
javascript
复制
(a, b) => {
  let sum = a + b;
  console.log(sum);
  return sum;
}
4. 不绑定this
箭头函数不会创建自己的this上下文,所以this的值将继承自外围函数或全局对象(在浏览器中是window)。这使得箭头函数在需要访问外围this的情况下特别有用,比如回调函数和事件处理器。
javascript
复制
function MyObject() {
  this.value = 1;
  this.increment = () => {
    this.value++;
  };
}
const obj = new MyObject();
obj.increment();
console.log(obj.value); // 2

在上面的例子中,即使increment是作为一个方法调用的,它仍然能够访问MyObject实例的this。
5. 不绑定arguments对象
箭头函数不绑定arguments对象。如果你需要函数内的参数列表,可以在函数体内使用剩余参数(rest parameters)语法...args。
6. 不能用作构造函数
箭头函数没有prototype属性,因此它们不能用作构造函数,即不能使用new关键字调用。
7. 没有super或new.target
箭头函数没有super或new.target。
8. 简洁的回调函数
箭头函数常用于回调函数,因为它们可以使代码更加简洁,并且不需要处理this的上下文问题。
javascript
button.addEventListener('click', () => {
  console.log('Button clicked!');
});
9. 立即执行的箭头函数
虽然不常见,但箭头函数也可以立即执行。
javascript

(() => console.log('I am immediately invoked!'))();

注意,上述代码中,外层的小括号是必需的,因为它们将箭头函数定义包裹为一个表达式,从而允许立即执行。
 

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

卖不甜枣

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表