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

201 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

今天来讲讲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对象。

觉得文章不错,欢迎关注公号(点击关注),每天更新一篇有用的内容。