从‘手工作坊’到现代工厂,js构造函数的入门指南

61 阅读4分钟

在日常编写代码的过程中,你是否有过这一种需求:'我需要批量化生产一些对象,这些批量化生产出的对象中有着固定的属性名,但是其中的值在创建这个对象时是不同的'。(假设我们在批量化生产一种车,每一个对象对应着一台车)

这时你想着,这还不简单,我每造一台车我就创造一个对象不就行了

const car = {
color:blue,
heigh:200,
weight1000
}

那么你有没有发现一件事情,那就是如果你需要创造出的对象很多的话,那是不是意味着你要重复很多次创建 这个对象的操作,代码量很大,且麻烦,那这时,你有没有想到一个办法,那就是创造出一个函数,用来专门批量化 生产属性名相同,但是值不一定相同的对象,这就是构造函数所能做到的事情

一、创建一个构造函数

function Car(color,heigh,weight){
this.color = blue
this.heigh = 200
this.weight = 1000
}

const car1 = new Car()
const car2 = new Car()
const car3 = new Car()

上述代码串创建并使用了构造函数Car(),你发现,可以通过使用new Car()的方式,来批量化生产car对象,我们称这种被构造函数批量化生产出来的对象为实例对象,我们通过向构造函数Car()内传入不同的属性值,便可在创建一个新的实例对象的时候改变我们需要改变的属性的值。

我们可以这么理解

  • 构造函数就像‘一份简历填写表’
  • 实例对象就像‘xxx的简历’ 通过一份相同的‘简历填写表’,标明了你所需要填写的内容(对应构造函数内的属性名),不同的人填写不同的内容(对应构造函数内的属性值),创建出了大量相同格式的‘xxxx的简历’(对应被创建出的实例对象

那么你是否会好奇,在使用构造函数创建实例对象的时候,其中的new是什么作用呢?

这其实也很好理解,我们依旧使用需要使用到上述Car()的例子来解释

我们把Car()这一构造函数比作造车的蓝图,而被创建出的car,car1,car2.....等就是你所通过蓝图为模板制造的车,那么,我们该如何通过一张蓝图来制造一辆真正的车呢,没错,这就是new在这个过程中发挥的作用

二、召唤new大神

现在,我们需要通过Car()这一张蓝图来创造出两辆实实在在的车,这时,我们就需要召唤出new这个造 车工厂

const car1 = new Car(blue,200,1000)
const car2 = new Car(red,300,2000)

工厂(new)接到指令后,会严格执行以下四个步骤

一、准备一个通用的车骨架(创建出一个新的对象) 此时,工厂(new)会创建出一个全新的,空白的车骨架({})。

二、制作所有该类型车的通用零件与功能(新对象继承构造函数的原型) 此时,工厂会按照蓝图上所标注的一些固定需要的功能与要求为这辆新车制作出来制作(_ _prototype_ _),使其能获得所有通过该蓝图制作出来的车规定好拥有的功能与需求(Car.prototype)。换言之,即制作好蓝图所规定的默认设置

三、制作新车需要的指定功能与样式(绑定this,并执行构造函数)

此时,工厂开始对着你在提交蓝图时,所提交上来的数据进行深度定制你的需求(执行Car()函数),此时,蓝图(构造函数)内的this指向的是这俩新车(第一步所创建的新对象)

this.color = blue  //改变你指定的颜色
this.heigh = 200   //改变你所指定的高度
this.weight = 1000  // 改变你指定的重量

这样,这辆新车就有了你在使用该蓝图制作该车时所指定的独特的功能和功能

四、交付成品(返回新对象)

此时,工厂(构造函数Car())会将这个已经造好的新车交付给你

重复两次相同步骤,于是你获得了car1与car2这两辆新车,car1与car2是两辆完全独立的车,但是他们都是被同一张蓝图(Car()),通过不同的需求,被new这个工厂创建出来的。

于是我们可以通过一句话来总结new在此发挥的作用,new就是一个‘对象工厂’,它拿一个构造函数作为‘蓝图’,自动帮你批量化生产出具有同样特征和行为的实例对象