三分钟全面了解构造函数

上篇介绍了js函数三个定义方法：函数声明、函数表达式、以及构造函数；今天具体讲解构造函数；

什么是构造函数

用new调用的函数就是构造函数，一般函数名首字母大写；

什么情况用构造函数

举个例子：比如要统计一个班级所有同学的个人信息，如果班级有一百个，那么就得定义一百个

var people1 = {name:'张',age:'12',sex:'女'};
var people2 = {name:'李',age:'11',sex:'男'};
var people3 = {name:'王',age:'12',sex:'男'};
.......

这时候，就可以用构造函数：

function People(name,age,sex){
  this.name = name;
  this.age = age;
  this.sex = sex;
}

var people1 = new People('张',12,'女')；
var people2 = new People('李',11,'男')；

根据上面的例子，我们可以看出，如果对象有同一属性和方法，实用构造函数可以达到代码复用的效果，这样创建对象就变得很轻松。

构造函数指针

function People(name){
  this.name = "张三";
}
var pp = new People()
console.log(pp.name) //张三

我们理一下上面例子的原理：首先使用new关键字会先创建一个内存空间，然后在创建实例对象pp，this指向这个内存空间，由于将内存空间赋给了pp，所有this.name = "张三"；

通过上面的例子我们得出结论：构造函数实例化对象最后默认返回this，也就是:

function People(name){
  this.name = "张三";
  return this;
}
var pp = new People()
console.log(pp.name) //张三

既然是默认返回this，那肯定还有其他情况：

• 手动添加返回基本数据类型，还是返回this

function People(name){
  this.name = "张三";
  return '赵四';
}
var pp = new People()
console.log(pp.name) //张三

//如果是普通函数则返回--‘赵四’
var ppp = function People(name){
  this.name = "张三";
  return '赵四';
}
console.log(ppp()) //赵四

• 手动添加返回复杂数据类型（数组、对象），返回复杂数据类型

function People(name){
  this.name = "张三";
  return {name:"赵四"};
}
var pp = new People()
console.log(pp.name) //赵四

• 不加new，this指针指向window

function People(name){
  this.name = name;
}
var pp = People('赵四')
console.log( pp) 
cosole.log(window.name) //赵四

综上所述：如果构造函数没有返回值，则默认返回this，如果返回基本数据类型则还是返回this，如果返回复杂数据类型则返回复杂数据类型，如果不加new关键字，则指向window。

ES6中的Class实质也是构造函数

//普通构造函数
function Test(name,age){
  this.name = name;
  this.age = age;
}
Test.prototype.info = function(){
    return this.name + '的年龄是' + this.age + '岁';
}
var xx = new Test('张三',12);
console.log(xx.info()) //张三的年龄是12岁

//Class写法
class Test1{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }

    info(){
      return this.name + '的年龄是' + this.age + '岁';
    }
}
var xx = new Test1('张三',12);
console.log(xx.info()) //张三的年龄是12岁

console.log(typeof  Test1); //function
console.log(Test1 === Test1.prototype.constructor); //true

从上面的例子可以看出，Test1实质就是一个函数，它自身指向的就是构造函数，所以说，ES6中的Class其实就是构造函数的另一种写法。

PS:欢迎关注【哎呦程序猿公众号】，带给你更多前端干货！