js构造函数内部出现return会怎样

JavaScript028

js构造函数内部出现return会怎样,第1张

一提到js构造函数,可能很多人都会想到构造函数内部最好不要出现return甚至不要出现return的警告语。

那么,假如js构造函数内部出现了return,又会怎样呢?

js构造函数内部没有return时:

输出一下p看看结果,如图所示:

注意红圈圈,显示p对象的类型是People。

如果一:

如果在构造函数内部添加上一个return关键字会怎样呢?

还是输出一下p,结果如图所示:

是不是没有任何变化?!所以,仅仅添加一个return关键字是没有影响的。

如果二:

那如果return一个数字呢?

同上,还是输出p查看结果,如图所示:

是不是有没有任何变化?!那就是了,return数字类型的也没有影响。

如果三:

return一个字符串

结果:

结果和没有添加return的时候是一样的,即return字符串是没有影响的。

如果四:

添加return undefined

结果如图所示:

依然是没有变化的,即return undefined也是没有影响的。

如果五:

添加return null

结果如图所示:

对比发现,return null也是没有影响的。

如果六:

添加return {}

结果如图所示:

等等,怎么显示p的类型是Object,难道不应该是People吗?

是的,你没有说错,p的类型应该是People但这里确实显示的是Object。说明添加return {};是有影响的,把构造函数内部的this给替换了。

如果七:

添加return function(){}

结果如下:

p的类型变成了function,显然受影响了。

综上所述,有没有发现问题?

构造函数内部仅仅添加return关键字,或者return的是数字、字符串、null、undefined等值类型的数据的时候,使用new关键字执行后对新产生的对象是没有影响的。

但是,一旦构造函数内部return的是对象、函数等引用类型的数据,使用new关键字执行后新对象的具体类型就被改变了。显然,正常情况下这并不是我们想要的结果。

而且,即使return值类型的数据不会改变新对象的具体类型,但也并没有什么实际意义。

所以呢,js构造函数内部还是不要出现return比较好啦!

要知道这个问题,需要知道new的过程发生了什么?终于在( js高级程序设计第三版)给出了答案:

1.创建一个空对象

2.将这个空对象的原型,指向构造函数的prototype属性,构造函数中的this指向这个空对象

3.开始执行内部的代码。

4.如果该函数没有返回 对象 ,则返回this

对第四点我要补充一点:因为有个关键字大家容易遗漏,就是 对象 这两个字,这意味着如果返回的是基本数据类型,比如:int ,string, 那么使用new 最后返回的还是this,这个对象,而不是基本数据类型,这是一个非常容易被遗漏的地方。

其他例子就不多说了,再补充两点总结:

小结:

1. 没有new的构造函数就是一个普通函数,this指向的window,返回值就是构造函数的返回结果。并且不管return的是基本数据类型还是引用类型,都会原样返回。

2. 有new的构造函数,默认返回this,而this指向实例化的对象。并且如果return的是基本数据类型,那么忽视掉该return值,如果返回的是一个引用类型,那么返回该引用类型。