js中箭头函数解析

1、特性：

1、 没有 this 、 super 、 arguments ，也没有 new.target 绑定。
2、 不能更改 this 。
3、 不能被使用 new 调用。
4、 没有原型。
5、 没有 arguments 对象。
6、 不允许重复的具名参数： 箭头函数不允许拥有重复的具名参数，无论是否在严格模式 下。

2、语法

箭头函数的语法有很多变种，当只有单个参数时就是参数跟着一个箭头然后直接接返回值，就会把箭头后面的值返回不用使用return关键字。如：

var arrFn = value => value;
console.log(arrFn(1)); // 1

// 等价于 ==>
var arrFn = function(value) {
    return value;

}
console.log(arrFn(2)); // 2
当箭头函数的参数有两个时，就需要给参数增加（）。如：

var arrFn = (value, value2) => value + value2;
console.log(arrFn(1, 2)); // 3
// 等价于 ==>
var arrFn = function(value, value2) {
    return value + value2;
}
console.log(arrFn(2, 2)); // 4

如果箭头函数没有任何参数，在声明时就必须使用一对空括号。如：

var arrFn = () => '返回值';
console.log(arrFn()); // 返回值
// 等价于 ==>
var arrFn = function() {
    return '返回值2';
}
console.log(arrFn()); // 返回值2

如果你想创建一个空的箭头函数或者当函数里面有多个语句需要处理时，就必须在箭头后面加上{}。 如：

var arrFn = () => {};
console.log(arrFn()); // undefined
// 等价于 ==>
var arrFn = function() {}
console.log(arrFn()); //undefined

var arrFn = (value, value2) => {
    console.log(1111);
    return value + value2;
}
console.log(arrFn(1, 2)); // 3
// 等价于 ==>
var arrFn = function(value, value2) {
    console.log(222);
    return value + value2;
}
console.log(arrFn(2, 2)); // 4

创建离级调用表达式的语法。如：

(name => {
    console.log(name);
})('箭头函数创建')

3、没有自己的this

在箭头函数的内部没有自己的this，它内部的this取决于当前所在执行上下文对象的this。如：

let obj = {name: 1};
function add(sum1){
    return () => {
        console.log(this);
    }
}
var fn = add();
fn(); // window

var fn = add.call(obj);
fn(); // obj

上述代码一开始add()方法的this指向window，所以在箭头函数内部打印this也是指向的window，后来使用call()方法改变了add()方法this的指向obj，所以此时打印箭头函数内部的this就变成了obj。

4、不能更改 this

因为箭头函数没有自己的this，它的this指向取决于它的爸爸，所以this 的值在函数内部不能被修改，在函数的整个生命周期内其值会 保持不变。如：

let obj = {name: 1};
let arrFn = () => {
    console.log(this);
}
arrFn.call(obj); // window

上述代码，在调用的时候即使使用call()方法手动的改变this的值，但是依然不起作用，this还是指向原来window。

5、不能被使用 new 调用

箭头函数没有 [[Construct]] 方法，因此不能被用为构造函 数，使用 new 调用箭头函数会抛出错误。如:

let arrFn = () => {
    console.log(this);
}
new arrFn(); // 报错arrFn is not a constructor

6、没有原型

既然不能对箭头函数使用 new ，那么它也不需要原型，也就是没有 prototype 属性。如：

let arrFn = () => {
    console.log(this);
}
console.log(arrFn.prototype); // undefined

7、没有 arguments 对象

箭头函数没有 arguments 绑定，必须依赖于具名参数或 剩余参数来访问函数的参数。
虽然箭头函数没有自己的 arguments 对象，但是仍然可以访问包含它的函数的 arguments 对 象。无论箭头函数在何处执行，该对象都是可用的。如：

let arrFn = () => {
    console.log(arguments);
}
arrFn(); // 报错 arguments is not defined

function add(sum1){
    return () => {
        console.log(arguments);
    }
}
var fn = add(1,2,3);
fn(); // Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]

上述代码第一部分直接打印箭头函数的arguments对象，会报错。
第二部分箭头函数在add()方法内定义，即使在外部进行调用依然可以访问add()方法的arguments对象。