十分钟看懂JS原型和原型链

1,188 阅读1分钟

原型链图表

基础的原型链图就是这样,是不是看起来很绕呢,下面来进行一一讲解

原型(prototype

  • JS所有的函数都有prototype属性,只有函数才有
  • 其属性和方法都能被构造函数实例化的对象所共同访问

从这个例子中可以看到 Person 这个原型链上的方法(sayHello)可以被实例化出来的对象p1所调用。而当我们删除了 Person 原型链上的方法时,在p1上就调用不到 sayHello 这个方法了

构造器(constructor

  • constructor存在于每个函数的prototype属性中,其指向了函数本身

原型链 (_proto_

  • JS中的对象会有个_proto_属性,指向了创建他的构造函数的prototype,而函数比较特殊也有这个属性

    可以看出由Person这个函数实例化出的对象p1的_proto_ 是指向构造函数 Person 的 prototype

  • 当JS搜索引擎查找对象中的属性或者方法时,如果在该对象上没有该属性和方法的话,会通过原型链一层一层往上查找

    从这里我们可以看出p1上是没有 sayHello 这个方法的 但是通过原型链往上查找就可以找到这个方法

实现一个简单的原型链