15

Background

I am a developer with a background history of approximately 9 years in both Java and C#.

In those languages, Classes and taxonomic classification and inherent to the object paradigm.

And so, when ECMA6 came out, I was very happy to see classes in the language... and I started using them everywhere.

Problem

Turns out that using classes in JavaScript is a trap.

If you use them, you will go to your grave never knowing how miserable you are.

And you will never really understand JavaScript. You will think you do, but you don't.

Questions

So clearly, after watching this full conference, I realized I don't know JavaScript.

All my life I have been formatted with the OOP with classes paradigm, and now I don't even know where to look for help, or even to get started.

  1. In JavaScript style, how would you go about representing the Animal kingdom, with inheritance? I would use a class Animal, and then a Class Dog, and instantiate objects of dogs, for example. This is not the JavaScript way.

An example of non-JavaScvript:

class Animal{
    constructor(aName){
        this.name = aName;
    }
}

class Dog extends Animal{
    constructor(){
        super(aName);
        this.type = "Furry dog";
    }
}

let myDog = new Dog("Boby");
  1. What is the JavaScript way of doing this?

At this point, I am looking for guidance. After trying I was unable to find anything helpful, mainly because I believe I am so lost that I am not even searching for the right thing.

Thanks in advance.

Improve this question
18
  • 5
    There are very strong voices on both sides of the spectrum. OOP is fine in JavaScript for many use cases, but it is nice to get to know the underlying prototype system. I like Eric Elliot's blog posts on the matter. Commented Feb 3, 2017 at 8:31
  • 1
    There's plenty of discussions and help regarding OO Javascript, but it's so different from the enforced discipline of Java or C# (I'm a C# developer) that it's almost like it doesn't really exist. As already mentioned, prototyping is useful to understand and that will give you many of the features you're familiar with from inheritance. Just don't expect too much abstraction. Commented Feb 3, 2017 at 8:33
  • 1
    @Rajesh He's asking for discussion - not a recommendation of a solution (a library, 3rd party solution etc.). This is well within the realms of a SO question. Commented Feb 3, 2017 at 8:34
  • 2
    @Rajesh It would have been more productive to explain why it shouldn't be getting close votes then :) Commented Feb 3, 2017 at 8:37
  • 3
    Recommended free (as in beer) reading: Exploring ES6 by @AxelRauschmayer and You Don't Know JS series. Commented Feb 3, 2017 at 9:31

1 Answer 1

Reset to default
17

As far as I know, JavaScript is a Prototype based language with First-class functions, as you can read here.

Now. Actually this is just a style of OPP which means you will be working and thinking about objects and inheritance. You just have to know that, in JavaScript, there are no classes but we have prototypes instead. But remember. It's all about the functions.

Object constructors

To make your own object definition, you would do as follows:

function Animal() {
    this.name = null;
    this.age = 0;
    this.genus = null;
    this.isWild = true;
};

Animal.prototype.hasName = function() {
    return this.name !== null;
};

Animal.prototype.isItWild = function() {
    return this.isWild;
};

// Here we create an instance of Animal
var someAnimal = new Animal();
// Let's give it a name
someAnimal.name = 'Dobby';
console.log('Hey there. My pet name is %s', someAnimal.name);
console.log('is it wild? %o', someAnimal.isWild);

Now you have your Animal prototype. Let's see how to extend its properties to create the Dog prototype:

function Dog() {
    this.genus = 'Canis';
    this.race = 'unknown';
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
    console.log('rrouff!');
};

Let's create a race of dog now:

function SiberianHusky(name, age) {
    this.name = name;
    this.age = age;
    this.race = 'Siberian Husky';
}

SiberianHusky.prototype = Object.create(Dog.prototype);
SiberianHusky.prototype.constructor = SiberianHusky;

// Let's create our Siberian Husky
var myPet = new SiberianHusky('Bobby', 5);
// Aww. It is barking!
myPet.bark();

The prototype object

You can see in the examples that every definition is using the Object prototype. That is used to define how an object is. You can think of it as the class definition.

How to avoid the over-use of the prototype property

Instead of writing to the prototype every time, you can do the following:

Animal.prototype = {
    name: null,
    age: 0,
    genus: null,
    isWild: true,
    hasName: function() { ... }
    isItWild: function() { ... }
}

To fully understand the concept of prototypes and how they inherit from each other, you can check this.

Last notes

JavaScript is a multi-paradigm language. You can use the Object Oriented Programming Paradigm, the Imperative Programming Paradigm and the Functional Programming Paradigm, wich means that you can program the same application in a lot of different ways.

Some helpful links

https://en.wikipedia.org/wiki/JavaScript

https://en.wikipedia.org/wiki/Prototype-based_programming

Cheers.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

This is only one way to work with prototypes. Using object constructors is not at all necessary, and neither is the .prototype property.
I just shared my poor knowledge trying to help. If you can do it better, I encourage you to post an answer instead of a comment. Thanks for the input though.
You had Classes in Js since 2015

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.