Introduction
Class members are the attributes/fields/properties and methods of a class.
What is a Class Member?
A class member is a variable or a function that is defined inside a class.
Class Members Types
There are 3 types of class members:
- Instance Members
- Static Members
- Abstract Members
Instance Members
Instance members are the attributes/fields/properties and methods of a class that are defined inside the class body.
Class properties
Class properties also called fields
and attributes
are the variables that are defined inside a class.
Let's see an example in JS:
class Human {
name = 'Hasan';
age = 33;
}
Here we have a class called Human
that has 2 properties, name
and age
.
Class methods
Class methods are the functions that are defined inside a class.
So basically any function inside a class is called a method
.
Let's see an example in JS:
class Human {
name = 'Hasan';
age = 33;
sayHello() {
console.log('Hello');
}
}
The this
keyword
OK now we saw the instance members
, but how can we access these members?
We can access the instance members using the this
keyword, it is referred to the created objects of class.
Let's see an example in JS:
class Human {
name = 'Hasan';
age = 33;
sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
}
const human = new Human();
console.log(human.sayHello()); // Hello, my name is Hasan
As we can see in the example above, we can access the name
property using the this
keyword.
It can be also used to access the methods
:
class Human {
name = 'Hasan';
age = 33;
getMyInfo() {
return `My name is ${this.name}, I'm ${this.age} years old, i was born in ${this.getBirthYear()}`;
}
getBirthDate() {
const currentYear = new Date().getFullYear();
return currentYear - this.age;
}
}
const me = new Human();
console.log(me.getMyInfo()); // My name is Hasan, I'm 33 years old, i was born in 1988
We here used the this
keyword to access the getBirthYear
method.
Static Members
Static members are the properties and methods of a class that are defined inside the class body using the static
keyword.
They are prefixed with static
keyword, and they are accessed using the class name.
The major difference between static
members and instance
members is that static
are called from the class itself, which means they are related to the type of the thing not the thing itself (The object i mean).
Let's see an example in JS:
class GoogleEmployee {
static company = 'Google';
static getCompany() {
return Employee.company;
}
}
console.log(Employee.company); // Google
In our previous example, we defined class called GoogleEmployee
that has 2 static members, company
and getCompany
method.
Why we have the company
as static property? because regardless of who is that employee is (The object created of the class), the company is always the same, so it is related to the type of the thing not the thing itself.
Let's see another example:
class Fruit {
static grownAs = 'Tree';
}
console.log(Fruit.grownAs); // Tree
As fruits only grow in trees, we don't have to create the grownAs
property to by instance member, as all fruits are the same (as far as i know), so how it grows it is related to the type of the thing (The Fruit class).
Returning back to what we were talking about, static members can be access from the class itself:
Difference between static and instance members
Static Members | Instance Members |
---|---|
They are accessed using the class name | They are accessed using the this keyword |
They are related to the type of the thing | They are related to the thing itself |
They are called from the class itself | They are called from the object created of the class |
They are prefixed with static keyword |
They are not prefixed with static keyword |
Can not call non static members from static members | Can call static members from non static members |
Calling static members from instance members
We can call static members from instance members using the ClassName
followed with .
, then the static member name.
class Human {
static company = 'Google';
getCompany() {
return Human.company;
}
}
There is another way to access static members from instance members, and that is using the this
keyword and constructor
class Human {
static company = 'Google';
getCompany() {
return this.constructor.company;
}
}
Accessing static members in static methods using this
We can access static members in static methods using the this
keyword.
class Human {
static company = 'Google';
static getCompany() {
return this.company;
}
}
So we can conclude when to use this
keywords in the following table for static and instance members:
Static Members | Instance Members |
---|---|
Can access static members using this keyword |
Can not access static members using this keyword |
Can access static members using Class Name
|
Can access static members using Class Name
|
N/a |
Can access static members using this.constructor followed by . then the static member name |
Can not access instance members using this keyword |
Can access instance members using this keyword |
Abstract Members
We are not going to say much about this as it's not implemented in in Javascript, but fortunately it can be implemented in Typescript
.
Abstract members are the members that are defined inside the class body using the abstract
keyword.
They can be defined only in abstract classes
.
They are implemented by the concrete classes
(Child classes) that inherit from the abstract class
.
When to use them?
When we have a class that has some members that are not implemented, and we want to force the child classes to implement them.
A real world example is the Animal
class, as each animal has its own voice
so we'll make the voice
method as abstract so the child class (An actual animal) will implement that voice method.
Let's see a pseudo code example:
abstract class Animal {
abstract voice(): void;
}
class Dog extends Animal {
voice() {
console.log('Woof');
}
}
That how abstract members work.
π¨ Conclusion
In this article we learned about the class
keyword, instance members
, static members
, abstract members
, and the this
keyword and when to use this
in either static or instance members.
Instance members are also called
non static members
.
ββ¨οΈ Buy me a Coffee β¨οΈβ
If you enjoy my articles and see it useful to you, you may buy me a coffee, it will help me to keep going and keep creating more content.
π Join our community
Join our community on Discord to get help and support.
π Bonus Content π
You may have a look at these articles, it will definitely boost your knowledge and productivity.
General Topics
- Event Driven Architecture: A Practical Guide in Javascript
- Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript
- After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL
Packages & Libraries
- Collections: Your ultimate Javascript Arrays Manager
- Supportive Is: an elegant utility to check types of values in JavaScript
- Localization: An agnostic i18n package to manage localization in your project
React Js Packages
Courses (Articles)
Top comments (0)