js中的构造函数

什么是构造函数

构造函数

在 JavaScript 中，用 new 关键字来调用的函数，称为构造函数。

为什么要使用构造函数

举个例子，我们要录入一年级一班中每一位同学的个人信息，那么我们可以创建一些对象，比如：

var p1 = { name: 'zs', age: 6, gender: '男', hobby: 'basketball' };
var p2 = { name: 'ls', age: 6, gender: '女', hobby: 'dancing' };
var p3 = { name: 'ww', age: 6, gender: '女', hobby: 'singing' };
var p4 = { name: 'zl', age: 6, gender: '男', hobby: 'football' };
// ...

但是，我们会发现，我们重复地写了很多无意义的代码。比如 name、age、gender、hobby 。如果这个班上有60个学生，我们得重复写60遍。

虽然每位同学都有 name、gender、hobby 这些属性， 但它们的值都是不同的，此时就可以写一个构造函数，把这些属性当做构造函数的参数传递进去。

function Person(name, gender, hobby) {
    this.name = name;
    this.gender = gender;
    this.hobby = hobby;
    this.age = 6;
}

因为都是6岁的学生，所以age值可以是一个具体的固定值，以后再根据不同的特殊情况做更改。

创建上面的函数以后， 我们就可以通过 new 关键字调用，也就是通过构造函数来创建对象了。

var p1 = new Person('zs', '男', 'basketball');
var p2 = new Person('ls', '女', 'dancing');
var p3 = new Person('ww', '女', 'singing');
var p4 = new Person('zl', '男', 'football');
// ...

此时会发现，创建对象会变得非常方便。

构造函数的执行过程

function Animal(color) {
  this.color = color;
}

当一个函数创建好了之后，并不知道是不是构造函数。只有当一个函数以new来调用的时候，才可以说这个函数是一个构造函数。

var dog = new Animal("black");

构造函数会有以下几个执行过程(以之前创建的Person函数为例)：

function Person(name, gender, hobby) {
  this.name = name;
  this.gender = gender;
  this.hobby = hobby;
  this.age = 6;
}

var p1 = new Person('zs', '男', 'basketball');

(1) 当以 new 关键字调用时，会创建一个新的内存空间，标记为 Personl 的实例。

(2) 函数体内部的 this 指向该内存

通过以上两步，可以得出：

var p2 = new Person('ls', '女', 'dancing');  // 创建一个新的内存 #f2
var p3 = new Person('ww', '女', 'singing');  // 创建一个新的内存 #f3

每当创建一个实例的时候，就会创建一个新的内存空间(#f2, #f3)，创建 #f2 的时候，函数体内部的 this 指向 #f2, 创建 #f3 的时候，函数体内部的 this 指向 #f3。

(3) 执行函数体内的代码

通过上面的讲解，可以知道，给 this 添加属性，就相当于给实例添加属性。

(4) 默认返回 this

由于函数体内部的 this 指向新创建的内存空间，默认返回 this ，就相当于默认返回了该内存空间，也就是上图中的 #f1。此时，#f1的内存空间被变量 p1 所接受。也就是说 p1 这个变量，保存的内存地址就是 #f1，同时被标记为 Person 的实例。

构造函数的返回值

(1)没有手动添加返回值，默认返回 this

function Person1() {
  this.name = 'zhangsan';
}

var p1 = new Person1();

首先，当用 new 关键字调用时，产生一个新的内存空间 #f1，并标记为 Person1 的实例；接着，函数体内部的 this 指向该内存空间 #f1；执行函数体内部的代码；由于函数体内部的 this 指向该内存空间，而该内存空间又被变量 p1 所接收，所以 p1 中就会有一个 name 属性，属性值为 ‘zhangsan’。

p1: {
  name: 'zhangsan'
}

(2) 手动添加一个基本数据类型的返回值，最终还是返回 this

function Person2() {
  this.age = 28;
  return 50;
}

var p2 = new Person2();
console.log(p2.age);   // 28
p2: {
  age: 28
}

如果上面是一个普通函数的调用，那么返回值就是 50。

(3) 手动添加一个复杂数据类型(对象)的返回值，最终返回该对象

function Person3() {
  this.height = '180';
  return ['a', 'b', 'c'];
}

var p3 = new Person3();
console.log(p3.height);  // undefined
console.log(p3.length);  // 3
console.log(p3[0]);      // 'a'

再来一个例子

function Person4() {
  this.gender = '男';
  return { gender: '中性' };
}

var p4 = new Person4();
console.log(p4.gender);  // '中性'