MOCKSTACKS
EN
Questions And Answers

More Tutorials









Javascript Classes

The fundamental part of most classes is its constructor, which sets up each instance's initial state and handles any parameters that were passed when calling new.
It's defined in a class block as though you're defining a method named constructor, though it's actually handled as a special case.


class MyClass {
 constructor(option) {
 console.log(`Creating instance using ${option} option.`);
 this.option = option;
 }
}

const foo = new MyClass('speedy');

Output

"Creating instance using speedy option"

A small thing to note is that a class constructor cannot be made static via the static keyword, as described below
for other methods.


Class Inheritance

Inheritance works just like it does in other object-oriented languages: methods defined on the superclass are accessible in the extending subclass.

If the subclass declares its own constructor then it must invoke the parents constructor via super() before it can
access this.


class SuperClass {
 constructor() {
 this.logger = console.log;
 }
 log() {
 this.logger(`Hello ${this.name}`);
 }
}
class SubClass extends SuperClass {
 constructor() {
 super();
 this.name = 'subclass';
 }
}
const subClass = new SubClass();
subClass.log();

Output

"Hello subclass"

Static Methods

Static methods and properties are defined on the class/constructor itself, not on instance objects. These are specified
in a class definition by using the static keyword.


class MyClass {
 static myStaticMethod() {
 return 'Hello';
 }
 static get myStaticProperty() {
 return 'Goodbye';
 }
}
console.log(MyClass.myStaticMethod()); 
console.log(MyClass.myStaticProperty); 

Output

"Hello"
"Goodbye"

We can see that static properties are not defined on object instances:


const myClassInstance = new MyClass();
console.log(myClassInstance.myStaticProperty);

Output

undefined

However, they are defined on subclasses:


class MySubClass extends MyClass {};
console.log(MySubClass.myStaticMethod()); 
console.log(MySubClass.myStaticProperty); 

Output

"Hello"
"Goodbye"

Methods

Methods can be defined in classes to perform a function and optionally return a result.
They can receive arguments from the caller.


class Something {
 constructor(data) {
 this.data = data
 }
 doSomething(text) {
 return {
 data: this.data,
 text
 }
 }
}
var s = new Something({})
s.doSomething("hi")

Output

{ data: {}, text: "hi" }


Conclusion

In this page (written and validated by ) you learned about Javascript Classes . What's Next? If you are interested in completing Javascript tutorial, your next topic will be learning about: Javascript Namespacing.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.