箭头函数函数是否有原型

问题:箭头函数是否有原型

今天在博客重构之余，看到某个前端群有群友这样问：

面试被问到了一个题，箭头函数是否有原型
咱们觉得有吗？

首先不说它是不是，咱们来回顾一下 箭头函数 是什么，原型 又是什么。

箭头函数是什么

箭头函数表达式的语法比函数表达式更简练，而且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需求匿名函数的地方，而且它不能用作结构函数。

developer.mozilla.org/zh-CN/docs/…

引进箭头函数有两个方面的效果：更简短的函数而且不绑定this。

一般来说假如问题是函数是否有原型时，那么能够好不犹疑的答复说是有，但因为箭头函数的特殊性导致了答案的不确定性。

原型是什么

当谈到承继时，JavaScript 只要一种结构：目标。
每个目标（object）都有一个私有特点指向另一个名为原型（prototype）的目标。
原型目标也有一个自己的原型，层层向上直到一个目标的原型为 null。
根据定义，null 没有原型，并作为这个原型链（prototype chain）中的最终一个环节。

developer.mozilla.org/zh-CN/docs/…

一个 Function 目标在运用 new 运算符来作为结构函数时，会用到它的 prototype 特点。它将成为新目标的原型。

developer.mozilla.org/zh-CN/docs/…

什么是原型在 mdn 中现已讲得很清楚了，也便是目标的prototype。

实验

所以按理来说目标都有原型，那么试试就知道了。

首先看看箭头函数的原型：

const a = () => {};
console.log(a.prototype);  // undefined

在浏览器控制台能够把上述代码履行一遍，能够发现结果是 undefined。

那么是否就阐明箭头函数没有原型了呢？别急持续往下看。

const a = () => {};
console.log(a.prototype);  // undefined
console.log(a.__proto__); //  () { [native code] }

咱们能够看到 a.__proto__ 是一个 native function

那么 __proto__ 又是什么呢？

__proto__是什么

Object.prototype (en-US) 的 __proto__ 特点是一个拜访器特点（一个 getter 函数和一个 setter 函数）, 暴露了经过它拜访的目标的内部[[Prototype]] (一个目标或 null)。

__proto__ 的读取器 (getter) 暴露了一个目标的内部 [[Prototype]] 。关于运用目标字面量创立的目标，这个值是 Object.prototype (en-US)。关于运用数组字面量创立的目标，这个值是 Array.prototype。关于 functions，这个值是 Function.prototype。关于运用 new fun 创立的目标，其间 fun 是由 js 供给的内建结构器函数之一 (Array, Boolean, Date, Number, Object, String 等等），这个值总是 fun.prototype。关于用 JS 定义的其他 JS 结构器函数创立的目标，这个值便是该结构器函数的 prototype 特点。

__proto__ 特点是 Object.prototype (en-US) 一个简单的拜访器特点，其间包含了 get（获取）和 set（设置）的办法，任何一个 __proto__ 的存取特点都承继于 Object.prototype (en-US)，但一个拜访特点假如不是来源于 Object.prototype (en-US) 就不拥有 __proto__ 特点，比如一个元素设置了其他的 __proto__ 特点在 Object.prototype (en-US) 之前，将会覆盖原有的 Object.prototype (en-US)。

developer.mozilla.org/zh-CN/docs/…

看解说可能有人不大理解，举个比如 ：

function F() {}
const f = new F();
console.log(f.prototype); // undefined
console.log(f.__proto__ === F.prototype); // true
console.log(f.__proto__.constructor); // F(){}

new F 也便是 F 的实例 f， f 的 __proto__ 特点指向 F 的 prototype。

由此能够得出实例与原型的关系：new function得到实例，实例的 __proto__ 又指向function的原型，原型的结构器指向原函数。

定论

好了，理解了什么是 __proto__ 后，咱们回到原来的问题上：箭头函数函数是否有原型？

经过上述的代码咱们能够知道箭头函数便是Function的实例，假如你觉得不是，那么请看下面的比如：

const a = () => {};
console.log(a instanceof Function); // true
console.log(a.__proto__ === Function.prototype); // true
console.log(a.prototype);  // undefined

所以最终得出定论：箭头函数是Function的实例，它是有原型的。

注：以上代码结果都是在chrome113下运行得出

如有过错，欢迎指正～

参考

箭头函数
developer.mozilla.org/zh-CN/docs/…

结构器
developer.mozilla.org/zh-CN/docs/…

原型链
developer.mozilla.org/zh-CN/docs/…

Function.prototype
developer.mozilla.org/zh-CN/docs/…

__proto__
developer.mozilla.org/zh-CN/docs/…