ES6新特性2：箭头函数

Posted 2021-07-31 孔子-说

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：变量的解构赋值》