导读
如果你查阅了javascript箭头函数的资料，大抵会得出这样的结论：
1、箭头函数最大的特点是没有this，如果在箭头函数内部使用this，则this指向函数被定义时所在的作用域所指向的this；
2、不能作为构造函数；
3、不能用new操作符调用；
4、没有prototype属性；
5、不能用call/apply/bind去改变this指向；
6、也没有属于自己的arguments、super、new.target。
我们知道this指向问题是箭头函数诞生的最主要原因，但是，它为什么不能作为构造函数、为什么不能用new操作符调用、又为什么没有prototype，是刻意的设计还是修改this问题带来的副作用？如果你有兴趣深入研究，欢迎往下看并留言指正和补充。
一、箭头函数的特点
这一章我会把箭头函数常见的8个特点用举例的方式罗列出来。
1、箭头函数没有this，箭头函数如果内部使用了this，那么这个this永远等于：箭头函数定义时所在的词法作用域所指向的this，如果这个词法作用域的this是动态的，那箭头函数的this也是动态的。
function Foo() {
setTimeout( () => {
console.log(this.id);
}, 100);
}
var id = 21;
var obj = { id: 42 }
Foo(); //21
Foo.call(obj); //42
箭头函数作为实参传入setTimeout，是在Foo(){...}这个函数作用域里定义的，而这个作用域的this指向哪儿，箭头函数的this就指向哪儿。所以：
(1)、Foo()调用的时候，this指向全局，所以箭头函数的this也指向全局。
(2)、Foo.call(obj)调用的时候，this指向obj，所以箭头函数的this也指向obj。
2、如果箭头函数外层没有普通函数，无论严格模式还是宽松格模式，它的this都会指向window(全局对象)，而普通函数严格模式下this为undefined。
3、箭头函数因为没有this，所以不能用call、apply、bind去改变this指向。
(x => this.a+x).call( { a:20 } ) //不会报错，只是this指向不会被改变
4、箭头函数不能用new操作符调用。
var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor
5、箭头函数因为不能用new操作符调用，所以也没有new.target属性。
PS:new.target属性用于确定构造函数是否为new调用
6、箭头函数不存在 prototype 属性。
var Foo = () => {};
console.log(Foo.prototype); // undefined
7、箭头函数也没有自己的arguments、super。如果箭头函数内部使用到，指向外层函数的arguments、super。
function Foo() {
setTimeout(() => {
console.log(arguments);
}, 100);
}
Foo(2, 4, 6, 8); //[2, 4, 6, 8]
但是可以用rest参数去获取箭头函数不定数量的参数：
var Foo = (...rest) => {
console.log(rest)
}
Foo(2, 4, 6, 8); //[2, 4, 6, 8]
8、箭头函数都是匿名函数。
我们知道匿名函数有以下几个不足：
(1) 匿名函数在栈追踪中不会显示出有意义的函数名，使得调试很困难。
(2) 如果没有函数名，当函数需要引用自身时只能使用已经过期的 arguments.callee 引用，比如在递归中。另一个函数需要引用自身的例子，是在事件触发后事件监听器需要解绑自身。
(3) 匿名函数省略了对于代码可读性/可理解性很重要的函数名。在不污染命名空间的时候，一个语义化的名称可以让代码不言自明。
匿名函数的特点也隐隐指出哪些场合可以用箭头函数，哪些场合不合适。此外，用作IIFE立即执行函数时，箭头函数和普通函数也有一个细微区别：
/**普通函数这两种写法都可以*/
( function(x){console.log(x)} )(1);
( function(x){console.log(x)}(1) );
/**箭头函数只支持一种写法*/
( x => {console.log(x)} )(1);
( x => {console.log(x)}(1) ); //不支持
二、箭头函数为什么有这些特点？
更少的字符、没有麻烦的this、匿名函数（没有函数名）、没有prototype、不允许用new调用。这一切看起来都让箭头函数看上去是普通函数的精简版。从掌握的资料来看，有理由认为箭头函数是一种职责更单一的函数。让我们往下分析！
1、this是引擎创建执行上下文（Execution Contexts）时，提供给出来的API，是外部JS代码访问当前执行上下文的唯一通道，而箭头函数关闭了这个通道，它并不希望提供当前执行上下文给外部。
（1）首先明确一点：箭头函数是真的没有this，而不是所谓的继承外层函数的this。箭头函数内部使用this时看上去更像闭包！翻阅ECMAScript规范看到：
规范明确说明了箭头函数没有this、argument、super和new.target。如果在这种情况下你仍然在箭头函数内部使用this，那么此时是往外层作用域找到这个this的，看上去非常像闭包不是吗：
//箭头函数内部使用this
function Foo() {
var Bar = () => {
console.log(this);
};
return Bar;
};
Foo()();
//用闭包方式引用外层this
function Foo() {
var self = this;
var Bar = () => {
console.log(self);
};
return Bar;
};
Foo()();
（2）每个函数被调用之时引擎都会主动创建一个执行上下文（execution context）。这个上下文会包含函数在哪里被调用（通常是函数环境记录Function Environment Records）、函数的调用方法、传入的参数等信息。从ECMAScript规范可以看到：
只要不是箭头函数（ArrowFunction）就会提供this绑定。箭头函数是个特例受到了特殊对待。所以，this是属于执行上下文的一部分，同时也是引擎唯一一个暴露给外部JS代码用以访问当前执行上下文的通道，而引擎把箭头函数的通道给关了，表明引擎并不希望把箭头函数的执行上下文提供给外部。
当然this有它自己特定的用途，它提供了一种更优雅的方式来隐式“传递”一个对象引用，因此可以将 API 设计得更加简洁并且易于复用。 随着你的使用模式越来越复杂，显式传递上下文对象会让代码变得越来越混乱，使用 this 则不会这样。但我猜你的代码里肯定也存在这样的代码：
function add(x,y) {
return x + y;
};
这类函数在业务代码里大量存在，压根没有用到this，但引擎仍然会为其绑定一个this，无疑是一种不小的开销和浪费。所以单从没有this这点上讲，表明箭头函数运行时省去了一些步骤，同时也表明普通函数能做的事箭头函数不一定能胜任，不可能相互替代。不想面对麻烦的this也不是选择箭头函数的唯一理由，还有什么理由选择用箭头函数呢，请往下看。
2、箭头函数为什么不能用new调用
（1）一个函数能被new操作符调用的条件是什么？看看规范怎么说：
规范指出，一个函数能用new操作符调用那么它必定是一个constructor，而是一个constructor的条件是它具有[[Construct]] internal method（内置的构造方法）。并且
A function object is not necessarily a constructor指出函数不一定都是constructor。恰好我们的主角箭头函数就是这一类不是constructor的函数。那么为什么箭头函数不是constructor？回答这个问题前，我们首先要知道constructor最最最主要的作用是
creates and initializes objects，也就是创建和初始化对象，然后我们要把prototype拉进来一起讨论，因为prototype和constructor相伴相生。先看规范：
三、总结
我认为ES6之前JS中的函数做为一等公民，功能非常强大，强大到并不是所有函数都需要这些功能，事实上我们编写的很多函数都像return x+y;一样根本不需要this、不需要上下文、不需要原型、不需要创建对象，而这些引擎都默默的做了，无疑是一种额外的开销。所以箭头函数是被设计为一种精简后的、职责更单一的函数存在。
四、引申
1、用Function.prototype.bind生成的函数行为怪异。
用Function.prototype.bind生成的函数称为Bound Function Object，是一类极其特殊的函数。看下面的代码：
let Foo = function (){
console.log('Foo')
}
var Bar = Foo.bind({})
Bar()
Foo调用bind后生成一个新的函数，这个新生成的函数就是一个Bound Function Object。看看ECMAScript规范对它的定义：
规范指出Bound Function Object可以有内置Construct，也可以没有
(may have a ... ...)。而且它有没有内置Construct完全由所绑定的函数决定，对于上例，即是由Foo决定。Foo如果是一个constructor，那Bar也是一个constructor，反之则不是。所以：
var Foo1 = function(){};
var Foo2 = () => {};
var Bar1 = Foo1.bind({});
var Bar2 = Foo2.bind({});
new Bar1(); //正常执行
new Bar2(); //Bar2 is not a constructor
所以：
var Foo1 = function(){};
var Foo2 = () => {};
var Bar1 = Foo1.bind({});
var Bar2 = Foo2.bind({});
console.log(Bar1.prototype); //undefined
console.log(Bar2.prototype); //undefined
我觉得这里应该是ECMAScript不严谨的地方。规范里多个地方都指出做为constructor的函数就有prototype属性，但bind这里又是个特例。
2、箭头函数没有this，这是JS历史以来头一遭。但不是constructor的函数却不是头一回了，除了箭头函数不是constructor，还有哪些函数不是constructor呢？
（1）async函数。
var Foo1 = async function(){};
var Foo2 = async () => {};
console.log(Foo1.prototype); //undefined
console.log(Foo2.prototype); //undefined
new Foo1(); //Foo1 is not a constructor
new Foo2(); //Foo2 is not a constructor
说明无论箭头函数、普通函数，只要被设置成async，那么都不是constructor，自然也没有prototype属性。
（2）大部分内置函数（准确的说是Built-in Functions not implemented as an ECMAScript Function）。什么是”not implemented as an ECMAScript Function“呢？你可以理解为内置函数有两种实现方式，一种是实现为ECMAScript Function Object，一种是非ECMAScript Function Object。凡事以ECMAScript Function Object方式实现的内置函数都是constructor（也具有prototype属性）。比如Boolean()、Number()、String()函数。下面这两种用法都没毛病。
Number('1014');
new Number('1024');
之所以能用new调用是因为Number内置函数是以ECMAScript Function Object方式实现的。那么剩下的内置函数都是以非ECMAScript Function Object方式实现的，有decodeURI() encodeURI() decodeURIComponent() encodeURIComponent() isFinite() isNaN() parseInt() parseFloat() 以及Math.random()等Math对象下的函数，这些内置函数都不是constructor，也没有prototype，因为它们做为工具函数，不需要创建初始化新对象、不需要共享原型的属性。所以：
console.log(parseInt.prototype); //undefined
console.log(Math.random.prototype); //undefined
new parseInt(); //parseInt is not a constructor
new Math.random(); //Math.random is not a constructor
除非特别声明，内置函数一般不是constructor、也没有prototype属性。而进行了特别声明的就是Boolean()、Number()、String()这3个了。
