原型与原型链（包会）

最新推荐文章于 2024-11-04 16:17:23 发布

wuliuqi62

最新推荐文章于 2024-11-04 16:17:23 发布

阅读量98

点赞数 2

文章标签： javascript 前端

本文链接：https://blog.csdn.net/wuliuqi62/article/details/119383458

版权

1.函数的prototype属性

只要创建一个函数，就会按照特定的规则为这个函数创建一个prototype属性（指向原型对象）。在原型对象上定义的属性和方法可以被对象实例共享。
在这里插入图片描述

function Person() {}

console.log(typeof Person.prototype);  //object
console.log(Person.prototype)

在这里插入图片描述

默认情况下，所有原型对象自动获得一个名为constructor的属性，指回与之关联的构造函数。
在这里插入图片描述

function Person() {}
console.log(Person.prototype.constructor === Person); //true

在这里插入图片描述
如代码所示，构造函数有一个prototype属性，引用其原型对象，而这个原型对象也有一个constructor属性，引用这个构造函数。构造函数的prototype属性与原型对象的constructor属性循环引用。

2.实例的_proto_属性

每次调用一个构造函数创建一个新实例，这个实例内部[ [prototype] ]指针就会被赋值为构造函数的原型对象。脚本中没有访问这个[ [prototype] ]特性的标准方式，但Firefox、Safari和Chrome会在每个对象上暴露__proto__属性，通过这个属性可以直接访问对象的原型。
在这里插入图片描述

3.原型链

每个构造函数都有一个原型对象，原型的constructor属性指回构造函数，实例内部的__proto__属性指向原型对象。当原型对象是另一个类型的实例时，就意味着这个原型对象内部也有一个__proto__属性指向另一个原型对象，相应的另一个原型也有一个constructor属性指向另一个构造函数。这样就在实例和原型之间构造了一条原型链。

function SuperType() {
      this.property = true
    }
function SubType() {
      this.subproperty = false
    }
SubType.prototype = new SuperType()  //重写SubType的原型对象，将其替换为SuperType的实例
let instance = new SubType()  //创建SubType实例
console.log(instance instanceof Object); //true
console.log(instance instanceof SuperType);  //true
console.log(instance instanceof SubType);  //true

console.log(Object.prototype.isPrototypeOf(instance));  //true
console.log(SuperType.prototype.isPrototypeOf(instance));  //true
console.log(SubType.prototype.isPrototypeOf(instance));  //true

instance(通过内部的__proto__)指向SubType.prototype，而SubType.prototype(作为SuperType的实例又通过内部的__proto__)指向SuperType.prototype。

原型与实例的关系可以通过两种方式来确定。

instanceof操作符，如果一个实例中出现相应的构造函数，则instanceof返回true（例子如上图代码所示）。
使用isPrototypeOf()方法，只要原型链中包含这个原型，这个方法就返回true（例子如上图代码所示）。

正常的原型链都会终止于Object的原型对象
Object原型的原型是null

function Person() {}

console.log(Person.prototype.__proto__ === Object.prototype);  //true
console.log(Person.prototype.__proto__.constructor === Object);  //true
console.log(Person.prototype.__proto__.__proto__ === null);  //true