关于原型

18 阅读3分钟

一,原型

在构造函数中,实例化出来的每一个对象都是独立的,但其实里面可能拥有共同的方法,就会导致内存浪费,为了解决这一问题,就出现了原型prototype.

目标:能够利用原型对象实现方法共享

  • 构造函数通过原型分配的函数是所有对象所共享的
  • JavaScript 规定,每一个构造函数都有一个 prototype属性,指向另一个对象,所以我们也称为原型对象
  • 这个对象可以挂载函数,对象实例化不会多次创建原型上函数,节约内存。
  • 我们可以把那些不变的方法,直接定义在prototype 对象上,这样所有对象的实例就可以共享这些方法。
  • 构造函数和原型对象中的this 都指向实例化的对象。

如下例子:把本来放在构造函数里的方法写出来,挂载到这个构造函数上,这样就可以实现方法共享,得到两个不同的对象获取到同一个方法。

image.png

所以在构造函数创建对象中,公共的属性可以写在构造函数里面,公共的方法则写在原型里。

image.png

1,constructor属性

原型对象里的constructor属性,这个属性它指向的是原型对象的构造函数。

image.png

使用场景:

  • 如果有多个对象的方法,我们可以给原型对象采取对象形式赋值.

  • 但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象constructor就不再指向当前构造函数了此时,我们可以在修改后的原型对象中,添加一个constructor 指向原来的构造函数。

  • 即可以重新指回创造这个原型对象的构造函数

2,对象原型

对象都会有一个属性__proto__指向构造函数的prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有_proto__原型的存在。

image.png

注意:

  • 属性为__proto__(是两个下划线,只有加起来一共4个),且改属性只读。
  • _proto__是JS非标准属性。
  • [[prototype]]和_proto__意义相同。
  • 用来表明当前实例对象指向哪个原型对象prototype。
  • _proto__对象原型里面也有一个constructor属性,指向创建该实例对象的构造函数。

image.png

image.png

image.png

3,原型继承

JS中大多数是借助原型对象实现继承的特性。

image.png

image.png

4,原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对象的链状结构关系称为原型链。 image.png 原型链-查找规则

  • 当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。
  • 如果没有就查找它的原型(也就是_proto__指向的prototype 原型对象)。
  • 如果还没有就查找原型对象的原型(Object的原型对象)。
  • 依此类推一直找到Object为止(null)。
  • __proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线。
  • 可以使用instanceof 运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。
  • Instanceof用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上。

image.png