详解JS原型与原型链，看这一篇就够了

var stu2 = new student(‘小紫’,20);

但是构造函数方法虽然好用，可他存在浪费内存的问题。比如在上例中在构造函数里我们有一个函数，函数属于复杂数据类型，他会单独在内存中开辟一个空间。在这里我们创建了两个实例化对象，那么就会开辟两个内存空间来存放同一个函数，那就造成了内存浪费的问题。

1.构造函数原型prototype

---

构造函数通过原型分配的函数是所有对象所共享的。

JavaScript规定,每一个构造函数都有一个prototype属性, 指向另一个对象。注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。

我们可以把那些不变的方法,直接定义在prototype对象上,这样所有对象的实例就可以共享这些方法。

所以在上例中我们就可以把公共函数放在原型对象的里面，这样就不会造成内存浪费

function student(uname,age) {

this.uname = uname;

this.age = age;

}

student.prototype.school = function() {

console.log(‘深圳理工大学’);

}

var stu1 = new student(‘小红’,18);

var stu2 = new student(‘小紫’,20);

那么我们就明白了原型是什么，他就是一个对象，我们称prototype为原型对象

原型的作用是什么呢？四个字，共享方法

2.对象原型__proto__

---

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

在对象身上系统自己添加了一个__proto__指向我们构造函数的原型对象，所以__proto__对象原型和原型对象prototype是等价的。

我们验证一下，看看会输出什么：

console.log(stu1.proto === student.prototype);

最后输出是true证明对象原型__proto__和原型对象protptype是等价的

所以方法的查找规则就是首先看stu1对象身上是否有school方法，如果有就执行这个对象上的school，如果没有school这个方法， 因为有__proto__的存在，就去构造函数原型对象prototype身上去查找school这个方法

如果觉得还是不太懂，一图搞懂你的疑问：

3.constructor构造函数

---

对象原型(__proto__) 和构造函数( prototype )原型对象里面都有一个属性 constructor属性, constructor我们称为构造函数,因为它指回构造函数本身。

我们打印一下student.prototype和stu1.__type__看看是否存在constructor属性：

console.log(student.prototype);

console.log(stu1.proto);

可以看到这里面都有constructor,那constructor有什么作用呢？

constructor主要用于记录该对象引用于哪个构造函数，它可以让原型对象重新指向原来的构造函数

我们知道在原型对象中我们可以定义那些公共的方法，但是如果公共的方法很多呢，我们通过对象的形式存储就方便多了：

student.prototype = {

school:function() {},

location:function() {}

}

然后我们输出一下原型对象的constructor看看有没有变化：

console.log(student.prototype.constructor);

console.log(stu1.proto.constructor);

最后的输出结果是这样：

这是为什么呢，constructor不应该指向我们的student构造函数吗

因为我们通过student.prototype.school这样属于往原型对象里添加方法，但是我们刚才属于赋值，这样就把原先prototype里的东西都覆盖掉了，这样student.prototype就没有constructor了，没有constructor自然就指回不了student构造函数了

这个时候我们就需要手动的利用constructor这个属性指回原来的构造函数

student.prototype = {

constructor:student,

school:function() {},

location:function() {}

}

我们再输出一下原型对象的constructor：

这样我们就知道这个对象到底是通过哪个构造函数创建出来的了

现在我们更新一下构造函数、实例、原型对象三者关系图：

4.原型链

---

因为student原型对象也是一个对象，我们之前说了只要是对象就有对象原型的存在

那我们打印一下原型对象看看里面是否有原型：

function student(uname,age) {

this.uname = uname;

this.age = age;

}

student.prototype.school = function() {

console.log(‘深圳理工大学’);

}

var stu1 = new student(‘小红’,18);

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

[外链图片转存中…(img-TtWuWAQg-1710937774463)]
[外链图片转存中…(img-TAZuleik-1710937774464)]
[外链图片转存中…(img-FisOsWjR-1710937774464)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-dDt7qHF6-1710937774465)]