详解JS构造函数中this和return

构造函数实例化流程

首先观察以下代码示例：

function Foo(name,age){
  this.name=name;
  this.age=age;
}
var foo=new Foo("Tom",14);
foo.name;//Tom
foo.age;//14

当使用构造函数进行实例化时，主要经历以下几个步骤：

第一步，系统会创建一个名为foo的空对象。

第二步，构造函数内部的this关键字会被绑定到这个新创建的foo对象上。

第三步，新对象foo的_proto_属性会被设置为指向Foo函数的prototype原型对象。

第四步，执行构造函数内部的代码逻辑。

与普通函数调用中this指向window不同，构造函数中的this始终指向当前创建的实例对象。

return返回值机制

如果构造函数内部包含return语句，其返回值处理分为两种情形：

function Foo(name,age){
  this.name=name;
  this.age=age;
  return {name:"Jeff"}
}
var foo=new Foo("Tom",14);
foo.name;//Jeff

情形一：return返回的是五种基本数据类型，包括String、Number、Boolean、Null和Undefined。

在此情况下，JavaScript引擎会忽略return指定的值，构造函数依然返回this对象。

情形二：return返回的是一个对象（Object）。

在此情况下，构造函数不再返回默认的this对象，而是直接返回return语句指定的那个对象。

总结

以上内容介绍了JavaScript构造函数中this指向与return返回值的关系，希望对读者有所帮助。如有任何疑问，欢迎留言，小编会及时回复！