JavaScript把new给拿捏住了-猿码集

1. 引言

JavaScript中的new操作符是类的实例化过程的重要组成部分。它几乎在JavaScript编程中处处可见。然而，由于其特殊的语言规则，new在某些情况下可能会变得很复杂，甚至会导致代码中的错误。本文将探讨new的一些问题，提供实用的技巧来确保正确而优雅地使用它。

2. 理解new的用法

在理解new之前，我们需要知道JavaScript中的类是如何声明的。JavaScript中的类中使用构造函数来定义它们的实例化过程。类的实例化是通过new操作符完成的。下面是一个示例：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
const person = new Person('Alice', 20);
console.log(person.name); // Output: 'Alice'

上面的Person类定义了一个constructor函数，用于创建一个人物对象。在我们的示例中，我们用new操作符实例化了一个Person对象，并将其保存在变量person中。之后，我们可以通过访问person对象上的name属性来检索人名。

2.1 使用new的基本用法

在JavaScript中，new操作符可用于以下几种方式：

一般函数调用

构造函数调用

匿名函数调用

对象方法调用

对于第一种用法，下面是一个示例：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const person = new Person('Alice', 20);
console.log(person.name); // Output: 'Alice'

在上面的示例中，我们定义了一个Person函数。我们使用this关键字将name和age属性绑定到调用对象上。然后我们通过使用new操作符实例化了一个Person对象，并将其保存在变量person中。在本例中，person.name的值为'Alice'。

2.2 构造函数调用

与普通函数不同，构造函数有一个特殊的属性prototype，它是一个对象，其中包含在使用构造函数创建的对象上的方法和属性。使用new操作符调用构造函数时，它将使用构造函数的prototype属性来创建新实例。下面是一个示例：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.greet = function() {
  console.log('Hi!');
};
const person = new Person('Alice', 20);
person.greet(); // Output: 'Hi!'

在上面的示例中，我们使用prototype添加了一个greet方法，它将输出“Hi！”。之后，我们实例化一个Person对象，并将其保存在person变量中。最后我们使用person.greet()调用greet方法。

2.3 匿名函数调用

在JavaScript中，我们可以使用匿名函数定义方法，方法的关键字this将与实际调用的对象无关。这就意味着无法通过将函数作为构造函数来使用这些方法。下面是一个示例：

const person = new function() {
  this.name = 'Alice';
  this.age = 20;
  this.greet = function() {
    console.log('Hi!');
  };
};
person.greet(); // Output: 'Hi!'

在上面的示例中，我们创建了一个使用new实例化的匿名函数，并将它们存储在名为person的变量中。之后，我们使用person.greet()调用greet方法。

2.4 对象方法调用

在JavaScript中，我们可以使用一个对象的方法来调用构造函数。这样的方法称为工厂函数。下面是一个示例：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.create = function(name, age) {
  return new Person(name, age);
};
const person = Person.create('Alice', 20);
console.log(person.name); // Output: 'Alice'

在上面的示例中，我们定义了一个create方法，并将其添加到Person类的对象上。 create方法将返回通过使用Person构造函数创建新对象的方法。然后，我们使用Person.create()方法创建一个对象。

3. new操作符潜在的问题

3.1 构造函数返回值问题

在JavaScript中，类构造函数中的return语句可能会导致意外的行为。如果返回值是一个对象，new将返回该对象，而不是新创建的对象。否则，新创建的对象将返回。下面是一个示例：

function Person(name, age) {
  this.name = name;
  this.age = age;
  return { foo: 'bar' };
}
const person = new Person('Alice', 20);
console.log(person.foo); // Output: 'bar'
console.log(person.name); // Output: undefined

在上面的示例中，当我们使用new对Person构造函数进行实例化时，它返回一个对象，即{ foo: 'bar' }。这就意味着我们在实例person中访问name属性时返回undefined。

3.2 忘记使用new操作符

如果我们忘记在调用构造函数时使用new操作符，则JavaScript将尝试将构造函数调用视为一个普通函数调用。这样的调用可能会导致混乱或错误的行为，即使它在编译时不会出错。下面是一个示例：

function Person(name, age) {
  this.name = name;
  this.age = age;
}
const person = Person('Alice', 20);
console.log(person); // Output: undefined
console.log(window.name); // Output: 'Alice'
console.log(window.age); // Output: 20

在上面的示例中，我们在Person构造函数上调用了一个调用。但是，我们忘记了使用new。这就意味着JavaScript强制执行该方法作为普通函数调用。此时Person的结果为undefined。当我们检查全局范围时，我们会在window属性中看到调用函数时使用的参数值。

4. 优化使用new

4.1 使用构造函数的继承

针对特定的情况，我们可以在构造函数中使用类继承来创造更精细的行为。使用继承的构造函数使JavaScript对象类代码更具可读性和可重用性。下面是一个示例：

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    console.log(this.name + ' makes a noise.');
  }
}
class Dog extends Animal {
  constructor(name) {
    super(name);
  }
  speak() {
    console.log(this.name + ' barks.');
  }
}
const dog = new Dog('Rex');
dog.speak(); // Output: 'Rex barks.'

在上面的示例中，我们定义了一个Animal类，它包含一个speak方法，输出叫声。然后，我们继承了Animal类，创建了一个新的Dog类，并定义了一个speak方法，该方法输出狗吠声。之后，我们实例化了一个Rex对象，并使用它的speak()方法。

5. 结论

new操作符是JavaScript编程中最为常见的操作符之一。在进行科学的设计和建模时，优雅的代码结构很重要。在使用JavaScript的类构造时，应尽可能使用继承。相反，应避免使用多余的关键字或代码。

JavaScript把new给拿捏住了