JavaScript-构造函数

目录：

1. 普通函数
2. 创建常用的构造函数
3. 构造函数的返回值
   1. 默认返回this
   2. 显式的return
      1. 返回简单数据类型
      2. 返回复杂数据类型
4. 构造函数的实例
   1. 过生日的孩子
5. 构造函数的陷阱
6. constructor属性
7. 返回复杂数据类型的construtor
8. 最后的任务-消灭机器人
9. 小结

相关阅读：JavaScript-this的指向

普通函数

function demo(message){
    console.log(message);
}
demo('Hi!')//Hi1

以上代码为普通的函数和运行普通函数的方法。

创建常用的构造函数

var nimo=new Object();
nimo.name="nimo";
console.log(nimo)//Object {name: "nimo"}
typeof Object//function

Object是JavaScript自带的函数，只要函数前面加上new操作符，此函数就是构造函数。

构造函数的返回值

默认返回this

如果没有显式的return值返回，构造函数默认返回函数内的this。

var Create=function(){
    this.name='nimo';
}
var nimo=new Create();
console.log(nimo.name);//"nimo"

1. 创建了一个Create函数。
2. Create函数将函数内this的name属性设置为'nimo'。
3. 使用new操作符将Create变成构造函数并将返回值传递给变量nimo。
4. 因为在函数内设置了this.name='nimo'所以nimo的name属性为字符串nimo

注意:构造函数的首字母统一大写。JavaScript没有明确规范，但为了代码规范请尽量首字母大写。

显式的return

返回简单数据类型

如果显式返回的值是一个简单数据类型则照样返回this，五种简单数据类型Undefined、Null、Boolean、Number和String。

var Create=function(name){
    this.name=name;
    return 'string'
}
var nimo=new Create('nimo');
console.log(nimo.name);//nimo

返回复杂数据类型

如果显式返回的值是一个复杂数据类型则返回值就是这个复杂数据类型，只有一种复杂数据类型Object。值得注意的是function 、array、date、regexp都属于复杂数据类型。

var Create=function(name){
    this.name=name;
    return {age:21,like:'read'}
}
var nimo=new Create('nimo');
console.log(nimo);//{age: 21, like: "read"}

构造函数的实例

过生日的孩子

var Kid=function(name,age){
    this.name=name;
    this.age=age;   
    this.fnHappyBirthday=function(){        
        console.log('我是'+this.name+',今天我过生日')
        console.log('今天我'+this.age+'岁');
        this.age++;
        console.log('过了12点我就'+this.age+'岁了');       
    }
}
var nimo=new Kid('nimo',21);
nimo.fnHappyBirthday();
/*
*   我是nimo,今天我过生日
*   今天我21岁 
*   过了12点我就22岁了
*/
console.log('---------------')
nimo.fnHappyBirthday();
/*
*   我是nimo,今天我过生日
*   今天我22岁
*   过了12点我就23岁了 
*/

注意：函数内的this指向的是函数所属对象。

参考如下代码：

var Kid=function(name,age){
    this.name=name;
    this.age=age;   
    this.brother={
        age:1
    }
    this.brother.fnHappyBirthday=function(){        
        console.log('我是'+this.name+',今天我过生日')
        console.log('今天我'+this.age+'岁');
        this.age++;
        console.log('过了12点我就'+this.age+'岁了');       
    }
}
var nimo=new Kid('nimo',21);
nimo.brother.fnHappyBirthday();
/*
*   我是nimo,今天我过生日
*   今天我1岁 
*   过了12点我就2岁了
*/
console.log('---------------')
nimo.brother.fnHappyBirthday();
/*
*   我是nimo,今天我过生日
*   今天我2岁
*   过了12点我就3岁了 
*/

因为函数内的this指向的是函数所属对象，所以此例中fnHappyBirthday函数内的this指向的是this.brother.fnHappyBirthday中的brother

相关阅读：JavaScript-this的指向

构造函数的陷阱

千万不要将构造函数作为普通函数运行

var Demo=function(){
    this.age=21;    
}
var nimo=Demo();
console.log(age)//21
console.log(nimo.age)//Uncaught TypeError: Cannot read property 'age' of undefined

Demo函数如果不作为构造函数调用，函数内的this指向的将会是Demo所属对象。而Demo等同于window.Demo，Demo内的this指向的就是window对象。结果就是：this.age=21等同于window.age=21。无意间就添加了一个age全局变量

constructor属性

constructor 属性返回对创建此对象的数组函数的引用。

var obj=new Object();
console.log(obj.constructor===Object)//true
var arr=new Array();
console.log(arr.constructor===Array)//true

obj和arr分别是Object构造器函数和Array构造器函数创建的，所以他们的constructor属性分别指向的是Object和Array。

var Demo=function(){
    this.name="demo";
}
var nimo=new Demo();
console.log(nimo.constructor===Demo);//true

nimo是通过Demo构造函数创建的，所以nimo的constructor属性指向的是Demo

返回复杂数据类型的construtor

var Demo=function(){
    this.age=21;
    var obj=new Object()
    return obj
}
Demo.prototype.nikename="lalal";
var nimo=new Demo();
console.log(nimo.constructor===Demo);//false
console.log(nimo.constructor===Object);//true

如果构造函数返回的值是复杂类型，那么创建的对象的constructor就不是构造函数创建的对象而是返回的复杂类型的构造函数。obj的构造函数是Object()，所以nimo.constructor指向的是Object。

最后的任务-消灭机器人

张三和李四都是公司的高管。但是他们其中有一个人是机器人创造的，并且都声称自己是人创造的。任务就是找出机器人派来的奸细然后让它消失。

var Person=function(){
    this.creator="person"
}
var RoBot=function(){
    this.creator="person"
}
var ZhangSan=new Person();
var LiSi=new RoBot();
console.log(ZhangSan.creator);//person
console.log(LiSi.creator);//person

小结

1. 构造函数就是在普通函数前面加new操作符。
2. 构造函数的默认返回值为this。
3. 创建出来的新对象的constructor属性指向的是该对象的构造函数。
4. 如果显式的返回了复杂数据类型，则返回值就是复杂数据类型。并且返回对象的constructor值指向的将会是复杂数据类型的构造函数。
5. 千万不要将构造函数作为普通函数运行，这样可能会添加全局对象。

原文链接：http://www.nimojs.com/blog/javascript-constructorfunction/ 转载请注明出处。