谈谈JavaScript中的function constructor和new关键字

您是否曾困惑于 Javascript 中的new关键字呢？是否曾想理解关于 function 和 constructor 的区别是什么呢？

大多数 Javascript 的新开发者不太想要使用new关键字，由于这会让代码写的像是 Java 而且在使用上会形成一点混乱；在这篇文章我会尽可能尝试着去理清这些东西，并解释它是如何运做的。

谈谈function constructor

constructor 翻为构造器但为了让您以后更好地理解，会直接使用 constructor；在 Javascript 中任何一个函数(function)均可以被看成 constructor；Javascript 并无明确的区分二者，也就是说 function 能够被看成 constructor 或者看成通常函数调用。

而 constructor 的用法就是 function 搭配new关键字：

function Person ( ) { 
  this . firstName =  'Jay' ; 
  this . lastName =  'Chou' ; 
}

var person =  new  Person ( ) ; 
console . log ( person ) ;
复制代码

接着咱们把person呼叫出来看，会获得以下的结果，经过new它会帮咱们创建一个对象，而后里面有Person这个function里面的内容，而且变成了属性名称和属性值：

进一步来看new 让这个过程发生了什么

当使用new命令时，它后面的函数依次执行下面的4个步骤：

1. 建立一个空对象，做为将要返回的对象实例。
2. 将这个空对象的原型，指向构造函数的prototype属性。
3. 将这个空对象赋值给函数内部的this关键字。
4. 若是函数没有return其余对象，那么new表达式中的函数调用会自动返回这个新对象。

也就是说，当咱们使用new这个关键字时，实际上会先有一个空的对象被创建。

接着People这个构造函数会被执行，这个空对象的原型，指向了People.prototype。

咱们知道当函数执行的时候，在execution context中会有this被创建，而当咱们使用new的时候，函数里面的this会被指定成刚刚所创建的那个空对象。

因此当执行People这个function，执行到this.firstName和this.lastName时，由于this如今指称的是那个空对象，因此其实是在帮这个空对象赋予属性名称和属性值。

在这样的过程当中，只要这个构造函数People 没有指定return为其余对象，它就会直接返回给咱们这个新创建的对象。

接着让咱们经过一段代码来更清楚的了解这个执行的过程：

function Person ( ) { 
  this . firstName =  'Jay' ; 
  this . lastName =  'Chou' ; 
  console . log ( '这个函数有被执行' ) ;
}

var person =  new  Person ( ) ; 
console . log ( person ) ;
复制代码

这时候在chrome 中呼叫出来的结果以下，说明了当咱们使用new 在构造对象的时候People 这个function 确实有被执行：

经过new 会帮咱们创建一个空的对象

如今我把咱们上面的代码改为这样：

function Person ( ) { 
  console . log ( this ) ; 
}

var person =  new  Person ( ) ; 
// console.log(person);
复制代码

这时候代码返回的结果以下，表示的确在执行这段代码的过程当中帮咱们创建了一个新的空对象：

函数的最后若return其余对象，则原新对象内容会被覆盖

如今，让咱们把本来的代码稍微作以下修改：

function Person ( ) { 
  this . firstName =  'Jay' ; 
  this . lastName =  'Chou' ; 
  return   { "RETURN" : "本来this的内容就不会被返回" } ; 
}

var person =  new  Person ( ) ; 
console . log ( person ) ;
复制代码

构造函数的内部若return其余对象，new命令会返回return语句指定的对象，将原新对象内容覆盖掉；不然，就会无论return语句，返回this对象。返回的结果以下：

手写一个new实现

function create() {
	// 建立一个空的对象
    var obj = new Object(),
	// 得到构造函数，arguments中去除第一个参数
    Con = [].shift.call(arguments);
	// 连接到原型，obj 能够访问到构造函数原型中的属性
    obj.__proto__ = Con.prototype;
	// 绑定 this 实现继承，obj 能够访问到构造函数中的属性
    var ret = Con.apply(obj, arguments);
	// 优先返回构造函数返回的对象
	return ret instanceof Object ? ret : obj;
};
复制代码

使用这个手写的new

function Person() {...}

// 使用内置函数new
var person = new Person(...)
                        
// 使用手写的new，即create
var person = create(Person, ...)
复制代码

代码原理解析：

1. 用new Object() 的方式新建了一个对象obj
2. 取出第一个参数，就是咱们要传入的构造函数。此外由于 shift 会修改原数组，因此 arguments 会被去除第一个参数
3. 将 obj 的原型指向构造函数，这样obj就能够访问到构造函数原型中的属性
4. 使用 apply，改变构造函数 this 的指向到新建的对象，这样 obj 就能够访问到构造函数中的属性
5. 返回 obj

function constructor 的实际应用

由上面的方法，咱们能够经过function的方式来创建一个新的对象，若是咱们想要创建出同属性名称但不一样属性值的对象内容，咱们能够把对象的属性值变成参数，如此就能经过此function constructor创建出许多不一样的对象：

function Person ( firstName , lastName ) { 
  this . firstName = firstName ; 
  this . lastName = lastName ; 
}

var person1 =  new  Person ( 'Jay' ,  'chou' ) ; 
console . log ( person1 ) ; 
var person2 =  new  Person ( 'Jane' ,  'chou' ) ; 
console . log ( person2 ) ;
复制代码

如此，咱们就能够经过同一个构造函数创建出不少不一样的对象：

此外，咱们会把根据构造器（constructor）所创建出来的对象称做是实例（instance），这在以前的文章里也有提过。

注意！若是咱们忘了加上new关键字

这里有一个地方咱们须要很是留意，若是你在撰写代码的过程中，忘记加上new这个关键字的话，好比：

function Person ( ) { 
  this . firstName =  'Jay' ; 
  this . lastName =  'Chou' ;  
}

var person =  Person ( ) ; 
console . log ( person ) ;
复制代码

如此，由于JavaScript不知道你是要执行这个函数，仍是要根据这个function去创建object，因次最后会返回undefined的结果。

小结

• 其实构造函数（function constructor）就是普通的function，只是咱们能够经过这个function 来创建对象。
• 经过在function 前面加上new 这个运算符，它会把函数中this 这个关键字创建成一个新的对象，而后若是你没有在该函数的内部指定返回出其它对象的话，它就会自动返回这个新的对象给你。

那又是如何经过function constructors 来设定咱们的原型（prototype）呢？让咱们在下一篇文章来谈吧！

若是以为文章对你有些许帮助，欢迎在个人GitHub博客点赞和关注，感激涕零！