在一些面向对象的语言中,构造函数都是很常见的,例如Python、c++、Java、PHP等。JavaScript 语言中同样也有构造函数。
什么是构造函数?
首先我们要弄清楚,什么是构造函数? JavaScript 语言中的构造函数其实和普通的函数差不多,第一个不同就是在命名上,构造函数的函数名一般首字母大写,而普通函数则遵照小驼峰式命名法。但是这点不同其实还不能区分构造函数和普通函数。还有一点不同就是构造函数可以使用 new
关键字来调用,普通函数直接通过函数名调用。
示例:
定义一个构造函数:
function Person(){
console.log("这是构造函数");
}
// 调用构造函数
var per = new Person();
定义一个普通函数:
function person(){
console.log("普通函数");
}
// 调用函数
person();
可以很明显的看出,这两个函数中,函数名首字母大写,并且通过 new
关键字调用的就是匿名函数,另外那个则是普通函数。
为什么要使用构造函数
在没有使用构造函数之前,我们可能会存在一个疑问,为什么要使用构造函数呢?
假设我们要创建多个同一类型的对象,那么如果使用字面量的方式来创建,可能会导致代码重复。这个时候就可以使用构造函数来创建对象,将需要用到的属性当做构造函数的参数传递进去。
示例:
例如我们需要创建多个学生对象,其中包括学生编号、姓名、年龄,其中学生的年龄都是18岁,这时如果我们使用字面量的方式创建这些对象:
var student1 = {1, "黄蓉", 18};
var student2 = {2, "郭靖", 18};
var student3 = {3, "杨过", 18};
var student4 = {4, "欧阳锋", 18};
var student5 = {5, "小龙女", 18};
如果我们使用构造函数来创建,因为年龄都是相同的,所以我们在创建对象时,可以将年龄写死,遇到特殊的情况再来修改。
代码如下所示:
function Student(id, name, age){
this.id = id;
this.name = name;
this.age = 18; // 因为所有学生都是18岁,所以age属性值固定
}
当上面的函数创建好后,就可以通过关键字 new
来调用,也就是通过构造函数创建对象:
var stu1 = new Student(1, "黄蓉");
var stu2 = new Student(2, "郭靖");
var stu3 = new Student(3, "杨过");
var stu4 = new Student(4, "欧阳锋");
var stu5 = new Student(5, "小龙女");
从上述两种形式的代码可以看出,对比使用字面量的形式创建对象,通过构造函数的方法创建对象,会更加灵活,并且可以实现代码的复用。
构造函数的执行过程
当一个函数被创建好后,其实我们还不知道这个函数到底是不是构造函数,因为即使函数名大写,也可以是一个普通函数。只有当我们使用关键字 new
来调用这个函数的时候,才能确定这就是一个构造函数。
构造函数的执行过程如下所示:
-
因为当函数没有被调用之前是不会被执行的,所以首先会执行的就是调用函数的代码,当使用关键字
new
调用函数时,会创建一个新的对象(内存空间)。 -
接着将新建的对象设置为函数中的 this,所以 this 就是构造函数刚刚被创建出来的对象。
-
然后会按顺序执行函数体内的代码,例如下面代码中的为 this 添加成员。
-
构造函数执行过程的最后一步是将 this (新建的对象)作为返回值返回。
function Student(id, name, age){
this.id = id;
this.name = name;
this.age = 18;
}
var stu1 = new Student(1, "黄蓉");
console.log(stu1.name);
// 输出:黄蓉