一文搞懂构造函数原型和原型链

简介: 构造函数原型和原型链

34f375f48797e6bf7322e539e208a1c.png

前言

javascript 中与函数相关的概念有很多,构造函数,原型和原型链也是前端高频面试题之一,相信前端的小伙伴们都有遇到过这个问题,今天就和大家一起来彻底搞懂函数原型相关的知识

什么是构造函数

68b57c23a775bbc583a53cc40dd918c.png

提到构造函数,首先还要提到对象Object的概念,js 中创造对象的方法有很多,但其根本上都是利用构造函数constructor作为对象的模板,来生成对象的实例,例如:

function Person(name) {
    this.name = name
}
const man = new Person('小明')
// man { name: '小明' }
复制代码

简单总结,构造函数(本身也是对象)就是用来生成对象的,并且所有的对象都是new 函数创造的

ca8f152acdeec649b227d1680c922cc.png

可以看到所有对象都是由 Function 为源头创造,可能有同学会有疑问,Function 本身也是对象,那它是由谁创造的呢?

Function比较特殊,它是直接放在内存中的,JS引擎初始化的时候就会生成一个Function 对象,不通过任何东西来创建,而其他所有对象,都是通过new来创建的

typeof Object // function
typeof Array // function
typeof Person // function
复制代码

什么是函数原型

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

ab805555b512b5eecc99a75048ebac4.png

prototype 是哪里来的

所有对象都是通过new生成的,函数也不例外,在new Function 时,会给函数对象添加一个prototype属性,

它是一个普通对象,上面还有一个属性 constructor,它也是一个对象,并且指向构造函数本身

37de96b747093b9fb427a10ca6236e0.png

Person.prototype.constructor === Person  // true
Object.prototype.constructor === Object  // true
复制代码

隐式原型__proto__

所有的对象都有一个属性: __proto__,称之为隐式原型(带下划线的都为系统变量,不要轻易修改)

4203d4466aab8591ca3bc339a177697.png

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

const obj = {}
obj.__proto__ === Object.constructor // true
复制代码

57cf77d091e4c833e4636d96b593e92.png

小结

  • 函数拥有:prototype —— 显示原型
  • 对象拥有:__proto__——隐式原型

原型可以解决什么问题

原型最大的作用就是用来共享对象的属性和方法

什么是原型链

简单说我们把原型之间串联的关联关系,称为原型链,原型链最顶端是 null

查找顺序

对象本身 =》构造函数中查找 =》对象的原型 / 构造函数的原型 =》 当前原型的原型中查找


相关文章
|
2月前
|
JavaScript 前端开发
原型,原型链
原型,原型链
|
11月前
|
前端开发
前端原型和原型链构造函数的使用
前端原型和原型链构造函数的使用
54 0
|
11月前
|
前端开发
前端原型和原型链构造函数的使用
前端原型和原型链构造函数的使用
61 0
|
2月前
|
设计模式 前端开发 JavaScript
【面试题】 对象、原型、原型链与继承?这次我懂了!
【面试题】 对象、原型、原型链与继承?这次我懂了!
|
2月前
|
设计模式 前端开发 JavaScript
【面试题】对象、原型、原型链与继承 ,你了解多少?
【面试题】对象、原型、原型链与继承 ,你了解多少?
|
12月前
|
存储 JavaScript 前端开发
深入理解原型与原型链
当我们在 JavaScript 中创建一个对象时,它会自动继承一个称为“原型”的对象。如果该对象访问一个属性或方法,但在自己的属性列表中找不到,它会沿着原型链向上查找,直到找到该属性或方法为止。在本篇文章中,我们将深入探讨 JavaScript 中的原型与原型链。
一文搞懂原型和原型链
一文搞懂原型和原型链
105 0
一文搞懂原型和原型链
|
JavaScript
关于原型、原型链我所知道的
关于原型、原型链我所知道的
61 0
|
前端开发
前端学习案例1-原型&原型链&构造函数
前端学习案例1-原型&原型链&构造函数
36 0
前端学习案例1-原型&原型链&构造函数
|
前端开发
前端学习案例2-原型&原型链&构造函数2
前端学习案例2-原型&原型链&构造函数2
43 0
前端学习案例2-原型&原型链&构造函数2