<JavaScript> 普通函数与构造函数的区别

JavaScript中存在构造函数与函数两个概念。

这可能会给初学者造成一定的困扰，难不成存在两种函数。

然而事实这两种函数的构成完全一样，无论从长相还是气质都是一模一样的。

区别点在于，所扮演觉得不同，同一个人在不同的场合具有不同的角色。

就比如曹操对将要出征的曹彰所说"居家为父子受事为君臣"。

同是曹彰，在家里与曹操的是父子关系，领兵在外则是上下级关系。

构造函数与普通函数也是如此，代码实例如下：

function Foo(){}
Foo();
let f=new Foo();

Foo()是作为普通函数使用，使用new 调用则是作为构造函数使用。

使用方式的不同，自然会产生很多差别，下面分别做一下介绍。

一.首字母大小写惯例：

这不是语法规定，而是使用惯例。

作为构造函数，函数的首字母通常会使用大写形式，作为普通函数则习惯于用小写形式。

构造函数扮演的就是标准面向对象语言中类的角色，ES2015新增class类概念。

遵循此原则有利于团队合作开发，外观即可推断函数将要扮演的角色。

二.函数中this的指向不同：

普通函数中的this，在严格模式下指向undefined，非严格模式下指向window对象。

而构造函数的this则是指向它创建的对象实例。

function Foo(){
  console.log(this===window);
}
Foo();

代码运行效果截图如下：

非严格模式下指向window对象，严格模式下指向undefined，不再演示。

function Foo(){
  this.webName="蚂蚁部落";
}
let f=new Foo();
console.log(f.webName);

代码运行效果截图如下：

构造函数中的this指向它所创建的对象实例。

三.return语句的使用:

普通函数通常要使用return语句返回一个值，如果没有return语句默认返回undefined。

而构造函数则一般不需要return语句，当然也可以有return语句，感觉使用return完全没有意义。

返回值分为两种情况：

（1）.如果构造函数return一个值类型数据，那么完全忽略此return语句，和没有一样。

（2）.如果构造函数return一个引用类型数据，那么它的返回值就是此引用类型数据，而不是创建的对象实例。

四.箭头函数：

ES2015新增箭头函数，它只能作为普通使用，不能用作构造函数。