JavaScript Basics — Objects and Inheritance
By: John Au-Yeung
Tags: JavaScript, Web Development, Software Development, Technology, Programming

Photo by nicolas reymond 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 objects and inheritance.

Static Members

JavaScript classes can have static members.

They’re shared between all instances of a class.

We indicate that something is static with the static keyword.

For instance, we can write:

class Cat {

static type() {

return 'cat';

}

}

We have the static type method that we call with the class directly:

Cat.type()

Then we get 'cat' .

Also, we can write:

class Cat {}

Cat.type = 'cat';

to add a static property to a class.

Since properties can’t be inside a class, we’ve to attach it outside.

Inheritance

In JavaScript, we can create subclasses to inherit methods from a shared parent class while adding members unique to the subclass.

For instance, we can write:

class Cat {

speak() {

//...

}

} class NiceCat extends Cat {

fly() {

//...

}

}

We use the extends keyword to indicate that we’re inheriting members from the Cat class in our NiceCat subclass.

The speak method is available to both classes while the fly method is only available in the NiceCat class.

To call the constructor and methods of the parent class, we can use the super keyword.

For instance, we can call the parent constructor by writing:

class Cat {

constructor(name) {

this.name = name;

} speak() {

//...

}

} class NiceCat extends Cat {

constructor(name, color) {

super(name);

this.color = color;

} fly() {

//...

}

}

The NiceCat has the super keyword to call the Cat constructor with the name parameter.

It must come before anything that modifies the current class.

So we have the super call before setting the color property.

To call a parent class’s methods, we also use the super keyword.

For instance, we can use it as follows:

class Cat {

constructor(name) {

this.name = name;

} speak(words) {

return words;

}

} class NiceCat extends Cat {

constructor(name, color) {

super(name);

this.color = color;

} fly() {

//...

} niceSpeak(words) {

return `nice cat says ${super.speak(words)}`

}

}

We added the niceSpeak method which calls Cat ‘s speak method by using super.speak .

instanceof

We can use the instanceof operator to find out whether an object we derived from a specific class.

The left operand is the object we want to check and the right operand is the class or constructor.

For instance, we can write:

console.log(new NiceCat('joe', 'brown') instanceof Cat);

Then we would get true since it’s an instance of Cat .

Likewise, if we write:

console.log(new NiceCat('joe', 'brown') instanceof NiceCat);

We would also get true logged.

Photo by TOMOKO UJI on Unsplash

Conclusion

Classes can have static members.

We can use the static keyword to indicate static methods.

If we want static properties, we can attach it directly to the class.

We can use the extends keyword to create a subclass of a class.

The instanceof operator is useful for checking if an object is an instance of a constructor.

JavaScript In Plain English

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