用易懂的方式理解JS中new关键字

今天来讲讲JS中的new关键字，在JS中通过定义构造函数，用new来创建新的实例对象。

在JS语言中，几乎一切的东西都是对象，对象的概念非常重要，比如我们也可以用new关键字的方式来创建布尔类型、数字类型、字符串类型的值，它们和对象一样。

const yes = new Boolean(true);
// 等价于
const yes = true;

const num = new Number(10);
// 等价于
const num = 10;

const str = new String('hello world');
// 等价于
const str = 'hello world';

工厂函数创建对象

function Car (brand, price) {
	let car = {}
  car.brand = brand;
  car.price = price;
  return car;
}

const bmw = Car('bmw', 300000);
const benz = Car('benz', 500000);

console.log(bmw, benz);
// {brand: 'bmw', price: 300000} {brand: 'benz', price: 500000}

通过Car函数我们来创建一个新的汽车对象。在函数内我们创建一个空的car对象，通过.的方式来增加属性，最后返回这个新对象。最后我们通过调用Car函数创建了两个新对象。可以看到输出两个对象。

构造函数创建对象

function Car (brand, price) {
	// let this = {}
  
  this.brand = brand;
  this.price = price;
  
  // return this;
}

当我们使用new关键字时，会隐性创建一个名为this的空对象，并在函数末尾默认返回。所以我们不需要在构造函数中指定其他对象。

function Car (brand, price) {
  this.brand = brand;
  this.price = price;
}

const bmw = new Car('bmw', 300000);
const benz = new Car('benz', 500000);

console.log(bmw, benz);
// Car {brand: 'bmw', price: 300000}
// Car {brand: 'benz', price: 500000}

这里我们使用new关键字来创建两个对象，和工厂函数创建的结果相同，在console结果中，对象的前面增加了Car字符，这是我们构造函数的函数名。

总结

通过使用new关键字，我们可以创建新的实例对象，通过定义自己的构造函数，来创建自己的实例对象。

使用new关键字，函数内部会创建一个新的名为this的空对象，然后我们将属性可挂载到this对象，函数默认return返回this对象。

觉得文章不错，欢迎关注公号（前端工程师的自我修养），每天更新一篇有用的内容。