ES6新特性2：箭头函数

Posted 2021-12-29 孔子-说

欢迎阅读《ES6新特性系列》

ES6标准新增了一种新的函数：Arrow Function（箭头函数），允许使用箭头 =>定义函数。相对于普通函数，在语法上类似于C＃，Java 8中的相关功能，支持表达式和语句体。与普通函数不同，箭头函数与this周围的代码拥有相同的作用域。箭头函数有以下特征：1、不需要 function 关键字来创建函数。2、省略 return 关键字。3、this始终指向函数申明时所在作用域下的this值(即箭头函数里面根本没有自己的this，而是引用外层的this)。

使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体。

箭头函数的作用

// 1、使表达更加简洁
const isEven = n => n % 2 === 0;
const square = n => n * n;

// 2、简化回调函数
// 普通函数写法
[1,2,3].map(function (x) 
  return x * x;
);

// 箭头函数写法
[1,2,3].map(x => x * x);

1、无参数箭头函数

// es5 写法
var fun = function() 


// es6 箭头函数写法
// 没有参数时，需要用()进行占位，代表参数部分
var fn = () => 


// 以上2种写法是等价的。

2、1个参数箭头函数

当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

let print = function (obj)
    console.log(obj);

// 简写为：
let print2 = obj => console.log(obj);

3、多个参数箭头函数

let sum = function(a,b)
    return a + b;

// 简写为：
let sum2 = (a,b) => a + b;
// 也可以简写为：
let sum3 = (a,b) =>  return a + b; 

4、可变参数箭头函数

var fn = function(a, b, ...args) 

// 简写为：
var fn = (a, b, ...args) => 

5、当有多行代码时，可以使用 括起来函数体

函数体如果只包含一个表达式，可以省略 ... 和return。若包含多条语句，这时候就不能省略 ... 和return。

let sum3 = (a.b) =>
    return a+b;


let hello3 = () =>
    console.log("Hello");
    console.log("World");
;
hello3();

6、对象参数和返回值

// 注意，用小括号包含大括号则是对象的定义，而非函数主体
x => key: x // 报错
x => (key: x) // 正确

// 如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。
// 报错
let getTempItem = id =>  id: id, name: "Temp" ;
// 不报错
let getTempItem = id => ( id: id, name: "Temp" );

// 如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。
let fn = () => void doesNotReturn();

6、函数默认值

// ES6 之前，无法给一个函数参数设置默认值，只能采用变通写法：

function add(a,b) // 如果没有给参数b传值，则b=1
    b = b || 1;
    return a+b;

console.log(add(10));	//输出11
console.log(add(10，20));	//输出30


// ES6之后
function add(a,b = 1)
    return a+b;

console.log(add(10));	//输出11
console.log(add(10，20));	//输出30

7、对象的函数属性简写

let person = 
    name: "Tom",
    // ES6之前
    eat: function (food)
        console.log(this.name + "在吃" + food);
    
    // 箭头函数写法
    eat2: food => console.log(person.name + "在吃" + food);
	// 简写版
	eat3(food)
        console.log(this.name + "在吃" + food);
    

8、箭头函数结合解构表达式

const person = 
    name: "Tom",
    age: 20,
    language: ["Java","Python","JS"]

// 普通写法
function hello(person)
    console.log("Hello," + person.name);


// 以下是使用箭头函数和解构表达式的写法
var hi = (name) => console.log("hello," + name);
hi(person);

9、箭头函数this

对于普通函数来说，内部的this指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的this对象，内部的this就是定义时上层作用域中的this。也就是说，箭头函数内部的this指向是固定的，相比之下，普通函数的this指向是可变的。

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


var id = 21;

foo.call( id: 42 );
// id: 42

上例中setTimeout()的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是id: 42），所以打印出来的是42。

function Timer() 
    this.s1 = 0;
    this.s2 = 0;
    // 箭头函数
    setInterval(() => this.s1++, 1000);
    // 普通函数
    setInterval(function () 
        this.s2++;
    , 1000);


var timer = new Timer();

setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0

上面代码中，Timer函数内部设置了两个定时器，分别使用了箭头函数和普通函数。前者的this绑定定义时所在的作用域（即Timer函数），后者的this指向运行时所在的作用域（即全局对象）。所以，3100 毫秒之后，timer.s1被更新了 3 次，而timer.s2一次都没更新。

箭头函数实际上可以让this指向固定化，绑定this使得它不再可变，这种特性很有利于封装回调函数。下面是一个例子，DOM 事件的回调函数封装在一个对象里面。

var handler = 
  id: '123456',

  init: function() 
    document.addEventListener('click',
      event => this.doSomething(event.type), false);
  ,

  doSomething: function(type) 
    console.log('Handling ' + type  + ' for ' + this.id);
  
;

上面代码的init()方法中，使用了箭头函数，这导致这个箭头函数里面的this，总是指向handler对象。如果回调函数是普通函数，那么运行this.doSomething()这一行会报错，因为此时this指向document对象。

总之，箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。正是因为它没有this，所以也就不能用作构造函数。

继续阅读《ES6新特性3：变量的解构赋值》

上一篇《ES6新特性1：let 和 const 命令》