js超容易理解的构造函数、原型对象!

438 阅读4分钟

一、构造函数

概念:

概念这里就不用官方话来说了,不然感觉抽象,大白话解释其实就是: 和普通函数类似 ,但它里面不需要return结果出去,里面的属性通过this指针,来指向实例化对象中,并同时将这些属性赋值给新的实例化对象。

那什么是实例化?

通过new关键字,新生成一个对象,这个对象内部的属性是用了构造函数里面的,新对象只赋值把一些参数传递给那个构造函数 可以类比成:构造函数其实就是一张汽车的设计图纸,而new出来的实例,就是把图纸中的汽车会建造出来,在建造的过程中,每辆汽车的结构是一样的,而可能颜色、某些性能是不同的,所以,经过同一个构造函数new出来的不同实例对象,是不相等的,因为它们的指向地址其实是不同的

使用场景举例:

比如下面的图片,四个对象长得很像,这时候其实可以把对象里面的三个属性给封装起来,封装到哪儿呢?就放到构造函数里面,

image.png 通过以上解释,加上代码的图片,应该理解了什么是构造函数了!

new的实例化过程是什么样的呢?

image.png 通过以上图片来理解,右边的1234步骤对应代码中的红色步骤!

二、原型对象、原型链

原型对象

通过上面的构造函数学习,我们发现了,其实构造函数就是一个共享中心,这个共享中心里面,有属性,也有方法,但是每次我们new一个新的对象的时候,都要执行一次共享中心,都会为构造函数内部的方法新开辟一个空间,这样非常消耗内存,所以,这里引出了,原型的概念:(js中规定,每一个构造函数中都会自带一个prototype,它既是原型也是原型对象那具体怎么理解呢?-> prototype是构造函数中的一个对象属性,为了不浪费内存,所以,我们把构造函数的方法放到prototype中去,其实prototype就是共享中心(构造函数)中的共享方法中心(prototype)

我们来具体举例看看:

我们现在的构造函数,是创造歌手的图纸,每一个被new出来的歌手对象,都要通过这个图纸来拿自己的特征,现在比如有两位歌手,分别是:ldh和zxy,他们都会唱歌,只是唱的歌曲不同,那么唱歌这个特征,就是一个共享方法,所以要放到prototype中,代码如图,以及过程如图

image.png

c0a863947fa5d5b4b25406bfd2564ce.png

总结:公共属性写在构造函数中,公共方法写在构造函数的prototype中

constructor属性

概念:

每个原型对象中都有一个constructor,它是用来指向这个原型对象的构造函数的!

用大白话理解:构造函数相当于父亲,这个constructor相当于父亲的DNA基因,当我们实例化出多个新对象的时候,这些新对象就是儿子们,新对象继承了父亲(构造函数)的一些特性(共享属性或方法),自然也会遗传父亲的DNA(constructor),所以当我们在看某个对象原本属于哪个构造函数的时候,就可以通过这个constructor来看。

同时,我们在给构造函数添加新方法的时候,只能通过挂载到原型上,但是如果要同时添加多个,可以使用Array.assing方法拷贝进去,因为直接赋值,会将constructor给覆盖掉,如果一定要直接赋值,可以通过如下代码的方式:在其中重新添加一次constructor

function singer () {
  console.log('我是一个构造函数');
}
console.log(singer.prototype);//挂载方法前
singer.prototype = {
  constructor:singer,
  say: function () {
      console.log('说话能力');
  },
  dance:function () {
      console.log('跳舞能力');
  }
}
console.log(singer.prototype);//挂载方法后

image.png

__proto__是什么

先看下面的图:

image.png

概念:

每个对象都有一个__proto__属性,它会指向对应的构造函数的prototype原型对象。我们new出来的对象能够使用构造函数中的共享属性与方法,就是因为有了__proto__的存在,而因为__proto__是存在于每个对象中的,它是对象的原型,所以它叫对象原型。

总结:

1.prototype是什么?哪里来的? 原型(原型对象) 构造函数都自动有原型。

2.constructor属性在哪里?作用干啥的? prototype原型和对象原型proto里面都有都指向创建实例对象/原型的构造函数

3·_proto_属性在哪里?指向谁?在实例对象里面 指向原型 prototype