javascript中的构造函数和原型简介

This blog provides a brief walk through on constructor functions and prototypes in JavaScript.

该博客简要介绍了JavaScript中的构造函数和原型。

Constructor functions are functions in JavaScript that are used to create object instances that share similar properties or functions. For example, suppose we want to create a database or list of apartment buildings that includes descriptive details of each building. This could be achieved by manually creating each apartment building object separately…

构造函数是JavaScript中的函数，用于创建共享相似属性或函数的对象实例。 例如，假设我们要创建一个数据库或公寓建筑物列表，其中包括每个建筑物的描述性详细信息。 这可以通过分别手动创建每个公寓建筑对象来实现...

const building1 = {
   units: 100,
   date_opened: 2010,
   gym: false
}const building2 = {
   units: 20,
   date_opened: 2020,
   gym: true
}const building3 = {
   units: 50,
   date_opened: 2002,
   gym: false
}

This creation process isn’t terribly time consuming when making just a few buildings, but it can be streamlined with a constructor function that would save significant time if the process needs to be scaled.

仅创建几座建筑物时，此创建过程并不十分耗时，但是可以使用构造函数简化该过程，如果需要扩展该过程，则可以节省大量时间。

Constructor functions are created like regular functions except the first letter is capitalized. Inside of the constructor function you can define the properties that you want each object instance to inherit…

构造函数的功能类似于常规函数，只是首字母大写。 在构造函数中，您可以定义希望每个对象实例继承的属性。

function Building(units, date_opened, gym) {
   this.units = units,
   this.date_opened = date_opened,
   this.gym = gym
}const building1 = new Building(100, 2010, false)
const building2 = new Building(20, 2020, true)
const building3 = new Building(50, 2002, false)

In addition to properties, functions can also be inherited by each object instance. This can be achieved one of two ways: in the constructor function itself or on the Object prototype.

除了属性之外，每个对象实例还可以继承函数。 这可以通过以下两种方式之一实现：在构造函数本身或在对象原型上。

Here is an example of adding the function to via the constructor…

这是通过构造函数添加函数的示例……

function Building(units, date_opened, gym) {
   this.units = units,
   this.date_opened = date_opened,
   this.gym = gym
   this.welcomeTenant = function() {
       return "Thank you for leasing with us!"
   }} building1.welcomeTenant // "Thank you for leasing with us!"

While this method is perfectly cogent, it is less preferable due to memory bloat since every new Building instance will include the function.

尽管此方法完全有效，但由于内存膨胀，它不太可取，因为每个新的Building实例都将包含该函数。

The preferred style of adding shared functions among object instances is adding the function to the Object prototype.

在对象实例之间添加共享功能的首选样式是将功能添加到对象原型。

Building.prototype.welcomeTenant = function() {
   return "Thank you for leasing with us!"
}

Adding the function to the Object prototype will require allocating just one space in memory for the function, but it will still be accessible to each object instance.

将函数添加到Object原型将只需要在函数中分配一个内存空间，但是每个对象实例仍然可以访问该空间。

building2.welcomeTenant // "Thank you for leasing with us!"

I hope this walk through of constructor functions and prototypes has been helpful. Happy coding!

我希望构造函数和原型的遍历对您有所帮助。 编码愉快！

翻译自: https://medium.com/javascript-in-plain-english/an-intro-to-constructor-functions-and-prototypes-in-javascript-be9f40ba2ca9