자바스크립트의 상속

When it comes to inheritance, JavaScript only has one construct: objects. Each object has a private property which holds a link to another object called its prototype. That object also has a prototype on its own, and that object also and the next one and so on, until an object is reached with NULL as its prototype. By definition, null has no prototype , so it is the final link in this prototype chain.

As we can see now the prototype chain, inheritance in JavaScript is achieved with a chain of prototypes. There are different approaches on creating prototype chains. They have evolved over time as the languages updates and new features and syntax are added. Nearly all objects in JavaScript are instances of Object which sits on the top of a prototype chain.

The prototypal inheritance model itself is more powerful than the classic model. For example, it is fairly simple to build a classic model on top of a prototypal model.

There are three common ways to create a prototype chain:

• functional
• constructor functions
• class-syntax constructors

This article will cover the functional approach on creating prototype chains.

The functional approach to creating prototype chains is to use Object.create . Let's have a look at an example. For the example code, we will use the animal and dog taxonomy, where animal is a prototype of dog.

const animal = {
  eat: function() {
    console.log(this.name + ' eats');
  },
};

const dog = Object.create(animal, {
  bark: {
    value: function() {
      console.log(this.name + ' woofs');
    },
  },
});

const henry = Object.create(dog, {
  name: { value: 'Henry' },
});

henry.bark();
henry.eat();

The animal is a plain JavaScript object, created with the object literal syntax, and the prototype is Object.prototype, as for every plain JavaScript object. The Object.create function takes two arguments. First one is the desired prototype of the object being created, and the second one is the properties you want to add or the Properties Descriptor Object , it's optional.

So, when dog is instantiated, the first argument is the animal object. So animal is the prototype of dog. When henry is instantiated the first argument is dog passed to Object.create is dog. So the full prototype chain ist:

• the prototype of henry is dog
• the prototype of dog is animal
• the prototype of animal is Object.prototype.

The Property Descriptor is a JavaScript object that describes the characteristics of the properties on another object, and contains keys that will become the key name on the object being created.

• Inheritance in JavaScript is achieved with a chain of prototypes
• There are three common ways to create a prototype chain (functional, constructor functions, class-syntax constructors)

Thanks for reading and if you have any questions , use the comment function or send me a message .