你分得清：function Person(){}、var person = Person()和var person = new Person()吗？

引言

在JavaScript编程中，经常会遇到如下三种代码片段：function Person(){}、var person = Person()，以及var person = new Person()。这些代码片段之间的区别可能让初学者感到困惑，但理解它们的不同之处对于编写高质量的JavaScript代码至关重要。

在本文中，我们将深入探讨这三种代码片段之间的区别，帮助您理解它们的工作原理以及如何正确应用它们。我们将从基础开始，逐步分析它们，以便您能够更好地掌握JavaScript中的构造函数和对象创建的关键概念。

问题的答案

这个问题是在考察 JavaScript 中的构造函数（constructor）。从技术上讲，function Person(){}只是一个普通的函数声明。使用 PascalCase 方式命名函数作为构造函数，是一个惯例。

var person = Person()将Person以普通函数调用，而不是构造函数。如果该函数是用作构造函数的，那么这种调用方式是一种常见错误。通常情况下，构造函数不会返回任何东西，因此，像普通函数一样调用构造函数，只会返回undefined赋给用作实例的变量。

var person = new Person()使用new操作符，创建Person对象的实例，该实例继承自Person.prototype。另外一种方式是使用Object.create，例如：Object.create(Person.prototype)`。

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

var person = Person('John');
console.log(person); // undefined
console.log(person.name); // Uncaught TypeError: Cannot read property 'name' of undefined

var person = new Person('John');
console.log(person); // Person { name: "John" }
console.log(person.name); // "john"

参考​

• developer.mozilla.org/en-US/docs/...

1. function Person(){}：

在JavaScript中，function Person(){}是一个函数声明。这意味着它定义了一个名为 "Person" 的函数。不同于普通的函数，使用PascalCase（首字母大写）来命名函数通常是一种约定，表明该函数是一个构造函数，用于创建对象的实例。但需要注意的是，仅仅这个声明并不会创建任何对象实例，它只是一个函数定义。

这意味着，当你调用 Person() 时，它实际上是在执行函数而不是创建对象。通常情况下，构造函数不返回任何东西（即没有显式的 return 语句），因此该调用将返回 undefined。 示例：

function Person() {
  this.name = "John";
}

var person = Person();
console.log(person); // 输出：undefined

在上述示例中，Person() 被调用，但返回的是 undefined，而不是创建一个新的对象实例。这是因为没有使用 new 操作符来调用构造函数。

2. var person = Person()：

var person = Person() 是一种普通函数调用。在这种情况下，Person() 被视为一个普通的函数，而不是构造函数。这是因为没有使用 new 操作符来调用它。当函数 Person 被普通调用时，通常情况下它并不会返回一个明确的值，因此 var person 会被赋值为 undefined。

这种方式通常是一个常见的错误，特别是当意图是创建对象实例时。如果您的目标是创建对象实例，应该使用 new 操作符来调用构造函数。

示例：

function Person() {
  this.name = "John";
}

var person = Person(); // 没有使用new操作符
console.log(person); // 输出：undefined

3. var person = new Person()：

var person = new Person() 使用了 new 操作符来调用构造函数 Person。这是正确的方式来创建对象实例，它执行以下操作：

1. 创建一个新的空对象。
2. 将新对象绑定到构造函数的 this 上下文，使构造函数能够操作这个新对象。
3. 执行构造函数中的代码，以初始化新对象的属性和方法。
4. 返回这个新对象，使其可以分配给变量 var person，以便稍后访问和操作。

这意味着 var person 包含了一个新的对象实例，这个实例继承自构造函数 Person 的原型。您可以通过 person 访问和操作对象的属性和方法。

示例：

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

var person = new Person("John");
console.log(person); // 输出：Person { name: "John" }
console.log(person.name); // 输出：John

在上述示例中，var person = new Person("John") 创建了一个新的 Person 对象实例，并将其赋值给变量 person。这个实例包含一个名为 name 的属性，值为 "John"，您可以通过 person.name 访问该属性。这是使用构造函数正确创建对象实例的方式。

4. 区别的实际应用：

理解 function Person(){}、var person = Person() 和 var person = new Person() 之间的区别对于实际编程至关重要。以下是一些实际应用的示例，帮助阐释这些区别的重要性：

1. 使用构造函数创建对象实例：

• 当您需要创建多个相似的对象实例时，使用 new 操作符和构造函数是非常有用的。例如，您可以创建多个 Person 对象，每个对象都有自己的属性和方法。

2. 避免普通函数调用：

• 当您只希望执行函数而不创建对象实例时，使用 function Person(){} 或 var person = Person() 是合适的。但要小心不要混淆这些调用，以避免错误。

3. 共享方法和属性：

• 使用构造函数和原型链，您可以轻松地共享方法和属性。如果您将方法添加到构造函数的原型中，所有由该构造函数创建的对象都将共享相同的方法，从而减少内存占用。

4. 错误的影响：

• 使用错误的方式可能导致问题。例如，如果您错误地将构造函数用作普通函数调用，可能会遇到未定义的行为，因为构造函数通常不返回值。

结论：

在JavaScript中，正确的构造函数和对象创建方式对于编写高质量的代码至关重要。以下是关键要点：

1. 使用 new 操作符创建对象实例是最佳实践，每个实例都具有独立性和共享构造函数的原型属性和方法。
2. 避免将构造函数用作普通函数调用，这通常导致错误和不必要的行为。
3. 利用原型链实现属性和方法的共享，以降低内存开销，特别是在需要大量对象实例时。
4. 理解这些区别有助于避免常见错误，提高代码的可维护性和可读性。
5. 正确使用这些概念可以让您的代码更加清晰，易于理解，从而提高代码质量。

如果对原型继承感兴趣，[还可以阅读](突破前端开发面试（三）：探讨JavaScript中原型继承的神奇机制 - 掘金 (juejin.cn))