zl程序教程

您现在的位置是:首页 >  前端

当前栏目

JavaScript笔记(2) 构造函数和原型

JavaScript笔记 原型 构造函数
2023-06-13 09:12:59 时间

昨天又独自把案例做了一遍,还是有点小错误出现的,但是大体上比较顺利,感觉还是逻辑比较重要,先把思路整理好再开始做会比较好.

构造函数和原型

目标:

这些之前都学过的我就不多赘述了,直接将图片贴上来了

JavaScript的构造函数中可以添加一些成员,可以在构造函数本身上添加,也可以在构造函数内部的this上添加.通过这两种方式添加的成员,就分别称为静态成员实例成员

  • 静态成员: 在构造函数本身添加的成员称为静态成员,只能由构造函数本身来访问
  • 实例成员: 在构造函数内部创建的成员称为实例成员,只能由实例化的对象来访问

现在写一个例子来认识这两种成员

(偷偷换了个主题哦)

构造函数很好用,但是存在浪费内存的问题:

分别有两个对象,但是这两个对象里的同一个方法却都开辟了新的内存空间,这不仅浪费内存也浪费时间,而且这两个方法指向的是不同的地址,这十分不合理,我们希望的是所有对象都使用的是同一个函数,那么要怎么做呢?

构造函数原型prototype

构造函数通过原型分配的函数是所有对象所共享的.

JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象.注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有.

我们用console.dir()打印一下这个构造函数(console.dir()可以显示一个对象所有的属性和方法。)

可以看到prototype里面有一个原型对象

我们可以把那些不变的方法,重新定义在prototype对象上,这样所有对象的实例就可以共享这些方法.

没使用原型对象之前:

因为两个对象指向的函数是不同的地址,所以是false.

使用了prototype以后:

一般情况下,我们的公共属性(简单数据类型)定义到构造函数里面,公共的方法(复杂数据类型)我们放到原型对象身上

可能我们还会有疑惑,我们的sing方法是放在了原型prototype上,为什么对象可以使用这个方法呢?

对象原型__proto__

对象都会有一个属性__proto__指向构造函数的prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有__proto__原型的存在

我们打印一下ldh对象:

可以看到ldh对象是有__proto__这个属性的,而__proto__这个属性指向的是prototype这个原型对象,然而原型对象身上是有这个方法的,自然就能使用这个方法了.

  • __proto__对象原型和prototype是等价的

分析:

  • prototype 原型对象
  • __proto__ 对象的原型
  • __proto__对象原型的意义在于为对象的查找机制提供一个方向,或者说一条线路,但是它是一个非标准属性,因此实际开发中,不可以使用这个属性,它只是内部指向原型对象prototype.

constructor构造函数

对象原型和构造函数的原型对象里面都有一个属性constructor属性,constructor我们称为构造函数,因为它指回构造函数本身

如果我们直接打印Star.prototype.constructor,那么就是构造函数本身

很多情况下,我们需要手动的利用constructor这个属性指回原来的构造函数

这个时候就出问题了

这是因为原先的方法用的是".",相当是在这个对象上添加方法;但是我们现在用的是"=",也就是赋值的方法,自然就把Star.prototype给覆盖掉了.

所以现在我们做一步操作,手动利用constructor指回原来的构造函数

构造函数,原型对象,实例之间的关系

说到底这一节听懵逼的,晚点查查资料,明天继续,晚上复习