JavaScript Basics — Prototypes. JavaScript uses the prototypical…
By: John Au-Yeung
Tags: Programming, Technology, JavaScript, Software Development, Web Development

Photo by Ivan Jevtic on Unsplash

JavaScript is one of the most popular programming languages in the world. To use it effectively, we’ve to know about the basics of it.

In this article, we’ll look at JavaScript prototypes.

Prototypes

Prototypes are objects that other objects inherit from.

It’s the way that inheritance is done in JavaScript.

For instance, if we create an empty object:

const empty = {};

We can call the toString method on it.

We can write:

console.log(empty.toString());

If we call that, we get [object Object] logged in the console log.

Even though our object has nothing defined, they still have inherited properties.

The toString method is from the Object.prototype property, which lost objects inherit from by default.

If a property isn’t in the object itself, then the JavaScript interpreter will search its prototypes for the property.

We can use the getPrototypeOf method to get an object’s prototype.

For instance, we can write:

console.log(Object.getPrototypeOf(empty));

And we get an object with a bunch of functions logged.

If we log the empty object, we can see the __proto__ property with the same thing.

Many objects don’t inherit directly from Object.prototype .

For instance, functions inherit from Function.prototype , which inherits from Object.prototype .

And arrays inherit from Array.prototype which inherits from Object.prototype .

Object.create

We can use Object.create to create an object with the prototype we pass into the method.

For instance, we can write:

const protoDog = {

speak(words) {

console.log(words);

}

} const dog = Object.create(protoDog);

Then we see that when we log the value of dog , we see the __proto__ property with the speak method, which is what we have in protoDog .

Classes

Classes in JavaScript are nothing more than syntactic sugar on top of its prototypical inheritance model.

A class defines the shape of a type of object by listing its methods and properties.

An object created from a class is called the instance of a class.

To create an instance of a given class, we’ve to make an object that derives from the proper prototype.

Classes are just constructor functions with better syntax.

We can define constructor functions to return an object as fikkiwsL

function Dog(name) {

this.name = name;

} Dog.prototype.speak = function(words) {

console.log(`${this.name} says '${words}'`);

};

We have the Dog constructor with the speak method in its prototype.

Then we can create a Dog instance by writing:

const dog = new Dog('james');

dog.speak('hello');

All functions automatically get a property named prototype , which we can put instance methods into.

Names of constructors are capitalized so that they can be distinguished from other functions.

If we check the prototype, we get that:

console.log(Object.getPrototypeOf(dog) === Dog.prototype);

logs true .

Better Syntax

To make our lives easier, we can use the class syntax to rewrite our Dog constructor.

For instance, we can write:

class Dog {

constructor(name) {

this.name = name;

} speak(words) {

console.log(`${this.name} says ${words}`);

}

}

A class starts with the class keyword.

Then we have the constructor to replace the constructor function body.

The speak method is now inside the class instead of adding it to the prototype property.

Class declarations only allow methods to be added to the prototype.

Classes can be used in statements and expressions since they’re just constructor functions.

So we can write something like:

const obj = new class {

hello() {

return "hello";

}

};

We created a class expression that’s used immediately with the new keyword.

Then we can call obj.hello by writing:

console.log(obj.hello());

Photo by Maarten Deckers on Unsplash

Overriding Inherited Properties

We can override inherited properties by using the extends keyword.

For instance, we can create a subclass from a class by writing:

class Dog {

constructor(name) {

this.name = name;

}

speak(words) {

console.log(`${this.name} says ${words}`);

}

} class GoodDog extends Dog {

speak(words) {

console.log(`good dog ${this.name} says ${words}`);

}

}

We created a GoodDog class that is a subclass of Dog .

The extends keyword indicates that we inherit all the properties from Dog ’s prototype.

Conclusion

JavaScript uses prototypal inheritance.

We inherit properties that are from an object’s prototype.

Most objects have Object.prototype as its base prototype.

To create objects with a fixed set of members, we can use constructor functions.

To make creating constructors easier, we can use the class syntax.

JavaScript In Plain English

Enjoyed this article? If so, get more similar content by subscribing to our YouTube channel!