前言: ES6中的箭头函数出了有段时间了,很多朋友对于箭头函数在原型链上的理解还是模模糊糊,甚至还停留在ES5的时代,今天专门写篇文章来介绍箭头函数的原型链,也可以称之为ES6的原型链。
先上张乍一看很复杂,实则学会了很简单的图,
1.认识prototype
prototype是只有构造函数才有的属性,其中包含了构造函数所有定义的所有的方法和变量常量,这个比较好理解。
难理解的是prototype是会被继承的,子构造函数会继承父构造函数的prototype,数据和对象会继承相对应的js原型方法的prototype。
详细例子请看下方__proto__的讲解
1. 认识__proto__
__proto__是当前 数据 的隐式原型,所有数据都包含__proto__,除了NaN,null,undefined这些,它表示的就是当前数据所继承的东西。
new的实例都可以访问本身不存在,而存于父级或父级的父级的方法或变量就是因为__proto__,拥有__proto__属性的数据都有这个功能。
举个栗子
//数据 & 对象
let a = {a:1} //a.__proto__就是原型方法Object的prototype (Object.prototype)
let b = [1,2] //b.__proto__就是原型方法Array的prototype (Array.prototype)
let c = '123' //c.__proto__就是原型方法String的prototype (String.prototype)
//构造函数 & 方法
let c = ()=>{} //c.__proto__就是箭头函数的原型方法 ƒ () { [native code] }
//(上图左侧所声明的构造函数)
构造函数Son的__proto__就是构造函数Father。
构造函数Father的__proto__和上面所声明的c的__proto__是一样的,都是箭头函数的原型方法。
这里提一下,构造函数和方法是有点一点不同的,就是构造函数比方法多了个prototype属性。
还有一个比较特殊的地方是箭头函数原型方法的__proto__是原型方法Object的prototype,而且除了Object数据类型之外其他所有的数据以及构造函数和方法的__proto__链上都会经过箭头函数原型方法,它充当了一个像路由器一样的功能,让所有的数据包括原型方法Function都通过它继承了Object.prototype。有点神奇
3.认识constructor
constructor是只有构造函数的prototype和类方法本身,还有方法拥有的属性。
构造函数的prototype.constructor是构造函数本身,构造函数的constructor是原型方法Function,方法的constructor也是原型方法Function。
PS:也有可能只有prototype和箭头函数的原型方法拥有constructor,因为有__proto__这一层继承关系,这里有待考究。