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 }; 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
命令时,它后面的函数调用就不是正常的调用,而是依次执行下面的步骤。
- 创建一个空对象,作为将要返回的对象实例
- 将这个空对象的原型,指向构造函数的 prototype 属性
- 将这个空对象赋值给函数内部的 this 关键字
- 开始执行构造函数内部的代码
也就是说,构造函数内部, 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、返回该中间对象,即返回实例对象