new关键字对构造函数做了什么
new 命令
基本⽤法
new 命令的作⽤，就是执⾏构造函数，返回⼀个实例对象。
1 var Vehicle = function (){
2  this.price = 1000;
3 };
4
5 var v = new Vehicle();
6 v.price // 1000
上⾯代码通过 new 命令，让构造函数Vehicle⽣成⼀个实例对象，保存在变量v中。这个新⽣成的实例对象，
从构造函数Vehicle继承了price属性。在 new 命令执⾏时，构造函数内部的 this ，就代表了新⽣成的实例对象，this.price表⽰实例对象有⼀个price属性，它的值是1000。
使⽤new命令时，根据需要，构造函数也可以接受参数。
1 var Vehicle = function (p) {
2  this.price = p;
3 };
4 var v = new Vehicle(500);
new 命令本⾝就可以执⾏构造函数，所以后⾯的构造函数可以带括号，也可以不带括号。下⾯两⾏代码是等价的。
1 var v = new Vehicle();
2 var v = new Vehicle;
⼀个很⾃然的问题是，如果忘了使⽤ new 命令，直接调⽤构造函数会发⽣什么事？
这种情况下，构造函数就变成了普通函数，并不会⽣成实例对象。⽽且由于后⾯会说到的原因， this 这时代表全局对象，将造成⼀些意想不到的结果。
1 var Vehicle = function (){
2  this.price = 1000;
3 };函数prototype
4 var v = Vehicle();
5 v.price
6 // Uncaught TypeError: Cannot read property 'price' of undefined
7 price
8 // 1000
上⾯代码中，调⽤Vehicle构造函数时，忘了加上 new 命令。结果，price属性变成了全局变量，⽽变量v变成了 undefined 。
因此，应该⾮常⼩⼼，避免出现不使⽤ new 命令、直接调⽤构造函数的情况。为了保证构造函数必须与 new 命令⼀起使⽤，⼀个解决办法是，在构造函数内部使⽤严格模式，即第⼀⾏加上 use strict 。
1 function Fubar(foo, bar){
2  'use strict';
3  this._foo = foo;
4  this._bar = bar;
5 }
6 Fubar()
7 // TypeError: Cannot set property '_foo' of undefined
上⾯代码的Fubar为构造函数， use strict 命令保证了该函数在严格模式下运⾏。由于在严格模式中，函数内部的this不能指向全局对象，默认等于 undefined ，导致不加new调⽤会报错（JavaScript不允许对 undefined 添加属性）。
另⼀个解决办法，是在构造函数内部判断是否使⽤ new 命令，如果发现没有使⽤，则直接返回⼀个实例对象。
1 function Fubar(foo, bar){
2  if (!(this instanceof Fubar)) {
3    return new Fubar(foo, bar);
4  }
5  this._foo = foo;
6  this._bar = bar;
7 }
8 Fubar(1, 2)._foo // 1
9 (new Fubar(1, 2))._foo // 1
上⾯代码中的构造函数，不管加不加new命令，都会得到同样的结果。
new命令的原理
使⽤new命令时，它后⾯的函数调⽤就不是正常的调⽤，⽽是依次执⾏下⾯的步骤。
1. 创建⼀个空对象，作为将要返回的对象实例
2. 将这个空对象的原型，指向构造函数的 prototype 属性
3. 将这个空对象赋值给函数内部的 this 关键字
4. 开始执⾏构造函数内部的代码
也就是说，构造函数内部， this 指的是⼀个新⽣成的空对象，所有针对 this 的操作，都会发⽣在这个空对象上。构造函数之所以叫“构造函数”，就是说这个函数的⽬的，就是操作⼀个空对象（即 this 对象），将其“构造”为需要的样⼦。
如果构造函数内部有return语句，⽽且return后⾯跟着⼀个对象， new 命令会返回 return 语句指定的对象；否则，就会不管 return 语句，返回 this 对象。
1 var Vehicle = function () {
2  this.price = 1000;
3  return 1000;
4 };
5 (new Vehicle()) === 1000
6 // false
上⾯代码中，构造函数Vehicle的 return 语句返回⼀个数值。这时， new 命令就会忽略这个 return 语句，返回“构造”后的 this 对象。
但是，如果return语句返回的是⼀个跟this⽆关的新对象， new 命令会返回这个新对象，⽽不是 this 对象。这⼀点需要特别引起注意。
1 var Vehicle = function (){
2  this.price = 1000;
3  return { price: 2000 };
4 };
5 (new Vehicle()).price
6 // 2000
上⾯代码中，构造函数 Vehicle 的 return 语句，返回的是⼀个新对象。 new 命令会返回这个对象，⽽不是 this 对象。
另⼀⽅⾯，如果对普通函数（内部没有 this 关键字的函数）使⽤ new 命令，则会返回⼀个空对象。
1 function getMessage() {
2  return 'this is a message';
3 }
4 var msg = new getMessage();
5 msg // {}
6 typeof msg // "Object"
上⾯代码中， getMessage 是⼀个普通函数，返回⼀个字符串。对它使⽤ new 命令，会得到⼀个空对象。这是因为 new 命令总是返回⼀个对象，要么是实例对象，要么是 return 语句指定的对象。本例中， return 语句返回的是字符串，所以 new 命令就忽略了该语句。
在javascript中，new关键字能让⼀个函数变得与众不同，把new搞清楚了，就明⽩构造函数中的this指向谁了。
举个例⼦
funtion Demo(){
console.log(this);
}
Demo();//window
new Demo();//demo
很显然使⽤new关键字之后，函数内部this的指向发⽣了变化，那么具体发⽣了什么变化呢，就得搞清楚new关键字究竟做了什么。
function New(func){
//声明⼀个中间对象，该对象为最终返回的实例
var res = {};
if(func.prototype != null){
//将实例的原型指向构造函数的原型
res.prototype = func.prototype;
}
//ret为构造函数执⾏的结果，这⾥通过```apply```，将构造函数内部的```this```指向修改为指向```res```，即实例对象
var ret = func.apply(res,Array.prototype.slice.call(arguments,1));
//当我们在构造函数上明确指定了返回对象时，那么```new```的执⾏结果就是该返回对象
if((typeof ret === 'object' || typeof ret === 'function')&&ret != null){
return ret;
}
return res;
}
所以在new⼀个实例的过程中，其实是执⾏了如下的步骤
1、声明⼀个中间对象
2、将该中间对象的原型指向构造函数的原型
3、将构造函数中的this指向该中间对象
4、返回该中间对象，即返回实例对象

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。