JavaScript 原型链

300 阅读2分钟

是什么是原型链

所有的对象都是通过 new 函数的方式创建的. 原型链是实例对象原型对象之间的链接。每一个对象都有原型,原型本身又是对象,原型又有原型,以此类推形成一个链式结构,称为原型链 当您访问一个对象的属性时,JavaScript引擎会首先在该对象本身查找该属性。如果找不到,则会沿着原型链向上查找,直到找到该属性或到达原型链的顶端(null)为止。

image.png

  1. 所有对象.__proto__构造函数.prototype

在JavaScript中,每个对象都有一个内部属性__proto__,它指向该对象的构造函数的原型对象(prototype)1。这意味着,当您创建一个对象时,它的__proto__属性会自动指向它的构造函数的prototype属性。

  1. 所有函数.__proto__ 指向 Function.prototype

在JavaScript中,所有的函数都是Function构造函数的实例。这意味着所有的函数都有一个属性__proto__指向Function的原型对象。

  1. Object.prototype 是所有对象的(直接或间接)原型 加了一个直接或间接

原型对象本身也是一个对象,默认情况下,是通过 new Object创建的,因此,上面的两幅原型图是可以发生关联的 image.png

完成的原型图

image.png 一些解释

image.png

利用原型判断类型

instanceof关键字【常用】

object instanceof constructor // 判断object的原型链中,是否存在constructor的原型

Object.getPrototypeOf()【不常用】

Object.getPrototypeOf(object); // 返回object的隐式原型

Object.protype.tostring.call(obj)

创建空原型的对象

利用 Object.create()

Object.create(target); // 返回一个新对象,新对象以target作为隐式原型

利用 Object.setPrototypeOf()

Object.setPrototypeOf(obj, prototype); // 设置obj的隐式原型为prototype

篡改原型

方法: 直接在构造函数的原型创建,因为属性和方法是向上查找的. image.png

tips: 在大多数情况下,当我们想要获取一个对象的类型信息时,应该使用 Object.prototype.toString() 方法,因为它返回的字符串格式是标准的,而且可以正确区分不同的对象类型。而直接调用 Object.toString() 方法,则只会返回对象类型的字符串描述,无法区分不同的对象类型。