当前位置:网站首页 > 技术博客 > 正文

原型以及原型链是什么



image.png 图中Parent是构造函数,p1是通过Parent实例化出来的一个对象。
如果你看到这张图一脸懵,不要怕,往下看,下面会一步一步教你认识原型&原型链

js的初学者一般很难理解原型和原型链的概念,但原型和原型链又是js中最重要的点之一。从jQuery到现在最火的框架之一Vue,原型的应用无处不在,那我们该怎么学好JavaScript的原型和原型链呢?

  • 想要弄清楚原型和原型链,这几个属性必须要搞清楚,、、 。
  • 其次你要知道js中对象和函数的关系,函数其实是对象的一种。
  • 最后你要知道函数、构造函数的区别,任何函数都可以作为构造函数,但是并不能将任意函数叫做构造函数,只有当一个函数通过new关键字调用的时候才可以成为构造函数。如:
 
  
  • 我们记住两点

下面开始进入正题,我将上面的一张图拆分成3张图,分别讲解对应的3个属性。

 
  

image.png 它是函数独有的属性,从图中可以看到它从一个函数指向另一个对象,代表这个对象是这个函数的原型对象,这个对象也是当前函数所创建的实例的原型对象。
设计之初就是为了实现继承,让由特定函数创建的所有实例共享属性和方法,也可以说是让某一个构造函数实例化的所有对象可以找到公共的方法和属性。有了我们不需要为每一个实例创建重复的属性方法,而是将属性方法创建在构造函数的原型对象上(prototype)。那些不需要共享的才创建在构造函数中。
继续引用上面的代码,当我们想为通过Parent实例化的所有实例添加一个共享的属性时,




 
  

这就是原型属性,当然你也可以添加原型方法。那问题来了,怎么知道他的原型对象上有这个方法呢,往下看↓↓↓

 
  

image.png 属性是对象(包括函数)独有的。从图中可以看到属性是从一个对象指向另一个对象,即从一个对象指向该对象的原型对象(也可以理解为父对象)。显然它的含义就是告诉我们一个对象的原型对象是谁。
prototype篇章我们说到,上添加的属性和方法叫做原型属性和原型方法,该构造函数的实例都可以访问调用。那这个构造函数的原型对象上的属性和方法,怎么能和构造函数的实例联系在一起呢,就是通过属性。每个对象都有属性,该属性指向的就是该对象的原型对象。

 
  
 
  

可以看到,构造函数的原型对象上的隐式原型对象指向了Object的原型对象。那么Parent的原型对象就继承了Object的原型对象。由此我们可以验证一个结论,万物继承自Object.prototype。这也就是为什么我们可以实例化一个对象,并且可以调用该对象上没有的属性和方法了。如:

 
  
 
  

image.png constructor是对象才有的属性,从图中看到它是从一个对象指向一个函数的。指向的函数就是该对象的构造函数。每个对象都有构造函数,好比我们上面的代码就是一个对象,那的构造函数是谁呢?我们打印一下。

 
  

通过输出结果看到,很显然是Parent函数。我们有说过函数也是对象,那Parent函数是不是也有构造函数呢?显然是有的。再次打印下。

 
  

通过输出看到Parent函数的构造函数是Function(),这点也不奇怪,因为我们每次定义函数其实都是调用了new Function(),下面两种效果是一样的。

 
  

那么我们再回来看下,再次打印Function.constructor

 
  
  • 看到这里想必大家已经对原型和原型链有了一定的理解,还有没理解的同学也不要担心,原型原型链及闭包都是js中的难点部分,需要一定的时间积累沉淀。需要自己多画图理解其中的原理。

版权声明


相关文章:

  • 编程软件排名前十2025-07-15 19:30:02
  • rbf神经网络和bp神经网络2025-07-15 19:30:02
  • c++异或运算2025-07-15 19:30:02
  • combobox控件常用属性2025-07-15 19:30:02
  • xlwt写入现有excel中2025-07-15 19:30:02
  • 广告过滤功能怎么打开2025-07-15 19:30:02
  • cv2 bgr转rgb2025-07-15 19:30:02
  • js判断一个变量是否为空2025-07-15 19:30:02
  • ts品牌女装官网2025-07-15 19:30:02
  • <img>标签表示的是什么?2025-07-15 19:30:02