ES6学习笔记之箭头函数

Posted 2023-02-16 BennuCTech

箭头函数

ES6 允许使用“箭头”（=>）定义函数。

var f = v => v;
// 等同于
var f = function (v) 
  return v;
;

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;
var sum = (num1, num2) => num1 + num2;

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) =>  return num1 + num2; 

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错
let getTempItem = id =>  id: id, name: "Temp" ;
// 不报错
let getTempItem = id => ( id: id, name: "Temp" );

如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。

let fn = () => void doesNotReturn();

this

箭头函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。

this指向的固定化，并不是因为箭头函数内部有绑定this的机制，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

所以，箭头函数转成 ES5 的代码如下。

// ES6
function foo() 
  setTimeout(() => 
    console.log('id:', this.id);
  , 100);

// ES5
function foo() 
  var _this = this;
  setTimeout(function () 
    console.log('id:', _this.id);
  , 100);

除了this，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变量：arguments、super、new.target。

由于箭头函数使得this从“动态”变成“静态”，下面两个场合不应该使用箭头函数:

第一个场合是定义对象的方法，且该方法内部包括this。

const cat = 
  lives: 9,
  jumps: () => 
    this.lives--;
  

调用cat.jumps()时，如果是普通函数，该方法内部的this指向cat；如果写成上面那样的箭头函数，使得this指向全局对象，因此不会得到预期结果。这是因为对象不构成单独的作用域，导致jumps箭头函数定义时的作用域就是全局作用域。

第二个场合是需要动态this的时候，也不应使用箭头函数。