js构造构造函数有无return的影响

729 阅读2分钟

先看看没有return的情况:

function Fn() {
    this.color = 'red'
    this.price = '2999'
}
let res = new Fn()
console.log(res) // { color: 'red', price: '2999' }

结果是一个实例对象(这个对象的由来后面会提到)

再看看有return的情况:

function Fn() {
    this.color = 'red'
    this.price = '2999'
    return '我是返回值'
}
let res = new Fn()
console.log(res) // {color: 'red', price: '2999'}

function Fn2() {
    this.color = 'red'
    this.price = '2999'
    return {
             text: '我是返回值'
         }
 }
 let res2 = new Fn2()
 console.log(res2) // {text: '我是返回值'}

哎,好像没反应耶,不对,还是有变化的。

总结一下就是:没有返回值,返回的是一个我们常见的实例对象.

有返回值时,返回值是一个值类型,那返回的依然是一个实例对象;返回值是引用类型,返回值就是这个引用类型(这里只试了对象,像函数,数组大家可以自己试试

下面是摘录自mdn的总结(new的过程):

new 关键字会进行如下的操作:

  1. 创建一个空的简单JavaScript对象(即 {} );(返回的实例对象就是这个)
  2. 为步骤1新创建的对象添加属性 proto ,将该属性链接至构造函数的原型对象 ;
  3. 将步骤1新创建的对象作为this的上下文 ;(可以理解为用call绑定上面的对象)
  4. 如果该函数没有返回对象,则返回this(this就是上面的对象)

创建一个用户自定义的对象需要两步:

  1. 通过编写函数来定义对象类型。
  2. 通过 new 来创建对象实例。(这里就是上面4步)

创建一个对象类型,需要创建一个指定其名称和属性的函数;对象的属性可以指向其他对象,看下面的例子:

当代码 new Foo(...) 执行时,会发生以下事情:

  1. 一个继承自 Foo.prototype 的新对象被创建。
  2. 使用指定的参数调用构造函数 Foo,并将 this 绑定到新创建的对象。new Foo 等同于 new Foo(),也就是没有指定参数列表,Foo 不带任何参数调用的情况。
  3. 由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象,则使用步骤1创建的对象。(一般情况下,构造函数不返回值,但是用户可以选择主动返回对象,来覆盖正常的对象创建步骤)

这里有一个MDN的链接给大家参考一下:# new 运算符