浅谈原型对象与原型链

最新推荐文章于 2022-07-12 15:41:40 发布

鱼逐流

最新推荐文章于 2022-07-12 15:41:40 发布

阅读量464

点赞数 2

文章标签：原型模式 javascript 前端

本文链接：https://blog.csdn.net/weixin_64214997/article/details/124759224

版权

本文探讨了JavaScript中为何需要原型对象，解释了原型对象的概念及其在内存优化和防止变量污染方面的作用。介绍了原型链的构造，指出每个对象通过__proto__形成链式结构，直至原型链终点为null。并简单提及内置对象如Date和String的原型链结构。

摘要由CSDN通过智能技术生成

家庭.jpg

1.为什么需要原型对象?

构造函数模式虽然好用，但也并非没有缺点。使用构造函数的主要问题，就是每个方法都要在每个实例上重新创建一遍。

因为多个构造函数会开辟多个内存空间,这样会导致内存浪费的问题,那么如何解决这个问题呢?

方案一:使用全局函数解决,但是会导致变量污染

方案二:使用全局对象解决,解决了变量污染，但是这个对象本身也会造成污染

大冤种.png

所以原型对象来啦!

嚣张.png
原型对象的作用：解决内存浪费 + 变量污染(共享方法)

2.什么是原型对象呢?

任何构造函数在被创建的时候，系统都会自动帮我们创建一个与之对应的对象，称为原型对象

这个对象也会自动获得 constructor 属性

而实例都包含一个指向原型对象的内部指针__proto__

三者之间的关系如图

原型对象.png
每当我们创造了一个构造函数,系统就会贴心的分配了一个老婆-----原型对象

从此,构造函数和原型对象过上了没羞没臊的甜蜜生活,并且有个孩子 ------实例对象

构造函数用.prototype就能找到属于自己原型对象(老婆)

原型对象用constructor就能找到属于自己的构造函数(老公)

实例对象用.proto(亲子鉴定)能找到自己的原型对象(妈妈)

","marks":[]}]}]}],"state":{
   }}]'>

<script>   
function Pig(name, age) {
     
this.name = name;  
this.age = age;     
} 
//1.用构造函数自身访问  
console.log(Pig.prototype)   
//2.用实例对象可直接访问原型中的任意成员     
let p1 = new Pig