JS构造函数精讲

时间：03-07来源：作者：点击数：72

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