ES6中箭头函数的作用


关于ES6中的箭头函数,箭头函数 MDN这篇文章讲得已经很全面了。

箭头函数的两个作用

  1. 更简短的函数写法
let arr = ['hello', 'book'];

arr.map(function(v){
    return v;
}); // ['hello', 'book']

arr.map((v)=>{
    return v;
}); // ['hello', 'book']

arr.map(v=>v);  //  ['hello', 'book']
  1. 不绑定this 在箭头函数出现之前,每个新定义的函数都有它自己的 this值(在构造函数的情况下是一个新对象,在严格模式的函数调用中为 undefined,如果该函数被作为“对象方法”调用则为基础对象等)。 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。对箭头函数调用call/apply方法会忽略第一个参数。
let a = 1;
let f = ()=>{ console.log(this.a);}
f(); // 1
f.call({a:2}); // 1
  1. 箭头函数不绑定arguments
let f = ()=>{ console.log(arguments);}
f(); // Uncaught ReferenceError: arguments is not defined

function a(n){
    let f = () => arguments[0] + n;
    return f();
}
a(1); // 2
  1. 箭头函数不可以使用new操作符作为构造器,也没有prototype属性
let f = ()=>{};
new f(); // Uncaught TypeError: f is not a constructor
console.log(f.prototype); // undefined

function F(){};
console.log(F.prototype);  // {constructor: ƒ} F的构造函数