Javascript 构造函数详解_基础知识

一、什么是构造函数

在一些面向对象的语言，如Java、C++、PHP中，构造函数是很常见的。在Javascript中构造函数首先是一个普通的函数，它可以使用new 操作符来调用，并生成一个特殊类型的对象。

yuJHTML5中文学习网 - HTML5先行者学习网
// "Benjamin" is a constructoryuJHTML5中文学习网 - HTML5先行者学习网
var benjamin = new Benjamin("zuojj", "male");yuJHTML5中文学习网 - HTML5先行者学习网

在上面这个实例中benjamin是一个Benjamin对象，那么它是如何来实例化的呢？

复制代码代码如下:

yuJHTML5中文学习网 - HTML5先行者学习网
function Benjamin(username, sex) {yuJHTML5中文学习网 - HTML5先行者学习网
    this.username = username;yuJHTML5中文学习网 - HTML5先行者学习网
    this.sex = sex;yuJHTML5中文学习网 - HTML5先行者学习网
}yuJHTML5中文学习网 - HTML5先行者学习网
var benjamin = new Benjamin("zuojj", "male");yuJHTML5中文学习网 - HTML5先行者学习网
//Outputs: Benjamin{sex: "male",username: "zuojj"}yuJHTML5中文学习网 - HTML5先行者学习网
console.log(benjamin);yuJHTML5中文学习网 - HTML5先行者学习网

正如我们所看到的，“Benjamin”构造函数仅仅是接收传递过来的参数，并把它们赋值给this对象。这是因为当构造函数被new操作符调用时，构造函数的this对象赋值为new操作返回的对象。
这意味着上面的代码等同于：

复制代码代码如下:

yuJHTML5中文学习网 - HTML5先行者学习网
benjamin = {yuJHTML5中文学习网 - HTML5先行者学习网
 "username": "zuojj",yuJHTML5中文学习网 - HTML5先行者学习网
 "sex": "male"yuJHTML5中文学习网 - HTML5先行者学习网
}yuJHTML5中文学习网 - HTML5先行者学习网

二、为什么使用构造函数

为什么使用构造函数，有以下几个方面的原因：
1.使用构造函数，意味着所有的这些对象，都可以使用相同的基本结构创建
2.使用构造函数，意味着“benjamin”对象被明确的标记为“Benjamin”函数的实例

复制代码代码如下:

yuJHTML5中文学习网 - HTML5先行者学习网
function Benjamin(username, sex) {yuJHTML5中文学习网 - HTML5先行者学习网
    this.username = username;yuJHTML5中文学习网 - HTML5先行者学习网
    this.sex = sex;yuJHTML5中文学习网 - HTML5先行者学习网
}yuJHTML5中文学习网 - HTML5先行者学习网
var benjamin = new Benjamin("zuojj", "male");yuJHTML5中文学习网 - HTML5先行者学习网
var ben = {yuJHTML5中文学习网 - HTML5先行者学习网
 "username": "zuojj",yuJHTML5中文学习网 - HTML5先行者学习网
 "sex": "male"yuJHTML5中文学习网 - HTML5先行者学习网
}yuJHTML5中文学习网 - HTML5先行者学习网
//Outputs: trueyuJHTML5中文学习网 - HTML5先行者学习网
console.log(benjamin instanceof Benjamin);yuJHTML5中文学习网 - HTML5先行者学习网
//Outputs: falseyuJHTML5中文学习网 - HTML5先行者学习网
console.log(ben instanceof Benjamin);yuJHTML5中文学习网 - HTML5先行者学习网

3.使用构造函数，意味着我们可以在原型上定义公共方法，供多个实例共享

复制代码代码如下:

yuJHTML5中文学习网 - HTML5先行者学习网
function Benjamin(username, sex) {yuJHTML5中文学习网 - HTML5先行者学习网
    this.username = username;yuJHTML5中文学习网 - HTML5先行者学习网
    this.sex = sex;yuJHTML5中文学习网 - HTML5先行者学习网
}yuJHTML5中文学习网 - HTML5先行者学习网
Benjamin.prototype.getName = function() {yuJHTML5中文学习网 - HTML5先行者学习网
 return this.username;yuJHTML5中文学习网 - HTML5先行者学习网
}yuJHTML5中文学习网 - HTML5先行者学习网
var benjamin = new Benjamin("zuojj", "male");yuJHTML5中文学习网 - HTML5先行者学习网
var ben = new Benjamin("lemon", "female");yuJHTML5中文学习网 - HTML5先行者学习网
//Outputs: zuojjyuJHTML5中文学习网 - HTML5先行者学习网
console.log(benjamin.getName());yuJHTML5中文学习网 - HTML5先行者学习网
//Outputs: lemonyuJHTML5中文学习网 - HTML5先行者学习网
console.log(ben.getName());yuJHTML5中文学习网 - HTML5先行者学习网

三、注意事项

1.new 关键字
在实例化构造函数的时候一定不要忘了使用new关键字，是否使用new关键字，对this对象的影响很大，不用new关键字的情况下，this对象会指向全局对象（window in browser and global in node）。因此定义构造函数时，建议函数名称首字母大写。
2.如果被调用的函数没有显式的 return 表达式，则隐式的会返回 this 对象也就是新创建的对象，否则将会影响返回的结果，但仅限于返回的是一个对象

复制代码代码如下:

yuJHTML5中文学习网 - HTML5先行者学习网
function Bar() {yuJHTML5中文学习网 - HTML5先行者学习网
    return 2;yuJHTML5中文学习网 - HTML5先行者学习网
}yuJHTML5中文学习网 - HTML5先行者学习网
var bar = new Bar();yuJHTML5中文学习网 - HTML5先行者学习网
//返回新创建的对象yuJHTML5中文学习网 - HTML5先行者学习网
//Outputs: Bar {} yuJHTML5中文学习网 - HTML5先行者学习网
console.log(bar);yuJHTML5中文学习网 - HTML5先行者学习网
function Test() {yuJHTML5中文学习网 - HTML5先行者学习网
    this.value = 2;yuJHTML5中文学习网 - HTML5先行者学习网
    return {yuJHTML5中文学习网 - HTML5先行者学习网
        foo: 1yuJHTML5中文学习网 - HTML5先行者学习网
    };yuJHTML5中文学习网 - HTML5先行者学习网
}yuJHTML5中文学习网 - HTML5先行者学习网
var test = new Test();yuJHTML5中文学习网 - HTML5先行者学习网
//返回的对象yuJHTML5中文学习网 - HTML5先行者学习网
//Outputs: Object {foo: 1} yuJHTML5中文学习网 - HTML5先行者学习网
console.log(test); yuJHTML5中文学习网 - HTML5先行者学习网

我们需要注意的是：
a) new Bar() 返回的是新创建的对象，而不是数字的字面值 2。因此 new Bar().constructor === Bar，但是如果返回的是数字对象，结果就不同了;
b) 这里得到的 new Test()是函数返回的对象，而不是通过new关键字新创建的对象，如下所示：

复制代码代码如下:

yuJHTML5中文学习网 - HTML5先行者学习网
function Bar() {yuJHTML5中文学习网 - HTML5先行者学习网
    return 2;yuJHTML5中文学习网 - HTML5先行者学习网
}yuJHTML5中文学习网 - HTML5先行者学习网
var bar = new Bar();yuJHTML5中文学习网 - HTML5先行者学习网
function BarN() {yuJHTML5中文学习网 - HTML5先行者学习网
 return new Number(2);yuJHTML5中文学习网 - HTML5先行者学习网
}yuJHTML5中文学习网 - HTML5先行者学习网
var barn = new BarN();yuJHTML5中文学习网 - HTML5先行者学习网
//Outputs: trueyuJHTML5中文学习网 - HTML5先行者学习网
console.log(bar.constructor === Bar);yuJHTML5中文学习网 - HTML5先行者学习网
//Outputs: Number {} yuJHTML5中文学习网 - HTML5先行者学习网
console.log(barn);yuJHTML5中文学习网 - HTML5先行者学习网
//Ouputs: falseyuJHTML5中文学习网 - HTML5先行者学习网
console.log(barn.constructor === BarN);yuJHTML5中文学习网 - HTML5先行者学习网
//Outputs: trueyuJHTML5中文学习网 - HTML5先行者学习网
console.log(barn.constructor === Number);yuJHTML5中文学习网 - HTML5先行者学习网
/* -------------------------------------- */yuJHTML5中文学习网 - HTML5先行者学习网
function Test() {yuJHTML5中文学习网 - HTML5先行者学习网
    this.value = 2;yuJHTML5中文学习网 - HTML5先行者学习网
    return {yuJHTML5中文学习网 - HTML5先行者学习网
        foo: 1yuJHTML5中文学习网 - HTML5先行者学习网
    };yuJHTML5中文学习网 - HTML5先行者学习网
}yuJHTML5中文学习网 - HTML5先行者学习网
var test = new Test();yuJHTML5中文学习网 - HTML5先行者学习网
//Outputs: undefinedyuJHTML5中文学习网 - HTML5先行者学习网
console.log(test.value);yuJHTML5中文学习网 - HTML5先行者学习网
//Ouputs: 1yuJHTML5中文学习网 - HTML5先行者学习网
console.log(test.foo);yuJHTML5中文学习网 - HTML5先行者学习网

以上就是对构造函数的总结，希望对初学者有所帮助，文中不妥之处，望批评、斧正。

Javascript 构造函数详解_基础知识_