详解JS构造函数中this和return

接下来我会详细讲解 JavaScript 构造函数中 this 和 return 的相关内容。

什么是构造函数

在 JavaScript 中，构造函数是用来创建对象的函数，被调用时会返回一个新的对象。通常使用 new 关键字来调用构造函数。

以下是一个简单的构造函数示例：

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person("Tom", 25);
console.log(person1); // 输出 { name: 'Tom', age: 25 }

从示例中可以看出，Person 函数中使用了 this 来定义对象属性，并且在最后返回了一个新的对象。

this 的指向问题

构造函数中经常会用到 this 关键字，它可以用来指向当前正在创建的对象。但是有很多情况下，开发者会对 this 的指向问题感到困惑。下面我们来看几个例子来说明 this 的指向问题。

示例1

function Person(name, age) {
  this.name = name;
  this.age = age;
  return {
    name: 'David',
    age: 30,
  };
}

const person1 = new Person("Tom", 25);
console.log(person1); // 输出 { name: 'David', age: 30 }

在这个例子中，构造函数 Person 中的 return 语句返回了一个新的对象。这时，如果 return 的对象字面量中也包含了 name 和 age 属性，那么会覆盖 this 上的同名属性。因此，最终创建出来的对象的属性值就会变成 return 中的属性值。

示例2

function Person(name, age) {
  this.name = name;
  this.age = age;

  const printName = function() {
    console.log(this.name);
  };

  printName();
}

const person1 = new Person("Tom", 25); // 输出 undefined

在这个例子中，构造函数 Person 中调用了一个函数 printName，这个函数里面也使用了 this 关键字。但是最终打印出来的结果是 undefined，而不是预期的 Tom。这是因为在 printName 函数中的 this 关键字指向的是全局对象，而不是构造函数创建的对象。

解决这个问题有很多方法，其中一种是使用箭头函数，在箭头函数中 this 会隐式继承上下文中的 this 值。

function Person(name, age) {
  this.name = name;
  this.age = age;

  const printName = () => {
    console.log(this.name);
  };

  printName();
}

const person1 = new Person("Tom", 25); // 输出 Tom

return 的作用

在构造函数中使用 return 常常会引发一些问题，不过只要理解了它的作用，就能更好地避免出现问题。

在构造函数中使用 return 语句，有以下三个作用：

1. 返回新的对象
2. 返回 null 或 undefined，此时 this 指向新创建的对象
3. 手动返回一个非对象类型的值，则会忽略该返回值，依然返回 this

以下是一些具体的例子。

示例1

function Person(name, age) {
  this.name = name;
  this.age = age;

  return {
    name: 'David',
    age: 30,
  };
}

const person1 = new Person("Tom", 25);
console.log(person1); // 输出 { name: 'David', age: 30 }

在这个例子中，构造函数中使用了 return 并返回了一个对象字面量。这里的作用就是返回一个新的对象，从而覆盖掉了 this 创建出来的对象。

示例2

function Person(name, age) {
  this.name = name;
  this.age = age;

  const result = 10;
  return result;
}

const person1 = new Person("Tom", 25);
console.log(person1); // 输出 { name: 'Tom', age: 25 }

在这个例子中，构造函数中使用了 return 关键字并返回了一个非对象类型的值 result。这里的作用就是忽略返回值，继续返回 this。

总结

在 JavaScript 构造函数中，this 用来指向当前正在创建的对象，而 return 则用来返回新的对象或回到当前的对象。需要注意的是，在构造函数里使用 return 时要注意以及返回类型的问题，以防出现不可预料的问题。