ES6箭头函数

箭头函数

1、箭头函数是匿名函数

JS 中的箭头函数是匿名(anonymous)的，函数的name属性是空字符。

2、箭头函数没有自己的this，arguments，super或new.target，没有原型prototype，不能new对象。

如果你在箭头函数引用了this、arguments或者参数之外的变量，那它们一定不是箭头函数本身包含的，而是从父级作用域继承的。

3、箭头函数不支持new.target

new.target是ES6新引入的属性，普通函数如果通过new调用，new.target会返回该函数的引用。

function Foo(){
  console.log(new.target);
}
Foo();  //打印undefined
new Foo(); //打印Foo函数本身

此属性主要：用于确定构造函数是否为new调用的。

（1）如果箭头函数的this指向全局对象，在箭头函数中使用new.target会报错

let a = () => {
  console.log(new.target); // 报错：new.target 不允许在这里使用
};
a();

（2）如果箭头函数的this指向普通函数，它的new.target就是指向该普通函数的引用。

new bb();
function bb() {
  let a = () => {
    console.log(new.target); // 指向函数bb：function bb(){...}
  };
  a();
}

4、箭头函数的this指向

箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。其实是继承作用域链中的普通函数的this，如果没有指向window。箭头函数的this指向是指向第一层非箭头函数的this。如果箭头函数外层没有普通函数，严格模式和非严格模式下它的this都会指向window(全局对象)。

所以，我们想要改变箭头函数的this指向，需要改变它继承的普通函数的this指向。

由于 箭头函数没有自己的this指针，通过 call() 、 apply()或bind（） 方法调用一个函数时，只能传递参数，不能绑定this，他们的第一个参数会被忽略。

5、使用场景

箭头函数适合于无复杂逻辑或者无副作用的纯函数场景下，例如用在map、reduce、filter的回调函数定义中，另外目前vue、react、node等库，都大量使用箭头函数，直接定义function的情况已经很少了。

箭头函数的this意外指向和代码的可读性，为了代码的可读性，不要多层嵌套箭头函数。

（1）箭头函数作用一：

普通函数中，我们想传递this，比如：

        $('.time').each(function () {
            var self = this;
            setInterval(function () {
                $(self).text(Date.now());
            }, 1000);
        });

但当使用箭头函数时，这个问题就不复存在了。因为它不产生属于它自己上下文的this：

$('.time').each(function () {
  setInterval(() => $(this).text(Date.now()), 1000);
});

 （2）箭头函数作用二：

简化回调函数

比如：map、filter等方法的回调函数

// 正常函数写法
[1,2,3].map(function (x) {
  return x * x;
});

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

 简化事件处理函数：

        $(".time").on("click", (event)=>{
            console.log(event);//jQuery.Event
            console.log(this);//window对象
        })

6、箭头函数没有arguments

（1）箭头函数会继承作用域链中普通函数的arguments，如果没有，不能使用arguments，不然会报错。和new.target一样。

例如：结果为1,2

        function foo() {
            return () => console.log(arguments)
        }

        foo(1, 2)(3, 4) // 1，2

 （2）ES6中arguments的替代者——剩余参数

ES6函数中取消了arguments的特性，同时箭头函数也摒弃了arguments。取而代之的是rest参数，即剩余参数，得到是真正的数组。rest是一个真正的数组，可以使用数组的API。

例子：结果：[1, 2, 3, 4]

        var foo = (...arg) => console.log(arg);

        foo(1, 2,3,4)

7、箭头函数的使用规则

（1）箭头函数可以有一个“简写体”或常见的“块体”。

在一个简写体中，只需要一个表达式，并附加一个隐式的返回值。

        var foo = num => num +1;
        foo(1);//2

在块体中，必须使用明确的return语句。

        var foo = num => {
            num = num + 1;
            return num;
        }
        foo(1);//2

 （2）返回对象字面量

需要用圆括号把对象字面量包起来

        var foo = num => ({
            a: 1,
            b: 2
        })

 数组是不需要的

        var foo = num => [num,num+1,num+2]

        foo(1);//[1,2,3]

 （3）换行

以下都是允许的

var func = (a, b, c) =>
  1;

var func = (a, b, c) => (
  1
);

var func = (a, b, c) => {
  return 1
};

var func = (
  a,
  b,
  c
) => 1;

不允许：

var func = ()
           => 1; 
// SyntaxError: expected expression, got '=>'

8、胖箭头和比较运算符

const negativeToZero = number => number <= 0 ? 0 : number;

为了清楚地将胖箭头与比较操作符区分开，我们可以使用圆括号：

const negativeToZero = number => (number <= 0 ? 0 : number);