重温js——原型和原型链

简介: 我们在前文说到,所有的对象都是通过new 函数来创建的,所有的函数也都是对象 . 那么问题来了,Function也是一个函数,那么他是怎么来的呢?(这个问题是不是类似有点像先有鸡和先有蛋的感觉)但是Function函数是在js引擎启动的时候,就直接把Function放入到内存中的.

我们在前文说到,所有的对象都是通过new 函数来创建的,所有的函数也都是对象 . 那么问题来了,Function也是一个函数,那么他是怎么来的呢?(这个问题是不是类似有点像先有鸡和先有蛋的感觉)但是Function函数是在js引擎启动的时候,就直接把Function放入到内存中的.


原型 prototype


所有函数都有一个属性: prototype,称之为原型 .


926af6b5bd13438ba045c0723ee1703d.png


prototype在默认情况下是一个object对象.


默认情况下, prototype中有一个属性: constructor, constructor本身也是一个对象,他们之间的关系如下:


8311d19c798d4a8aae8fefae3840659c.png


通过上图我们知道,函数的原型的构造函数 和 函数本身是一模一样的.


e3255224e933433395dce6d7bc2e58f5.png


原型有啥用呢?为啥原型的构造函数又要等函数呢?


隐士原型 __proto__


所有的对象都有一个属性: __proto__, 这个属性称之为隐士原型.


9cf42766e87b4a71ad4f3d753e9d237f.png


隐士原型默认情况下指向创建该对象的函数的原型.


f25f4d8adf7d416fa5d6007819b673fd.png


用一幅图来总结一下:


57b0968a02bf410e82e316cb57c4e529.png


对象访问属性的查找方式


对象在查找属性的时候,如果本身不存在的话,他会一层一层查找自己的隐士原型(proto),找到后返回.知道找到null后返回undefined


bd6dece02ba04b39b1d4b582956ce8a5.png


既然人家可以在原型上加方法,咋们也可以在原型中加方法,但是这样做会造成原型的污染.


原型链


原型链是啥子呢,我们先来解释链条,链条就是有有限个铁环相互连接在一起,形成一根有限长度的链条.原先链肯定就是有有限个__proto__连接起来的链条,我们称之为原型链.


011d766452a34208a590c73b3baaff23.png


如上图我们看到的 newA.__proto__.__proto__.__proto__ 这种在每个对象之间都通过 __proto__ 是不是有点像链条呢.


原型链路


53ddfe714cef49eebd10de3c765deac3.png


  • Function的__proto__ 和Function的prototype是指向同一个地址的


ba2fabcea07645e1a47cfea8e4ec984f.png


  • 隐士原型的最终指向是null;
  • Object的__proto__和 Function的原型执行同一个地址.


58920cf9bf2b451b8572c623e35d8adf.png

相关文章
|
2月前
|
JavaScript 前端开发 开发者
理解JavaScript中的原型链:基础与实践
【10月更文挑战第8天】理解JavaScript中的原型链:基础与实践
|
4月前
|
JavaScript 前端开发
如何在JavaScript中实现基于原型的继承机制
【8月更文挑战第14天】如何在JavaScript中实现基于原型的继承机制
31 0
|
29天前
|
JavaScript 前端开发
JavaScript 原型链的实现原理是什么?
JavaScript 原型链的实现原理是通过构造函数的`prototype`属性、对象的`__proto__`属性以及属性查找机制等相互配合,构建了一个从对象到`Object.prototype`的链式结构,实现了对象之间的继承、属性共享和动态扩展等功能,为 JavaScript 的面向对象编程提供了强大的支持。
|
29天前
|
JavaScript 前端开发
原型链在 JavaScript 中的作用是什么?
原型链是 JavaScript 中实现面向对象编程的重要机制之一,它为代码的组织、复用、扩展和多态性提供了强大的支持,使得 JavaScript 能够以简洁而灵活的方式构建复杂的应用程序。深入理解和熟练运用原型链,对于提升 JavaScript 编程能力和开发高质量的应用具有重要意义。
|
1月前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
2月前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
32 1
|
2月前
|
JavaScript 前端开发 开发者
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
27 0
|
2月前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
35 0
|
2月前
|
JavaScript 前端开发 安全
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
29 0
|
3月前
|
JSON JavaScript 前端开发
js原型继承|26
js原型继承|26