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

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

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

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

箭头函数是什么

箭头函数表达式的语法比函数表达式更简练,而且没有自己的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 的实例 ff__proto__ 特点指向 Fprototype

由此能够得出实例与原型的关系: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/…