How does prototypal inheritance work in JavaScript?

If a class is just syntactic sugar over prototypes, how am I supposed to skim it?

For example, this is a good article on the subject. Therefore, if you created an object Animal

with class

:

class AnimalES6 {
    constructor(name) {
        this.name = name;
    }

    doSomething() {
        console.log("I'm a " + this.name);
    }
}

var lionES6 = new AnimalES6("Lion");
lionES6.doSomething();

      

        
        
        
      

    

The prototype version will look something like this:

var Animal = (function () {
    function Animal(name) {
        this.name = name;
    }
    // Methods
    Animal.prototype.doSomething = function () {
        console.log("I'm a " + this.name);
    };
    return Animal;
})();

var lion = new Animal("Lion");
lion.doSomething();

      

        
        
        
      

    

This is further complicated with a function extend

(like TypeScript inheritance modeling):

var __extends = this.__extends || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    __.prototype = b.prototype;
    d.prototype = new __();
};

      

        
        
        
      

    

Can you show me different approaches for creating React elements with classes and prototypes (i.e. no class and React.createClass)?

This question has already been asked SO questions, for example. this one .

But still, in my opinion, the real question is: do you want?

Since you linked Eric Elliot's article, you probably noticed that there is some sort of controversy in the javascript world around EC6 class

es. Apart from the examples you gave, there are several generalizations of opinions from more developers, for example. this is the github repo , here and more. There are also articles defending the purpose class

...

Anyway, the makers of React seem to have embraced class

es's "anger" , and as you pointed out, you will run into problems when trying to use the prototypical approach with React. So, in my opinion: why fight it? I also like the prototypal nature of JavaScript and I also like the ReactJS framework, but in my opinion it would be better to come up with some new framework that combines the best of both, something like "Protypal React" rather than trying provide prototyping for React, if it is not intended for such use.

But isn't a class mostly about inheritance?

This was probably answered in the comments, but no. Classes have their advantages as they have a design concept Composition

over inheritance. It depends on the needs , but many frameworks / libraries are built in object oriented languages ​​that use a class that covers composition over inheritance, for example. Unity.

Really good question anyway, and I wanted to share my thoughts on the matter. Hope this helps you form an opinion.

I think it is important to break things down easily to understand. You are asking about prototypal inheritance in JavaScript, and then how this relates to React. First of all, I must say that the prototype is not easy to explain and is not documented, but it allows you to focus on one thing at a time. So yes, JavaScript has no concept of object inheritance, but prototypal inheritance instead. Lets you create a function on cars:

function Car() {

}

      

        
        
        
      

    

Then we can make Toyota inherit Car

. So let's see what a constructor function looks like when using classes.

function Car(options) {
  this.title = options.title;
}

      

        
        
        
      

    

Therefore, everyone Car

should have options

transmitted to him, and it options

has title

.

Now we can create a new car and pass an options

object to it title

like this:

const car = new Car({ title: 'Focus' });
car;

      

        
        
        
      

    

Now let's add a method to this class Car

, so we add this method to the constructor prototype object like this:

Car.prototype.drive = function() {
  return 'vroom!';
}

      

        
        
        
      

    

Now when we call car.drive();

we get the result vroom!

,

So this is basic object creation with JavaScript. We create a constructor object, then use a new

keyword on it, and then we can add methods to the object, but add it to the prototype property of the constructor:

constructorFunction.prototype.methodWeAdd = function() {
  return something;
};

      

        
        
        
      

    

Now I will add an object that inherits from Car

to set the prototype link.

So I will make Toyota and I want it to inherit this object Car

like so:

function Toyota(options) {

}

      

        
        
        
      

    

So I passed an object options

as an argument that contains the color

car.

function Toyota(options) {
  this.color = options.color;
}

const toyota = new Toyota({ color: 'grey', title: 'Prius' });
console.log(toyota);

      

        
        
        
      

    

So I want Toyota to inherit all properties and methods Car

because toyota

- this Car

. So how do I create a link between the two? How can I delegate toyota

to be able to call all the methods it has Car

?

So whenever I call a Toyota

constructor, I want me to trigger any initialization that happens in Car

and also like this:

function Toyota(options) {
  Car.call(this.options);
  this.color = options.color;
}

      

        
        
        
      

    

I also want to make sure I can name the drive method Car

on the object Toyota

like this:

Toyota.prototype = Object.create(Car.prototype);
Toyota.prototype.constructor = Toyota;

      

        
        
        
      

    

Now I should be able to add a method to the prototype Toyota

like:

Toyota.prototype.honk = function() {
  return 'beep beep!';
};

      

        
        
        
      

    

Now I can call the following:

const toyota = new Toyota({ color: 'grey', title: 'Prius' });
console.log(toyota);
console.log(toyota.drive());
console.log(toyota.honk());

      

        
        
        
      

    

Therefore, it toyota

must inherit some level of customization that comes from Car

. So the aforementioned painful process that I just tried is to tell you, this is how you disabilize it in plain vanilla JavaScript. Not sure why you would like to, but here it is.

So the above is about how prototypal inheritance is done in JavaScript.

The idea behind classes is not only syntactic sugar, but also to remove such a painstaking process from our workload so that we can focus on other application development issues.

When you look at new developments like ES6, yes, some of them fall under syntactic sugar, but the idea is to remove or allow a painstaking process from a day to day task like creating classes or accessing properties / methods from an object. such as destruction.

In practice, the JavaScript community has included the use of classes, you will see a ton of libraries using classes, whereas template strings and destructuring were nice additions, classes have dramatically changed the way JavaScript is written.

Much because of how it was difficult to write a prototype-based inheritance, while his classes much easier to use class

and extend

keywords.

When React first came out, the idea of ​​using prototypal inheritance all over the place to create a component was considered ridiculous just because you have to make so many customizations (as you saw above) whenever you create a subclass that inherits from another object. Instead, we'll use a helper to create the component createClass

. This is part of React, but I want to show you an example of where some existing library has been ported to classes.

So it was that with React we had this helper called createClass:

React.createClass({

});

      

        
        
        
      

    

And you will pass in an object, and it might have a method like this:

React.createClass({
   doSomething() {

   },

   doSomethingElse() {

    }
});

      

        
        
        
      

    

It wasn't the worst in the world, but it definitely made it really hard when you wanted to subclass a component or create a component with some behaviors and reuse it somewhere else. These days React has moved to using class syntax like:

class MyComponent extends Component {
    doSomething() {

    }

    doSomethingElse() {

    }
}

      

        
        
        
      

    

The advantage of this approach is that if I want to make some kind of generic, very reusable component to be used somewhere else in my codebase, I can make it much easier with a class based approach instead of using syntax createClass()

and is certainly much simpler than the prototype inheritance syntax method.

You will also notice that the inheritance chain is much more obvious. Thus, this Component keyword is a generic component provided by the React library.

Anyone who looks into this class can see that it is creating a component and borrowing functionality from Component

.

The advantage of this is that if you are a fan of object oriented programming and are working with React, the class syntax is generally easier to work with than the old syntax createClass()

.

Prototype inheritance is when you put a method in the original constructor

function Cat(name,breed){
   this.name = name;
   this.breed = breed;
}

      

        
        
        
      

    

This will be inherited from the rest

const susie = new Cat('Susie', 'Persian');

      

        
        
        
      

    

If I create a new array, const names = ['Gilbert','Mia']

I just created a new array, but now names.join()

is a method names.pop)()

is a method.

We have all of these methods on top of the names. Where did they come from? Well we have the mother of Array

capital A

If you look inside it, you will find out that Array

there are many prototype methods,

which means that when you create Cat

const susie = new Cat('Susie', 'Persian');

      

        
        
        
      

    

from solid mother or from Cat

mother

function Cat(name,breed){
   this.name = name;
   this.breed = breed;
}

      

        
        
        
      

    

every instance of this inherits these methods.

function Cat(name,breed){
   this.name = name;
   this.breed = breed;
}
Cat.prototype.meow = function() {
   Console.log('Meow meow! My name is ${this.name}');
}

const susie = new Cat('Susie', 'Persian');
const mimi = new Cat('Mimi', 'Persian');
      

        
        
        
      

    

Now you can see that the prototype is Cat.prototype.meow

now inherited by every cat instance.

const susie = new Cat('Susie', 'Persian');
const mimi = new Cat('Mimi', 'Persian');

      

        
        
        
      

    

susie.meow();

→ Meow meow! My name is Susie mimi.meow();

→ Meow meow! My name is mimi