去年面试[1]的时候，五位面试官有三位问到了这个问题，可见这是一个面试常题，我都忘记自己是怎么回答的，要我现在说：箭头函数没有 this 绑定，它的 this 指向父作用域
果然，记忆记不牢是有原因的，因为没有写文章，没有理解真正理解它
真正的答案是什么？
阮一峰版[2]：
- 箭头函数没有自己的 this 对象，函数体内的 this 是定义时所在的对象而不是使用时所在的对象
- 不可以当作构造函数，也就是说，不可以对箭头函数使用 new 命令，否则会抛出一个错误
- 不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代替
- 不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数
- 返回对象时必须在对象外面加上括号
尼古拉斯版[3]：
- 没有 this、super、arguments 和 new.target 绑定。this、super、arguments 和 new.target 的值由最近的不包含箭头函数的作用域决定
- 不能被 new 调用，箭头函数内部没有 [[Construct]] 方法，因此不能当作构造函数使用，使用 new 调用箭头函数会抛出错误
- 没有 prototype，既然你不能使用 new 调用箭头函数，那么 prototype 就没有存在的理由。箭头函数没有 prototype 属性
- 不能更改 this， this 的值在函数内部不能被修改。在函数的整个生命周期内 this 的值是永恒不变的
- 没有 arguments 对象，既然箭头函数没有 arguments 绑定，你必须依赖于命名或者剩余参数来访问该函数的参数
- 不允许重复的命名参数
尼古拉斯是写《深入理解 ES6》的作者，阮一峰就不解释了
结合起来，就是说箭头函数和普通函数的区别在于：
- 它不能被当作构造函数，因为它不能被new，不能被 new 的原因在于箭头函数内部没有 [[Construct]] 方法。又因为它不能被 new，所以也就没有 prototype
- 它没有自己的 this，它的 this 由定义时所在的对象决定而不是使用时所在的对象
- 它也没有 arguments 对象
- 不可以使用 yield 命令，不能用作生成器函数
我们依次说说这四点
new 从何来
先复习一下 new 调用构造函数会执行什么
- 在内存中创建一个新对象
- 这个新对象内部的 [[prototype]] 特性被赋值为构造函数的 prototype 属性
- 构造函数内部的 this 被赋值为这个新对象（this指向新对象）
- 执行构造函数内部的代码（给新对象添加属性）
- 如果构造函数返回非空对象，则返回该对象；否则，返回刚创建的新对象
我们可以手写一个 new
function new2(Constructor, ...args) { var obj = Object.create(null); obj.__proto__ = Constructor.prototype; var result = Constructor.apply(obj, ...args) return typeof result === 'object' ? result : obj }
复习完 new，回过头看为什么不能调用 new
JavaScript 函数内部有两个内部方法：[[Call]] 和 [[Construct]]
- 直接调用时执行[[Call]] 方法，直接执行函数体
- new 调用时执行 [[Construct]] 方法，创建实例对象
箭头函数设计之初是为了设计一种更简短的函数，没有 [[Construct]] 方法。具体99.9%的人都不知道的箭头函数不能当做构造函数的秘密[4]摘出了很多英文材料佐证这个事实
我们可以这样说，因为它没有[[Construct]] 内部方法，所以它不能被 new。而因为它不能被 new，所以它也没有 prototype
prototype 的理解可以看这篇：原型[5]
this 谁人调用你
JavaScript 中的 this 是词法作用域，与你在哪里定义无关，而与你在哪里调用有关，所以会有各种 this “妖”的问题，改变 this 有 4 种方法
- 作为对象方法调用
- 作为函数调用
- 作为构造函数调用
- 使用 apply 或 call 调用
但是箭头函数没有自己的 this 对象，内部的 this 就是定义时上层作用域中的this。也就是说，箭头函数内部的 this 指向是固定的
arguments 老一辈的类数组
arguments 是一个对应于传递给函数的参数的类数组对象。arguments 对象标识所有（非箭头）函数可用的局部变量，可以说只要是（非箭头）函数就自带 arguments，它表示所有传递给函数的参数
什么是类数组对象
所谓类数组对象，就是指可以通过索引属性访问元素并且拥有 length 属性的对象
var arrLike = { 0: 'name', 1: 'age', length: 2 }
箭头函数没有
yield 是什么
说 yield 之前，先了解下生成器
生成器是 ES6 新增的一个极为灵活的结构，拥有在一个函数块内暂停和恢复代码执行的能力。
生成器的形式是一个函数，函数名称前面加一个星号（*）表示它是一个生成器。只要是可以定义（非箭头）函数的地方，就可以定义生成器
// 生成器函数声明 function* generatorFn() {} // 生成器函数表达式 let generatorFn = function* () {} // 作为对象字面量方法的生成器函数 let foo = { * generatorFn() {} } // 作为类实例方法的生成器函数 class Foo { * generatorFn() {} } // 作为类静态方法的生成器函数 class Bar { static * generatorFn() {} }
标识生成器函数的星号不受两侧空格的影响
而 yield 关键字是可以让生成器停止和开始执行，也是生成器最有用的地方。生成器函数在遇到 yield 关键字之前会正常执行。遇到这个关键字后，执行会停止，函数作用域的状态会被保留。停止执行的生成器函数只能通过在生成器对象上调用 next() 方法来恢复执行
// umi 项目中请求接口时的例子 *fetchData({ payload }, { call, put }) { const resData = yield call(fetchApi, payload); if (resData.code === 'OK') { yield put({ type: 'save', payload: { data: resData, }, }); } else { Toast.show(resData.resultMsg); } },
因为箭头函数不能用来定义生成器函数才不能使用 yield 关键字
模拟面试
面试官：对 ES6 了解吗
面试者：嗯呢，项目中一直有用
面试官：你说说你平时都用哪些 ES6 的新特性
面试者：例如箭头函数、let、const、模板字符串、扩展运算符、Promise...
面试官：嗯嗯，箭头函数和普通函数有什么区别
面试者：箭头函数不能被 new、没有 arguments、它的 this 与在那里定义相关、它不能用 yield 命令，返回对象时必须在对象外面加上括号
面试官：箭头函数为什么不能被 new
面试者：因为箭头函数没有 [[Construct]] 方法，在 new 时，JavaScript 内部会调用 [[Construct]] 方法，因为箭头函数没有，所以 new 时会报错。当然，因为不能被 new ，所以箭头函数也没有 prototype
面试官：你刚刚说到没有 arguments，简单介绍下它
面试者：它是所有参数的合集，每个（非箭头）函数自带 arguments，其结构是类数组对象
面试官：什么是类数组对象
面试者：可以通过索引访问元素且拥有 length 属性的对象...
面试官：我问问其他的
参考资料
- ECMAScript 6 入门[6]
- 99.9%的人都不知道的箭头函数不能当做构造函数的秘密[7]
- 深入理解ES6[8]
[2] 阮一峰版: https://es6.ruanyifeng.com/#/docs/function#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0
[3] 尼古拉斯版: https://book.douban.com/subject/27072230/
[4] 99.9%的人都不知道的箭头函数不能当做构造函数的秘密: https://juejin.cn/post/7050492355056664612#/
[5] 原型: https://fe.azhubaby.com/JavaScript/%E5%8E%9F%E5%9E%8B.html
[6] ECMAScript 6 入门: https://es6.ruanyifeng.com/#/docs/function#%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0
[7] 99.9%的人都不知道的箭头函数不能当做构造函数的秘密: https://juejin.cn/post/7050492355056664612#/
[8] 深入理解ES6: https://book.douban.com/subject/27072230/
