ES6+ 箭头函数

2021-04-09 | 2024-05-15 | 691 | 3 分钟

语法详解

基本语法

// ES5
var sum = function () { };

// ES6
var sum = () => { };

有返回值

// 当函数体内有返回值时，ES6 的箭头函数可以省略大括号
var sum = (num1, num2) => num1 + num2;

// 当传递的参数只有一个时，圆括号也可以省略
var sum = num => num + 10;

返回值是对象

// 函数体返回对象字面量表达式，可以省略大括号，使用圆括号的形式包裹对象
var getInfo = () => ({a: 1, b: 2});
getInfo();  // {a: 1, b: 2}

默认参数

// 在定义函数时，往往需要给参数添加默认值，ES6 中可以直接在圆括号中进行赋值
var sum = (num1, num2 = 2) => num1 + num2;
console.log(sum(1));   // 3

剩余参数

var fun = (param1, param2, ...rest) => {
  console.log(param1);
  console.log(param2);
  console.log(rest);
};

fun(1, 2, 3, 4, 5);
// 1
// 2
// [3, 4, 5]

注意点

没有 this

箭头函数不会创建自己的 this，它只会从自己的作用域链的上一层继承 this

// 在构造函数中
function Person() {
  this.age = 0;
  setTimeout(function () {
    console.log(this);
  }, 1000);
}
var p = new Person();   // Window: {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}


function Person() {
  this.age = 0;
  setTimeout(() => {
    console.log(this);
  }, 1000);
}
var p = new Person();   // Person: {age: 0}

示例

function Person() {
  var info = {};
  info.num = 10;
  info.getValue = () => {
    console.log(this);
  }
  return info;
}

var p = new Person();
p.getValue(); // person {} 


function Person() {
  var info = {};
  info.num = 10;
  info.getValue = function () {
    console.log(this);
  }
  return info;
}
var p = new Person();
p.getValue(); // {num: 10, getValue: ƒ}   this指向的是 info

不绑定 arguments

箭头函数不绑定 Arguments 对象,所以在使用箭头函数定义的函数体内是取不到 arguments 的

var fun = function() {
  console.log(arguments);
};
fun(1,2,3);  // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

var fun = () => {
  console.log(arguments);
};
fun(1,2,3);  // Uncaught ReferenceError: arguments is not defined

arguments 的主要作用是获取所有调用函数时所需要传入的参数，在箭头函数中使用剩余参数 …args，在函数内可以直接使用
```
function foo(...args) { 
  console.log(args);
}
foo(1);         // [1]
foo(1, 2, 3);   // [1, 2, 3]
```

不能用作构造器

// 箭头函数不能用作构造器，和 new 一起用会抛出错误
var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

没有 prototype 属性

// 箭头函数没有 prototype 属性
var Foo = () => {};
console.log(Foo.prototype); // undefined

不能使用 yield 命令

yield 关键字通常不能在箭头函数中使用，因此箭头函数不能用作 Generator 函数

小结

更短的函数，优雅简洁；

箭头函数不会创建自己的 this，它只会从自己的作用域链的上一层继承 this；

不能绑定 arguments，只能使用 …args 展开运算来获取当前参数的数组；

打赏作者

您的打赏是我前进的动力

微信

支付宝

ES6+ 模版字符串

🌿 reset、revert、rebase 解析

中午好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. 语法详解
2. 注意点
3. 小结