Introducción al método estático de JavaScript

Los métodos estáticos de JavaScript se utilizan generalmente para crear funciones de utilidad. Se introducen en ES6 para el método específico de clase para la programación orientada a objetos en JavaScript.

Para declarar un método estático, simplemente podemos usar palabras clave estáticas con la firma del método. El método estático no se llama en la instancia de la clase a la que se llama directamente en la clase.

Entonces podemos decir que JavaScript nos proporciona un método estático que pertenece a la clase pero no con la instancia de la clase. Entonces, como Java, no necesitamos una instancia de la clase para llamar también al método estático en JavaScript. Por lo tanto, el método estático en JavaScript pertenece a la clase misma.

Sintaxis:

static methodName()()

En JavaScript también utilizamos la palabra clave estática para definir cualquier método como método estático. Solo necesitamos usar la palabra clave estática junto con el nombre del método. Los nombres de los métodos pueden ser cualquier cosa. Hay muchos puntos relacionados con esta palabra clave estática, verifíquelos uno por uno:

  • Una clase puede contener cualquier cantidad de métodos estáticos. En otras palabras, una clase puede tener más de un método estático.
  • El método estático puede tener cualquier nombre, como cualquier otro método o función.
  • Para llamar a un método estático desde otro método estático, podemos usar esta palabra clave.
  • El método estático se puede usar para crear funciones de utilidad.
  • Si queremos llamar a un método estático desde el método no estático en tales casos, no podemos usar esta palabra clave. Necesitamos llamar al método estático por el nombre de la clase o como propiedad del constructor.
  • Podemos declarar más de un método estático con el mismo nombre, pero si lo hacemos, JavaScript siempre llama al último.

Un ejemplo simple para demostrar la sintaxis del método estático.

Código:


class Syntax
(
static displayMessage()
(
return "static method called"
)
)
document.writeln(Syntax.displayMessage());

En el ejemplo anterior, estamos llamando al método estático con el nombre de la clase que no crea la instancia de la clase. Usar el nombre de clase solo como una instancia.

¿Cómo funcionan los métodos estáticos en JavaScript?

  • Los métodos estáticos son métodos que requieren que se cree un objeto de una clase antes de cuando realmente se llama. Para llamarlos necesitamos crear el objeto de la clase en la que se define. El método estático recibe una llamada de dos maneras, una usando esta palabra clave y otra del constructor.
  • Los métodos estáticos no pueden llamar directamente al método no estático. Los métodos estáticos utilizan el estado de variable de instancia para afectar su comportamiento. El método estático tampoco puede ver el estado de la variable de instancia, por lo que si intentamos llamar al método no estático desde el compilador del método estático, se quejará.
  • Además, el método estático no puede usar la variable de instancia no estática. El método estático no puede hacer referencia a ninguna variable de instancia de la clase. El método estático no sabe qué valor de variable de instancia usar.
  • Mientras que en el caso de los métodos no estáticos, tienen una palabra clave estática junto con el nombre del método y si queremos trabajar con métodos no estáticos, entonces necesitamos crear el objeto de esa clase porque pertenece a la clase solo en la que se declara Los métodos no estáticos pueden acceder fácilmente a cualquier variable estática y estática sin la instancia de la clase.

Para llamar a un método estático desde otro método estático, podemos usar 'esta' palabra clave.

Código:

class StaticMethodCallDemo (
static staticMethodOne() (
return 'Static method one is called from ';
)
static sttaicMethodTwo() (
return this.staticMethod() + ' static method two';
)
)
StaticMethodCallDemo.staticMethodOne();
StaticMethodCallDemo.sttaicMethodTwo();

Pero, ¿qué pasa si queremos llamar a un método estático desde el método no estático? Para esto, podemos ir con cualquiera de los dos enfoques

1) classname.static_method_name (); : Al usar el nombre de la clase
2) this.constructor.static_method_name (); : O utilizando la propiedad del constructor.

Código:

class StaticMethodCallDemo2 (
constructor() (
console.log(StaticMethodCallDemo2.staticMethodOne());
// 'static method called using class name.'
console.log(this.constructor.staticMethodOne());
// 'static methed called using constructor property.'
)
static staticMethodOne() (
return 'static method has been called.';
)
)

JavaScript también tiene la introducción de clases en ES6, por lo que ahora podemos utilizar el método estático, los constructores, las súper llamadas al padre y la herencia, lo que facilitará mucho la interoperabilidad para el desarrollador. Por lo tanto, podemos tener una subclase para una clase principal y cualquier método que declaremos en la clase principal que también estará disponible en la subclase. Los accesos getter y setter también se introducen en ES5 y esto se puede usar con la palabra clave estática. A continuación se muestra el ejemplo para mostrar cómo usar esto con la palabra clave estática.

Código:

class Demo(
constructor(name)(
this.name = name
)
static get Leader()(
return new Demo(abc)
)
)

Ejemplos de método estático de JavaScript

Estos son algunos de los ejemplos del método estático de JavaScript que se muestran a continuación:

Ejemplo 1

Para mostrar el método estático con el mismo nombre.

Código:



class SameNameDemo
(
static displayMsg()
(
return "static method with same name one"
)
static displayMsg()
(
return "static method with same name two"
)
)
document.writeln(SameNameDemo.displayMsg());

Salida:

Ejemplo # 2

Ejemplo para llamar a más de un método estático.

Código:



class NoSameName
(
static displayMsg1()
(
return "static method one is called"
)
static displayMsg2()
(
return "static method two is called"
)
)
document.writeln(NoSameName.displayMsg1()+"
");
document.writeln(NoSameName.displayMsg2());

Salida:

Ejemplo # 3

Para mostrar un mensaje.

Código:



class Demo
(
static displayMsg()
(
return "static method is called"
)
)
document.writeln(Demo.displayMsg());

Salida:

Ejemplo # 4

Llamar a un método estático desde un método no estático.

Código:



class Demo (
static displayMsg() (
return "calling static method from non static method"
)
showMsg() (
document.writeln(Demo.displayMsg()+"
");
)
)
var demo =new Demo();
demo.showMsg();

Salida:

Ejemplo # 5

Llamando a un método estático desde el constructor.

Código:



class Demo (
constructor() (
document.writeln (Demo.displayMag()+"
");
document.writeln (this.constructor.displayMag());
)
static displayMag() (
return "calling static method from constructor."
)
)
var demo = new Demo();

Salida:

Conclusión

Entonces, básicamente, el método estático no requiere que la instancia acceda a ellos, podemos acceder directamente a ellos por el nombre de la clase dentro de la que pertenecen. Por ejemplo ClassName.Static-method-name-to-be = called ();

Artículos recomendados

Esta es una guía para el método estático de JavaScript. Aquí discutimos la sintaxis, el trabajo y ejemplos del método estático javascript. También puede consultar nuestros otros artículos sugeridos para obtener más información:

  1. Eventos JavaScript
  2. Errores en JavaScript
  3. JavaScript vs Ruby
  4. Función recursiva en JavaScript