详解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 使用构造函数实例化发生的流程： 1.建立一个foo的空对象。 2.将构造函数中的Foo的this指向对象foo。 3.foo的_proto_属性指向Foo函数的prototype原型。 4.执行构造函数中的代码。 相对于普通函数，构造函数中的this是指向实例的，而普通函数调用中的this是指向windows的。 构造函数中如果加入了return的话 在JavaScript中，构造函数是一种特殊类型的函数，用于创建和初始化对象。它们在对象实例化时被调用，并且通常与`new`关键字一起使用。在深入理解构造函数中的`this`和`return`之前，我们需要先了解这两个概念的基础知识。 `this`关键字在JavaScript中是一个动态绑定的上下文引用，它的值取决于函数被调用的方式。在构造函数中，`this`指向新创建的对象实例。例如，在`function Foo(name, age)`中，当通过`new`关键字调用`Foo("Tom", 14)`时，`this`将会指向`foo`这个新创建的对象。这意味着`this.name = name`和`this.age = age`将分别把"Tom"和14赋值给`foo`对象的`name`和`age`属性。 构造函数实例化的流程可以概括为以下四步： 1. 创建一个新的空对象，我们通常称它为`实例`。 2. 将`构造函数`的`this`关键字指向这个新创建的`实例`。 3. 设置`实例`的`__proto__`属性，使其指向`构造函数`的`prototype`属性，这样实例就可以继承构造函数原型上的方法和属性。 4. 执行构造函数中的代码，初始化实例的属性和方法。 接下来，我们讨论构造函数中的`return`语句： 1. 如果`return`语句返回的是JavaScript的五种简单数据类型（String、Number、Boolean、Null、Undefined），构造函数会忽略这个返回值，仍然返回`this`对象，即新创建的实例。这意味着即使有`return`语句，`foo`仍然会是`new Foo("Tom", 14)`的结果，其`name`和`age`属性分别为"Tom"和14。 ```javascript function Bar() { this.name = "Tom"; return "Jeff"; // 忽略返回值，返回this对象 } var bar = new Bar(); console.log(bar.name); // 输出 "Tom" ``` 2. 当`return`语句返回的是一个`Object`时，情况有所不同。此时，构造函数不再返回`this`对象，而是返回`return`语句的值。这可能导致创建的对象与预期不同，因为`new`操作的结果将不再是构造函数实例，而是`return`的`Object`。 ```javascript function Foo(name, age) { this.name = name; this.age = age; return { name: "Jeff" }; // 返回新的对象，不再返回this } var foo = new Foo("Tom", 14); console.log(foo.name); // 输出 "Jeff"，而不是 "Tom" ``` 在实际编程中，通常不建议在构造函数中使用`return`语句返回非`this`对象，因为它可能会导致意外的结果和混淆。构造函数的主要目的是初始化实例，而返回一个不同的对象可能会违背这一目的。然而，对于返回简单数据类型的情况，`return`语句不会改变构造函数实例化的正常流程，因此有时可以用来设置默认值或处理特殊情况。 理解和掌握构造函数中的`this`和`return`至关重要，因为它们直接影响到对象的创建和初始化过程。在编写构造函数时，确保`this`正确地指向实例，并谨慎处理`return`语句，以免产生意外的行为。同时，持续学习和实践JavaScript，有助于深化对这些概念的理解。