A Javascript Static Method is specified using the static keyword in a class. Such a method differs somewhat from a standard JavaScript method. The static function differs in that it is not accessible by any of the class’s instantiated objects. Rather, the static function can only be accessible by using the class name because it is directly related to the class.
It is necessary to understand the syntax of a static method before learning how to invoke it.
Syntax
To define a JavaScript Static Method, place the static keyword before the method definition.
Assume we have a JavaScript function sendMessage defined within the class Chat:
class Chat {
sendMessage() {
return "We are one!";
}
}Now we want to make the aforementioned sendMessage method a static method. The class is then rewritten as follows:
class Chat {
static sendMessage() {
return "We are one!";
}
}
Invoking One Static Method
- The code for invoking one static method is as follows. The JavaScript code is stored in the script section of the code.
<!DOCTYPE html>
<html>
<body>
<script>
class HubToLearn {
// static keyword is employed
// even before the function name
static example1() {
// return the string -->
// static method 1
return "static method 1"
}
}
// Calls static function
// using className.functionName
document.writeln(
HubToLearn.example1());
</script>
</body>
</html>
Invoking More Than One (1) Static Method
- The code below shows how to call more than one (1) static method.
<!DOCTYPE html>
<html>
<body>
<script>
class HubToLearn {
// static keyword is employed
// even before the function name
static example1() {
// return the string -->
// static method 1
return "static method 1"
}
// Another static method
// with a different name
static example2() {
// return the string -->
// static method 2
return "static method 2"
}
}
// Calls the static function using
// className.functionName
document.writeln(HubToLearn.example1() + "<br>");
document.writeln(HubToLearn.example2());
</script>
</body>
</html>
Invoking Many Static Methods with The Same Names
- This illustration invokes many static methods with identical names.
<!DOCTYPE html>
<html>
<body>
<script>
class HubToLearn {
// static keyword is employed
// even before the function name
static example1() {
// returns static method 1
return "static method 1"
}
// Different static method
// with same name
static example1() {
// returns static method 2
return "static method 2"
}
}
// Calls the static function using
// className.functionName
document.writeln(HubToLearn.example1());
// Invokes the last static method in case
// if the static function has identical names
</script>
</body>
</html>
Invoking a Static Method From Within a Non-Static Method
- The following example shows how to invoke a static method from within a non-static method.
<!DOCTYPE html>
<html>
<body>
<script>
class HubToLearn {
// Static keyword is employed
// even before the function name
static example1() {
// return the string -->
// static method 1
return "static method 1"
}
// Non static method having
// different name
example2() {
// return the string -->
// static method 1
// Calls the static function
// using className.functionName
document.writeln(HubToLearn.example1());
}
}
var gfg = new HubToLearn();
gfg.example2();
</script>
</body>
</html>
Static Method and Object – Their Relationship
There is no direct link between an object and a static method. Objects cannot access a static method. Technically, this occurs because when a static method is declared in a class, that static method is literally put within the constructor of the class.
Because a static method is not placed inside the class’s prototype, it is unavailable to objects. Objects in JavaScript can only access the members of a class that are stored within the class’s prototype.
JavaScript Static Method – Memory Allocation
Because the static method pertains to a class and isn’t accessible via objects, memory for the JavaScript static method is allocated just once and isn’t dependent on the amount of instantiated objects produced. This also indicates that the static method also isn’t shared between instantiated objects because it can’t be invoked via any of them.
Static Method And Non-Static Method – Differences
| Static Method | Non-Static Method |
| 1. Belongs directly to the class | Doesn’t directly belong to the class |
| 2. Can’t be invoked via instantiated objects | Can be invoked via instantiated objects |
| 3. When the “this” keyword is used in the method, it refers to a class | When the “this” keyword is used in the method, it refers to an object |
Overview of Javascript Static Method
In JavaScript, a static method is one that has the static keyword appended to it. These methods can’t be accessible via instantiated objects, but the class name may access them.
This happens because static methods are directly associated with the class. Inheritance extends to static methods as well. These methods can also be called by non-static methods as well as constructors. Static methods are applied to build utility functions as well as objects with default information.
For More javascript methods, click here
