ES6学习笔记–箭头函数

箭头函数一直在用,最近突然想到重新看一下箭头函数的用法,所以这里做一些总结.

箭头函数长这个样子:

let fn = a => a++;  // fn 是函数名, a=>a*a 是函数体

这个函数就类似于:

let fn = function (a) {
  return a++;
}

上面的实例就是一个参数的情况,当然也可以没有参数,或者有多个参数

没有参数

// 示例1
let fn = () => 2 + 3;
// 相当于
let fn = function() {
  return 2 + 3;
}
//=========我是分割线===========
// 示例2
let fn1 = () => console.log('Hello World!');
// 相当于
let fn1 = function() {
  console.log('Hello World!');
}

两个及以上参数

// 示例1
let fn1 = (a, b) => a + b;
// 相当于
 let fn1 = function(a, b) {
   return a + b;
 };
 //=========我是分割线===========
 // 示例2
 let fn2 = (a, b, ...rest) => {
   let i, sum = a + b;
   for( i = 0; i < rest.length; i++ ){
     sum += rest[i];
   }
   return sum;
 }
 // 相当于
 let fn2 = function(a, b,...rest) {
   let i, sum = a + b;
      for( i = 0; i < rest.length; i++ ){
        sum += rest[i];
      }
      return sum;
 }

说明: 上面的示例2,因为箭头右侧的函数代码块不止一条语句,所以要使用{ }(大括号) 包起来,如果需要接收函数的执行结果,则需使用 return 返回,比如下面的情况

let fn = (a, b) => { a + b };

控制台输出:

没有 return ,所有没有返回值

一种特殊情况

由于大括号会被解释为代码块,所以在使用箭头函数时,如果要返回一个对象,则 必须 把这个对象用 () 包裹起来.

// 错误代码
let fn1 = (a, b) => {
  name: a,
  age: b
}
console.log(fn1('Jack', 20));

这个是会报错的,正确的应该这样

// 正确的写法
let fn1 = (a, b) => (
  {
    name: a,
    age: b
  }
)

箭头函数可以与变量结构结合使用

let personInfo = {
  firstname: 'chen',
  lastname: 'huigong'
 }
let person = ({ firstname, lastname }) => firstname + ' ' + lastname;
console.log(person(personInfo));
// 相当于
let person = function(person) {
  return person.firstname + ' ' + person.lastname;
}
console.log(personInfo);

一些注意点

箭头函数在使用的时候有一些注意点.

1. 函数体内的 this 对象, 指的是定义时的对象,而不是使用时所在的对象

箭头函数看上去是匿名函数的简写,但是箭头函数和匿名函数有一个特别明显的区别: 箭头函数内部的 this 是词法作用域,由上下文确定,看下面的代码

let person = {
  birthday: 1990,
  getAge: function() {
    let b = this.birthday;  // 1990
    let fn = function() {
      return new Date().getFullYear() - this.birthday;  // this 现在指向 window 或 undefined
    };
     return fn();
  }
}
person.getAge();  // NaN

此时,由于fn里面的 this 不指向 person 自身,所以执行 person.getAge() 就会出现问题

使用箭头函数就解决了这个问题

let person = {
  birthday: 1990,
  getAge: function() {
    let b = this.birthday;  // 1990
    let fn = () => new Date().getFullYear() - this.birthday; // this 指向 person 对象
     return fn();
  }
}
person.getAge();  // 27

使用了箭头函数,则以前的 hack 写法就不需要了

let _this = this;

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

1. 箭头函数是不可以当做 构造函数 的,也就是说,不可以使用 new 命令,否则会抛出错误.

2. 不可以使用 arguments 对象,该对象在函数体内是不存在的.如果要使用,可以用 rest 参数代替.

3. 不可以使用 yield 命令,因此箭头函数不能用作Generator函数.

其他的一些问题

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

function foo() {
  setTimeout(() => {
    console.log('args:', arguments);
  }, 100 )
}foo(2, 4, 6, 8);  // args: [2, 4, 6, 8]

上面代码中,箭头函数内部的变量arguments,其实是函数foo的arguments变量.另外,由于箭头函数没有自己的this,所以当然也就不能用call()、apply()、bind()这些方法去改变this的指向.