今天讲讲js原型链
原型链这个词在js里面一直都是一个比较高级的词汇,每逢面试,面试官都会问你懂不懂原型链,来达到自己装逼的目的
但在笔者看来,原型链是一个比较基础的东西,我们知道越是基础的东西,其实是越难掌握的,越难真正的弄懂,需要你每隔一段时间反复的理解、消化,然后变成自己的东西
创建一个对象
首先我们先创建一个函数
创建函数
这是一个很普通的函数,可能有人就纳闷了,我们不是要创建对象吗?怎么改成创建函数了?
的确现在Per就是一个普通的函数,没有什么特别之处,但是当我们用new关键字用在他身上时他就变成了一个构造函数,如:
构造函数
这个时候Per就变成了构造函数,而p就是我们使用new创建了一个实例对象
为什么p现在是一个对象了呢? 可能有些人不理解,我们知道对象都可以用 . 语法来获取里面的值,而我们现在也可以这样操作
new操作
是不是有点感觉了?
其实创建对象的方法有很多种,我们这种是通过
构造函数的方法创建的对象,和其他普通的创建对象不同之处在于使用构造函数创建出来的对象可以当做一个模板:如
当做模板
那又有人疑惑了 为什么在Per函数里面使用的是this.name=’Hellow’,但是可以使用p.name访问到呢?
这确实是一个好问题。下面我们就要说说 当我们使用new操作符时,内部到底执行了什么?(小板凳搬好哦)
拿 const p = new Per() 举例
当我们使用new时内部执行情况
1,创建了一个空对象 p = {}
2,将空对象的_proto__ 指向Pre的prototype (这句话很重要,不理解的我后面会讲)
3,将Pre内部的this指向替换为p(这个时候p就可以通过 . 语法访问到对应的值了)
4,返回这个新对象
(理解清楚后,如果面试问起相关知识,也是可以瞬间秒杀面试官哦)
什么是原型
终于讲到正题了,上面讲的比较多,但都是干货,希望大家认真理会
我们要时刻记住一句话,就是每个函数都有prototype,每一个对象都有__proto__属性(这个属性称之为原型),在我们执行new的时候对象的_proto__ 指向这个构造函数的prototype
如图:
指向图解
如果画完成的话应该是这样的
指向图解2
什么是原型链
我们可以这样操作:
原型链
p.__proto__ === Per.prototype 我们应该好理解(上面已经讲过)
那p.__proto__.__proto__ === Per.prototype.__proto__ 为什么相等呢?
其实这种__proto__向上查找的过程就是一种链状,也就是原型链,
其他p.__proto__.__proto__ 和Per.prototype.__proto__最后都指向了Object 这也就所谓的”
万物皆对象” 都是由对象创建出来的我们上一节说的 instanceof 就是沿着这条原型链查找的
所以说会出现 函数的instanceof 也是对象,就是应为都是Object 创建出来的
如果你有收获,别忘了关注一下哦!
