16 – JavaScript 中的 new 关键字

原文：https://dev.to/bhagatparwinder/the-new-keyword-in-javascript-45jb

我们之前已经讲过了 JavaScript 中一切皆对象，但对于了解如何创建新对象或者对象的实例也是需要的。

在 JavaScipt 中你可能会通过以下两种方法创建对象：

const myObject = {
    name: "Parwinder",
    age: 33
};

console.log(myObject); // { name: 'Parwinder', age: 33 }

上面就是对象字面量形式。

const myDate = new Date("06/01/2020");
console.log(myDate); // Mon Jun 01 2020 00:00:00 GMT-0500 (Central Daylight Time)

第二个则是使用 new 关键字，这两种方法都是创建了对象的新实例。new 关键字可以作用于任何有 constructor 的对象。

相同的对象初始化或对象字面量形式也会创建不同的对象，就像是通过 new Object() 创建的一样。

创建自定义类型的对象

上面的日期例子，通过 new 创建了一个新的日期对象，同样 new 也允许创建任何自定义类型的实例。

function Car(make, model, year) {
    this.make = make;
    this.model = model;
    this.year = year;
}

const myCar = new Car("BMW", "X5", 2015);
const igorCar = new Car("Tesla", "Model S", 2020);
const laurenCar = new Car("Ford", "Escape", 2015);

console.log(myCar); // Car { make: 'BMW', model: 'X5', year: 2015 }
console.log(igorCar); // Car { make: 'Tesla', model: 'Model S', year: 2020 }
console.log(laurenCar); // Car { make: 'Ford', model: 'Escape', year: 2015 }

console.log(typeof myCar); // object
console.log(myCar instanceof Car); // true

通过唯一的 make 、model 和 year 创建了三个新的独立的实例。因为是对象所以 typeof 都会输出 ‘object’。当你进行 instanceOf 测试时也会返回 true。Car 对象就像是 myCar 、igorCar、laurenCar 的蓝图或是母体。

当使用 new 关键字时，到底发生了什么？

像上面的例子，Car 叫做构造函数，通过我们定义的属性来构造对象。

当我们使用 new 关键字时，会经历下面四步：

1. 创建一个空对象；
2. 设置空对象的 prototype 属性为构造函数的 prototype 属性；
3. 把设置到 this 上的属性和方法都绑定到空对象上；
4. 返回新创建的对象；

MDN 对 new 的步骤说明。

了解 new 关键字为何如此重要？

在 JavaScript 中 new 、classes 、objects、this、prototype 是面向对象编程的基础。你可能会听过 OOP或函数式编程，它俩没有好坏之分只是两种不同的编码准则。知道这些原则会让你明白两种不同风格的代码是如何工作的以及各自的优势和劣势。