原型和原型链

原型和原型链

构造函数

function Fn(){
}

const fn1 = new Fn();
fn1.test = 'hello word!'

其中，fn 就是一个构造函数，fn 就是一个我们使用构造函数fn创建的实例对象； ok,理解了构造函数 和实例对象以及他们之间的关系。

prototype

function Fn(){
}

//prototype只有构造函数才会有的属性~
Fn.prototype.test = 'hello word!'

const fn1 = new Fn();
const fn2 = new Fn();
console.info(fn1.test)//hello word
console.info(fn2.test)//hello word

代码中的prototype 添加的属性，就是添加到调用构造函数创建出来的实例对象的原型对象中。也就是🌰中fn1和fn2的原型对象。

那原型 又是什么呢？ 当我们创建一个对象的时候（null除外），他都会关联另外的一个对象这里关联的意思就是所谓的"继承"，而所关联的对象就是创建对象的原型。

那我们应该如何表达实例和实例的原型的关系呢?

好，继续学习解决这个问题！

proto

每一个js对象都有一个 __proto__属性，用来指向该对象的原型。并且fn1.__proto__ === Fn.prototype

因此，实例和实例原型的关系就是fn1和fn1.__proto__的关系

constructor

当我们想找一个原型的构造函数时要怎么做呢？

function Fn(){
}
console.info(Fn.prototype.constructor === Fn)//true

经过上面学习我们又知道了

function Fn(){
}
const fn1 = new Fn();
console.info(Fn.prototype.constructor === Fn)//true
console.info(fn1.__proto__ === Fn.prototype)//true
console.info(Object.getPrototype(fn1) === Fn.prototype)//true

实例与原型

当我们在实例中查找属性查找不到的时候就会自动向原型去找，比如我们在调用对象的方法的时候，这些方法并没有在实例对象中。因此，会向上面的原型中查找。

function Fn(){
}

//prototype只有构造函数才会有的属性~
Fn.prototype.test = 'hello word!'

const fn1 = new Fn();
const fn2 = new Fn();
console.info(fn1.test)//hello word
console.info(fn2.test)//hello word

这是上面的🌰，我们直接拿过来了。test在我们的实例对象fn1和fn2中并没有。那这个属性是从哪里来的呢？就是去上层的原型对象中获取的。

原型的原型

那如果在实例对象的原型中还是没有找到这个属性呢？

当然，会去更上层的原型对象去找，这里的原型的原型对象指Object.prototype。因此，又有了

Fn.prototype.__proto__===Object.prototype//true

原型链

到现在我们可以引出另一个新的概念了，原型链

那原型链是什么意思呢？

就像上面那个例子，当我们去查找一个属性test的时候，实例对象fn1没有就会去原型对象fn1.__proto__(Fn.prototype)上去找，原型对象上没有就会去原型对象的原型对象Object.prototype去找。那如果还找不到呢？那就会继续向原型对象的原型对象的原型对象上去找...

那如果找不到这个属性就不会停下来吗？ 当然会啦！当找到null 为止就不会继续向上寻找了。null表示没有对象，此处不应该有值

到此，原型链的意思就是这个查找过程形成的链式路径。

扩展

• 继承 继承意味着复制的操作，然而JavaScript默认并不会复制对象的属性，相反，JavaScript只是在两个对象之间创建一个关联。这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法更为准确些。 ---《你不知道的JavaScript》
• proto 尽管大多浏览器都支持这种访问原型的方法，但是它并不是一个标准的访问原型的方法。可以通过Object.getPrototype()来访问原型。

学习笔记

不是什么学习文档，就是整理的学习笔记。用来自己学习、梳理思路、查漏补缺。

---

2023年12月04