这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天

今天来总结一下原型与原型链

首先清楚几个定义

构造函数：用来创建对象的函数

对象：JS的一个引用数据类型

原型

js的每个构造函数都有一个属性prototype，即显式原型对象，默认指向一个空对象

验证：

每个实例对象都有一个属性，__ proto __ ，隐式原型对象，指向构造函数的显式原型对象

验证：

这两个指针指向同一个对象

即

原型链

明白了原型的概念后，什么是原型链呢，就是每一个原型对象也是对象，拥有自己的__ proto __ 属性，都可以向上查找。那么能无限向上查找吗？不能，每一个对象都可以看做是由Object构造函数产生的实例对象，所以查找的尽头就是Object的prototype对象，它是终点，它的__ proto__ 指向null

即

那么同时每个原型对象身上都会有一个constructor属性，指向自己的构造函数

function Obj() {}

let myobj = new Obj();

console.log(Obj.prototype === myobj.__proto__);//true

console.log(Obj === Obj.prototype.constructor);//true

即

instanceof原理

A instanceof B

语义：A是否是B的实例对象，是则返回true

原理：顺着原型链向上找，如果构造函数B的显式对象在A对象的原型链上，则返回真

如上图，person instanceof Person

构造函数B的显式对象：Person.prototype A对象的原型链:__ proto__ -》 Person.prototype-》Object.prototype-》null

在，则返回真。建议结合上图进行理解

function Obj() {}

let myobj = new Obj();

// console.log(Obj.prototype === myobj.__proto__);

// console.log(Obj === Obj.prototype.constructor);

console.log(myobj.__proto__);//{} 原型链上第一个箭头
console.log(myobj.__proto__.__proto__);//[Object: null prototype] {} 原型链上第二个箭头
console.log(myobj.__proto__.__proto__.__proto__);//null 原型链上第三个箭头
console.log(myobj.__proto__.__proto__.__proto__.__proto__);//TypeError  Cannot read properties of null (reading '__proto__')找到头了！