JS构造函数精讲

JavaScript 构造函数（Constructor）也称为构造器、类型函数，功能类似对象模板，一个构造函数可以生成任意多个实例，实例对象具有相同的属性、行为特征，但不相等。

定义构造函数

在语法和用法上，构造函数与普通函数没有任何区别。定义构造函数的方法如下：

function 类型名称 (配置参数) {
    this.属性1 = 属性值1;
    this.属性2 = 属性值2;
    ...
    this.方法1 = function () {
        //处理代码
    };
    ...
    //其他代码，可以包含return语句
}

建议构造函数的名称首字母大写，以便与普通函数进行区分。

构造函数有两个显著特点。

• 函数体内使用 this，引用将要生成的实例对象。
• 必需使用 new 命令调用函数，生成实例对象。

示例

下面示例演示定义一个构造函数，包含了两个属性和一个方法。

function Point (x, y) {  //构造函数
    this.x = x;  //私有属性
    this.y = y;  //私有属性
    this.sum = function () {  //方法
        return this.x + this.y;
    }
}

在上面代码中，Point 就是构造函数，它提供模板，用来生成实例对象。

调用构造函数

使用 new 命令可以调用构造函数，创建实例，并返回这个对象。

示例

下面使用 new 命令调用构造函数，生成两个实例，然后分别读取属性，调用方法 sum()。

function Point (x, y) {  //构造函数
    this.x = x;  //私有属性
    this.y = y;  //私有属性
    this.sum = function () {  //私有方法
        return this.x +this.y;
    }
}
var p1 = new Point(100, 200);  //实例化对象1
var p2 = new Point(300, 400);  //实例化对象2
console.log(p1.x);  //100
console.log(p2.x);  //300
console.log(p1.sum());  //300
console.log(p2.sum());  //700

函数构造可以接收参数，以便初始化实例对象。如果不需要传递参数，可以省略小括号，直接使用 new 命令斯奥用，下面两行代码是等价的。

var p1 = new Point();
var p2 = new Point;

如果不使用 new 命令，直接使用小括号调用构造函数，这时构造函数就是普通函数，不会生成实例对象，this 就代表调用函数的对象，在客户端指代全局对象 window。

为了避免误用，最有效的方法是在函数中启用严格模式。代码如下。

function Point (x, y) {  //构造函数
    'use strict';  //启用严格模式
    this.x = x;  //私有属性
    this.y = y;  //私有属性
    this.sum = function () {  //私有方法
        return this.x + this.y;
    }
}

这样调用构造函数时，必须使用 new 命令，否则将抛出异常。

或者使用 if 对 this 进行检测，如果 this 不是实例对象，则强迫返回实例对象。

function Point(x, y) {  //构造函数
    if (! (this instanceof Point)) return new Point(x, y);  //检测this是否为实例对象
    this.x = x;  //私有属性
    this.y = y;  //私有属性
    this.sum = function () {  //私有方法
        return this.x + this.y;
    }
}

构造函数的返回值

构造函数运行使用 return 语句。如果返回值为简单值，则将被忽略，直接返回 this 指代的实例对象；如果返回值为对象，则将覆盖 this 指代的实例，返回 return 后面跟随的对象。

为什么会出现这种情况？这与 new 命令解析过程有关系，使用 new 命令调用函数的解析过程如下：

• 当使用 new 命令调用函数时，先创建一个空对象，作为实例返回。
• 设置实例的原型，指向构造函数的 prototype 属性。
• 设置构造函数体内的 this 值，让它指向实例。
• 开始执行构造函数内部的代码。
• 如果构造函数内部有 return 语句，而且 return 后面跟着一个对象，会返回 return 语句指定的对象；否则会忽略 return 返回值，直接返回 this 对象。

示例

下面示例在构造函数内部定义 return 返回一个对象直接量，当使用 new 命令调用构造函数时，返回的不是 this 指代的实例，而是这个对象直接量，因此当读取 x 和 y 属性值时，与预期的结果是不同的。

function Point (x, y) {  //构造函数
    this.x = x;  //私有属性
    this.y = y;  //私有属性
    return {x : true, y : false}
}
var p1 = new Point(100, 200);  //实例化对象1
console.log(p1.x);  //true
console.log(p1.y);  //false

引用构造函数

在普通函数内，使用 arguments.callee 可以引用函数自身。如果在严格模式下，是不允许使用 arguments.cellee 引用函数的，这时可以使用 new.target 来访问构造函数。

示例

function Point (x, y) {  //构造函数
    'use strict';  //启用严格模式
    if (! (this instanceof new.target)) return new new.target(x, y);  //检测this是否为实例对象
    this.x = x;  //私有属性
    this.y = y;  //私有属性
}
var p1 = new Point(100, 200);  //实例化对象1
console.log(p1.x);  //100

IE 浏览器对其支持不是很完善，使用时要考虑兼容性。