5分钟带你搞懂 构造函数、原型对象、实例对象、原型、原型链

1、构造函数

  1. 什么是构造函数:构造函数是一种特殊的方法,用于创建和初始化一个新的对象。它们是使用 new 关键字函数调用来创建对象的。构造函数实际上只是一个普通的函数,通常以大写字母开头,用来和普通函数作区分。
  2. 构造函数有什么用:js面向对象可以通过构造函数实现封装,把公共的属性和方法抽取封装到构造函数里面来从而实现数据的共享,这样被构造函数new出来的实例对象就可以使用这些属性和方法
    在这里插入图片描述

构造函数的封装及实例对象的创建
在这里插入图片描述

通过构造函数实例化出的每个对象都不相等

在这里插入图片描述
在这里插入图片描述

构造函数固然好用但是也存在一定的问题

1、浪费内存
2、构造函数中的函数多次创建,占用内存
在这里插入图片描述
在这里插入图片描述
要解决内存浪费的问题就得通过原型对象来帮忙啦~

2、原型对象

  1. 什么是原型对象:JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象,所以我们也称为原型对象
  2. 原型对象有什么用:原型对象可以挂载函数,对象实例化不会多次创建原型对象里面的函数,节约内存

在这里插入图片描述

在这里插入图片描述
上面我们把 talent 函数挂载到了构造函数(Person)的原型对象(prototype)身上,从而避免了在内存中多次创建 talent 函数造成内存浪费的问题。

3、constructor属性

  1. constructor属性属性在哪里:每个原型对象中都有constructor属性
  2. constructor属性有什么用:该属性可以指向该原型对象的构造函数,所以常用他给构造函数上追加属性或方法。
    在这里插入图片描述
    在这里插入图片描述
    因为我们上边说了,constructor属性是指向该原型对象的构造函数的,所以我们只需验证Person.prototype.constructor === Person 是否为 true即可。
    在这里插入图片描述
    利用constructor属性为Person添加方法
    在这里插入图片描述

在这里插入图片描述

4、实例对象

在JavaScript中,实例对象是通过构造函数使用 new 关键字创建的对象。当使用 new 关键字和构造函数创建一个新对象时,这个新对象就会从构造函数的原型对象中继承属性和方法。就比如说我们上边的 kunkun 和 xhz,就是通过构造函数 Person new出来的俩实例对象,这俩实例对象继承了Person的全部属性和方法。
在这里插入图片描述

5、_proto _

_ proto_(原型)他是存在于所有对象内的一个虚拟属性,实例对象的__proto__和Person.prototype 完全等价。_proto _属性存在的意义在于为对象属性和方法的查找提供了一条线路或方法。原型__proto __是由Firefox 和 Chrome 内核JavaScript 引擎提供的非标准的属性。在实际开发过程中不可以使用这个属性。

思考:为什么我们上边的实例对象 kunkun 和 xhz 就能访问到构造函数上的数据呢?

原因就是 在我们实例对象中有__proto__的存在,被构造函数 new 出来的实例对象身上也会包含一个属性(_ protot _), _ protot _会指向原型对象,从而可以访问挂载到原型对象身上的 属性 和 方法。
接下来直接看案例,检验一下 原型是否是指向我们的原型对象的
在这里插入图片描述

在这里插入图片描述

6、原型链

当访问一个对象的某个属性或者方法时,会现在这个对象本身属性上找,如果没有找到那么这个对象的__proto__属性就会去 构造函数的 原型对象(prototype)上找,如果还没有找到就会再在构造函数的原型对象上找,这样一层一层的向上找,就会形成一个链式结构,也称为原型链。
在这里插入图片描述
在这里插入图片描述

注意:以上四个框框里的内容,运行时,要把剩下三个框框里的内容注释起来

当四个框的内容同时存在是,也就意味着整条链路上每个节点都有一个名字叫做sing的方法,那么此时就会遵循就近原则,直接执行实力对象本身上的方法。如下图所示
在这里插入图片描述

小结:

①当访问一个对象成员(属性/方法)时,首先查找这个对象自身有没有该成员(属性/方法)
②如果没有就查找它的原型对象(也就是_proto_指向的prototype原型对象)
③如果还没有就查找原型对象的原型对象(Object的原型对象)
④依此类推一直找到Object为止( null )
⑤原型链就在于为对象成员查找机制提供一个方向,或者说一条路线

  • 17
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值