构造函数

JavaScript 构造函数免费看

什么是构造函数?为什么要使用构造函数、构造函数的执行过程

2020-06-13侠课岛    基础入门       

前端/前端必修/JavaScript 基础知识梳理 12     0     1317

在一些面向对象的语言中,构造函数都是很常见的,例如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); 
// 输出:黄蓉

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

12

本课评分:
  •     非常好
难易程度:
  •     适中的

内容目录


本文索引


|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?