关于javascript:面试题箭头函数和普通函数的区别

去年面试的时候，五位面试官有三位问到了这个问题，可见这是一个面试常题，我都遗记本人是怎么答复的，要我当初说：箭头函数没有 this 绑定，它的 this 指向父作用域

果然，记忆记不牢是有起因的，因为没有写文章，没有了解真正了解它

真正的答案是什么？

阮一峰版：

• 箭头函数没有本人的 this 对象，函数体内的 this 是定义时所在的对象而不是应用时所在的对象
• 不能够当作构造函数，也就是说，不能够对箭头函数应用 new 命令，否则会抛出一个谬误
• 不能够应用 arguments 对象，该对象在函数体内不存在。如果要用，能够用 rest 参数代替
• 不能够应用 yield 命令，因而箭头函数不能用作 Generator 函数
• 返回对象时必须在对象里面加上括号

尼古拉斯版：

• 没有 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 调用构造函数会执行什么

1. 在内存中创立一个新对象
2. 这个新对象外部的 [[prototype]] 个性被赋值为构造函数的 prototype 属性
3. 构造函数外部的 this 被赋值为这个新对象（this 指向新对象）
4. 执行构造函数外部的代码（给新对象增加属性）
5. 如果构造函数返回非空对象，则返回该对象；否则，返回刚创立的新对象

咱们能够手写一个 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% 的人都不晓得的箭头函数不能当做构造函数的机密 摘出了很多英文资料佐证这个事实

咱们能够这样说，因为它没有[[Construct]] 外部办法，所以它不能被 new。而因为它不能被 new，所以它也没有 prototype

prototype 的了解能够看这篇：原型

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 入门
• 99.9% 的人都不晓得的箭头函数不能当做构造函数的机密
• 深刻了解 ES6

本文参加了 SegmentFault 思否征文「如何“反杀”面试官？」，欢送正在浏览的你也退出。