JS原型?我的第N次理解!!!

189 阅读1分钟

1. 前言

相信初入前端的小伙伴们都会因为JS的原型,原型链相关问题烦的头疼,在第一次接触到原型的时候,想完全理解他是很难的,他就像是一层雾气,一个屏障。当我们经历了好几次的折磨后,稍有理解,却在一段时间后,慢慢遗忘。已经数不清这是我多少次重新温习原型了,这次我要记录好相关知识节点。

遇到困难,不要放弃,慢慢理解,清晰了,就是拨开云雾见青天~

2. 一张神图

相信很多大佬,就是凭借这么一张图,浓缩了对JS原型的深刻理解,正所谓见图如阅百文。

js原型链.jpg

3. 三个结论

结论一:对象 .__ proto __ === 其构造函数.prototype

结论二:Object.prototype是所有的对象的(直接或间接)原型,且Object.prototype的原型是null

结论三:任何函数 .__ proto __ === Function.prototype

4. 几个案例

Function.prototype.__proto__ === Object.prototype
// Function.prototype是个对象,结合结论一得出
let f = ()=>{}
f.__proto__ === Function.prototype
// f是箭头函数,根据结论三得出
Function.__proto__ === Object.__proto__ === Array.__proto__ === Function.prototype
// Function,Object,Array构造函数也是函数,根据结论三得出
Function.__proto__.__proto__ === Object.prototype
Function.__proto__.__proto__.__proto__ === null
// 尝试推算一下吧
Array.prototype.toString.__proto__ === Function.prototype
// 这题有点骚气,其实只要把Array.prototype.toString看成一个整体,他就是一个函数呀,所以根骨结论三得出。