Cursos Empresas Blog Live Conf Eventos Precios

0:007:11

Recursos

Resumen

En programación orientada a objetos, cuando declaramos una propiedad o método como static, esto significa que podemos acceder a ellos directamente desde la clase, sin necesidad de crear una instancia. Esta característica no es exclusiva de JavaScript; está presente en muchos lenguajes que siguen este paradigma.

Uso de static en JavaScript

En JavaScript, es posible definir métodos y atributos estáticos dentro de una clase. Esto permite que ciertas funciones o valores sean accesibles sin instanciar la clase, lo cual resulta útil cuando no es necesario que dependan de un objeto específico.

Métodos estáticos del objeto Object

La superclase Object, de la que heredan todos los objetos en JavaScript, también ofrece varios métodos estáticos útiles: • Object.keys(): Devuelve una lista con los nombres de las propiedades de un objeto. • Object.getOwnPropertyNames(): Similar al anterior, permite obtener todas las propiedades propias del objeto, incluyendo las que no son enumerables. • Object.entries(): Devuelve una lista de pares clave-valor, representando el contenido del objeto en forma de sublistas. • Object.getOwnPropertyDescriptors(): Proporciona detalles sobre cada propiedad de un objeto, incluyendo si es editable, visible en iteraciones o configurable. Esta información es fundamental para controlar el nivel de acceso o modificación de los datos, facilitando el encapsulamiento, uno de los principios clave de la programación orientada a objetos.

Estos métodos no solo nos ayudan a explorar y manipular objetos más fácilmente, sino que también nos permiten implementar técnicas más avanzadas de control y seguridad en nuestros programas.

Contribución creada por: Martín Álvarez (Platzi Contributor)

Métodos y Atributos Estáticos en JavaScript

Curso Intermedio de Programación Orientada a Objetos en JavaScript

Clase 3 / 19

Ver clases

Métodos y Atributos Estáticos en JavaScript

Curso Intermedio de Programación Orientada a Objetos en JavaScript

Clase 3 de 19

Clase 3 / 19

Métodos y Atributos Estáticos en JavaScript

Curso Intermedio de Programación Orientada a Objetos en JavaScript

Clase 3 / 19

Ver clases

Zajith Corro Viveros#2824666

La palabra static define un método o propiedad estática en una clase. Los métodos estáticos son llamados desde la misma clase.

class Car {
  static brand = 'Tesla';
  static model = 'X'
  
  static printName() {
    return `${this.brand} ${this.model}`
  }
}

console.log(Car.brand) // 'Tesla'
console.log(Car.model) // 'X'
console.log(Car.printName()) // 'Tesla X'

Ni los métodos estáticos o propiedades estáticas pueden ser llamadas en una instancia de la clase.

class Car {
  static brand = 'Tesla';
  static model = 'X'
  
  static printName() {
    return `${this.brand} ${this.model}`
  }
}

console.log(Car.brand) // 'Tesla'
console.log(Car.model) // 'X'
console.log(Car.printName()) // 'Tesla X'

const myCar = new Car()

console.log(myCar.brand) // undefined
console.log(myCar.model) // undefined
console.log(myCar.printName()) // Uncaught TypeError: myCar.printName is not a function

Métodos estáticos de Object:

const person = {
  name: 'Zajith',
  lastName: 'Corro',
  age: 26
}

Object.keys(): Retorna una array con los nombres de todas las propiedades enumerables del objeto.

Object.keys(person) // [ 'name', 'lastName', 'age' ]

Object.getOwnPropertyNames(): Retorna un array con los nombres de todas las propiedades enumerables o no enumerables (excepto para las que usan Symbol) de un objeto.

Object.getOwnPropertyNames(person) // [ 'name', 'lastName', 'age' ]

Object.entries(): Retorna un array con la forma [key, value] de las propiedades enumerables.

Object.entries(person) 

/* [
  [ 'name', 'Zajith' ],
  [ 'lastName', 'Corro' ],
  [ 'age', 26 ]
] */

Object.getOwnPropertyDescriptors(): Retorna un objeto que contiene todas las propiedades de cada una de los propiedades.

Object.getOwnPropertyDescriptors(person) 
/*
{
  name: {
    value: 'Zajith',
    writable: true,
    enumerable: true,
    configurable: true
  },
  lastName: {
    value: 'Corro',
    writable: true,
    enumerable: true,
    configurable: true
  },
  age: {
    value: 26,
    writable: true,
    enumerable: true,
    configurable: true
  }
}
*/

Comentarios (46)46 comentarios

Carlos Mazzaroli

Hace 5 años

Platzi chiquito es el besto name que se le pudo haber dado al proyecto Ahora mi resumen señores

Static: atributos y métodos estáticos en JavaScript

Hasta ahora habíamos aprendido que apara acceder a los métodos o atributos de una clase o prototipo teníamos que crear una instancia del prototipo(Objeto). Pero hay una forma de que podemos saltarnos tener que crear una instancia del prototipo para acceder a los métodos o atributos, esta es la forma Static

Para crear atributos estáticos los cuales podamos acceder sin crear un objeto o una instancia de este prototipo, solo hay que agregar al atributo la palabra **static**

Métodos estáticos de Objetct

const objetito = {
    name: "Carlitos",
    email: "carlitosmazzaroli@gmail.com",
    age: 16,
}

Object.keys()

Nos devuelve una lista con todos los keys(nombres claves) de nuestro objeto objetito

Object.keys(objetito)
// (3) ["name", "email", "age"]

Object.getOwnPropertyNames()

Hace prácticamente lo mismo que Object.keys con pequeñas diferencias DOCUMENTACION

Object.getOwnPropertyNames(objetito)
// (3) ["name", "email", "age"]

Object.entries()

El método entries nos devolverá un arrays de arrays donde tendremos nuestra palabra clave con su respectivo valor por cada propiedad del prototipo [key, value]

Object.entries(objetito)
// [
//     0: (2) ["name", "Carlitos"]
//     1: (2) ["email", "carlitosmazzaroli@gmail.com"]
//     2: (2) ["age", 16]
// ]

Object.getOwnPropertyDescriptors(objetito)

Nos devuelve todas las propiedades de los objetos, con sus keys y values, y otros atributos. Los atributos writable, configurable y enumerable es la forma que tiene JavaScript para limitar el acceso modificar o modificación de nuestros atributos o de nuestros objetos.

Object.getOwnPropertyDescriptors(objetito) 
// {
//     age:{
//         configurable: true
//         enumerable: true
//         value: 16
//         writable: true
//     }
//     email:{
//         configurable: true
//         enumerable: true
//         value: "carlitosmazzaroli@gmail.com"
//         writable: true
//     }
//     name:{
//         configurable: true
//         enumerable: true
//         value: "Carlitos"
//     }
// }

Encapsulamiento

Si recordamos del curso anterior, el objetivo del encapsulamiento es limitiar quien puede modificar, acceder o ejecutar nuestros metodos o atributos de la clase o prototipo.

Ahora con las propiedades writable configurable enumerable podemos limitar quien tiene acceso, modificar nuestros objetos.

Geofry Jimenez

Bacan¡¡¡ Muchas gracias....

Martín Antonio Paniagua Velázquez

Muchas gracias!!

Carlos Esteban Lara Gil

Static atributos y métodos estáticos en Javascript

Para acceder a los métodos, atributo o clases de un prototipo hay que tener una instancia, pero esto no es necesario para los métodos estáticos.

static

Para crear atributos estáticos a los que podamos acceder sin crear un objeto, le ponemos la palabra reservada static

class Persona {
    static nombre = 'Juan';
}
console.log(Persona.nombre);
// Juan

en los métodos sería así:

class Persona {
    static nombre() {
        return 'Juan';
    }
}
console.log(Persona.nombre());
// Juan

Cuando se llame por fuera, sin crear instancias, también obtendremos el 'Juan'

Prototipo object

Madre de todos los prototipos.

const Objeto = {
    nombre: 'Juan',
    email:"luis.esponeta@gmail.com",
    edad:30,
};
Object.keys(Objeto);
// ["nombre", "email", "edad"]

Nos devuelve un array con los nombres clave de los atributos del objeto

const objeto = {
    name: "Juan",
    email:"Shimeil@gmail.com"
    age:30
};
Object.getOwnPropertyNames(objeto);
// ["name", "email", "age"]

Nos devuelve un array con los nombres de los atributos del objeto

const objeto = {
    name: "Juan",
    email:"Shimeil@gmail.com",
    age:30
};
Object.entries(objeto);
// [
    0: ["name", "Juan"*],1: ["email","Shimeil@gmail.com"],
    2: ["age",30]
    ]

Nos devuelve un array con los keys y los value del objeto

Object.getOwnPropertyDescriptors()

/*
name: {
    value: "Juan",
    writable: true,
    enumerable: true,
    configurable: true
}
*/

Nos devuelve otros atributos "writable, enumerable, configurable". Esta es la forma que tiene javascript por dentro para limitar el acceso o la modificación de nuestros atributos u objetos.

Dario Paladines

Para que les quede mas claro esa es la diferencia entre la forma habitual y usando static .

++Usando clases con instancias++

class pato {
    constructor(sonido, patas){
        this.sound = sonido;
        this.paws = patas;
    }
}

const pato2 = new pato("cuak", 2);
pato2.sound // -> "cuak"
pato2.paws // -> 2

Como se observa la única forma de acceder a los atributos de la clase pato es instanciando la misma, mientras que static lo hace de manera directa . ++Usando Static++

class pato {
    static sound = "cuak";
    static paws = 2; 
}

pato.sound // -> "cuak"
pato.paws // -> 2

Miguel Angel Reyes Moreno

Hice esos códigos con TypeScript, se los comparto: (Por cierto, estoy usando es2017 en el tsconfig.json)

Con static podemos ahorrarnos la instanciación de objetos.

class Patito {
  static sonidito: string = 'Cuak! 🦆';

  static hacerSonidito(): string {
    return 'Cuak! 🦆🦆';
  }
}

console.log(Patito.sonidito);
console.log(Patito.hacerSonidito());

const objetito = {
  name: 'Miguel',
  email: 'miguel@gmail.com',
  age: 22
}

console.table(Object.keys(objetito))
console.table(Object.getOwnPropertyNames(objetito)) //*Hace lo mismo que el método de arriba
console.table(Object.entries(objetito)); //*Devuelve un array, cada posición es otro array con las propiedades del objeto
console.table(Object.getOwnPropertyDescriptors(objetito)); //*Devuelve un objeto con las propiedades del objeto

//* Podemos modificar las propiedades del objeto

Andrés Felipe Eslava Zuluaga

Excelente!

Kevin Acevedo

El método entries me hubiera sido muy util para una labor que tenía que hacer. Llegó 1 día tarde a mi vida :(

Fernando Quinteros Gutierrez

🥶 Static: atributos y métodos estáticos en JavaScript

Ideas/conceptos claves

Los métodos estáticos son llamados sin instanciar su clase. Son habitualmente utilizados para crear funciones para una aplicación.

Object.values() - JavaScript | MDN

Object.entries() - JavaScript | MDN

Object.getOwnPropertyDescriptors() - JavaScript | MDN

Apuntes

Para acceder a una propiedad ya sea atributo o método de una clase sin necesidad de producir una instancia, la misma se puede crear campos estáticos.

class Patito {
	static sonidito = "cuack!";

	static hacerSonidito(){
		return "cuak!";
	}
}

console.log(Patito.sonidito)
// cuak!
console.log(Patito.hacerSonidito())
// cuak!

Para poder crear campos estáticos solo debemos usar la palabra reservada static

🍳 Uso en el prototipo madre Object

El prototipo Object cuenta con diferentes métodos estáticos que nos ayudan con el manejo de objetos.

const obj = {
	name: "Fernando",
	email: "fer@undefined.com",
	age: 19
};

Object.keys(obj);
// ["name", "email", "age"]

Object.getOwnPropertyNames(obj);
// ["name", "email", "age"]

Object.entries(obj);
/* [
		0: ["name", "Fernando"],
		1: ["mail", "fer@undefined.com"],
		2: ["age", 19]
*/

Object.getOwnPropertyDescriptors(obj);
/*
name: {
	configurable: true
	enumerable: true
	value: "Fernando"
	writable: true
}
*/

Object.keys y Object.getOwnPropertyNames ⇒ Devuelve un array con los nombres llave del objeto mandado.
Object.entries ⇒ Devuelve un array bidimensional en cada elemento contiene la llave y el valor de cada propiedad del objeto.
Object.getOwnPropertyDescriptors ⇒ Devuelve un objeto con todas las propiedades del objeto inicial, dentro de este resultado se encuentran otros objetos especificando cada llave del objeto original.
- Dentro de estos objetos se encuentran propiedades los cuales JavaScript usa para limitar el acceso y la modificación de nuestros objetos.

📌 **RESUMEN:** Un valor estático dentro de una clase, te permite acceder al mismo sin instancia dicha clase. El prototipo `Object` contiene una gran variedad de métodos estáticos que nos permiten la manipulación de objetos.

Zajith Corro Viveros

Daniel Loyo

Hace 3 años

Me encanta que en la descripcion de cada clase tengan anotaciones y resumenes muy utiles!

suelo guardar cada una de ellas en notion y es una manera muy practica y rapida de almacenar documentacion del curso :)

Darly Lozano Cruz

¿En donde puedo prácticar POO en JS?

Piero Rolando

Hola, si deseas practicar y profundizar te recomendaría el Curso de estructuras de datos con js, o sino puedes intentar simular ciertos sistemas, por ejemplo un sistema de platzi, creas una clase llamada curso, que tiene un profesor, el cual es de una clase llamada profesor, y así

Muchas gracias por tu respuesta

Bramucci Candela

minuto 1:00 '...que tiene un método' ¿Se refería a un atributo verdad?

Juan Castro

Profesor

Yep.

yeferson soto

Hace 4 años

mi aporte metodo estatico de js keys

//metodos estaticos de js

//objeto literal juan
const pedro = {
  name: 'pedro', //propiedades
  age: 20,
  approvedcourses: ['curso 0'],
  addcourse(newcourse){ //metodos
    this.approvedcourses.push(newcourse);
  }
};
console.log(pedro);

// metodo statico que nos devuelve los nombres de los atributos y metodos del objeto 
// Object.keys(Object a ver);

console.log(Object.keys(pedro));

Stiven Andres Medina Lopez

Mario Barceló Sospedra

++Acceder a los valores con Object.values++

Si con Object.keys podemos acceder a las claves, con Object.values podemos acceder a los valores. :D

Sería así con el ejemplo que hemos visto:

const objetito = {
  name: "Juanito",
  email: "juanito@frijolitos.io",
  age: 18,
}

Object.keys(objetito);
// [ 'name', 'email', 'age' ]

Object.values(objetito);
// [ 'Juanito', 'juanito@frijolitos.io', 18 ]

Documentación de MDN: https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Object/values

¡Espero que sirva! :)

Super útil :ok_hand:

¡Gracias, Juan! Espectacular saga la de POO en JS :D

Mi aporte para la sección de métodos Static

espero les sirva a quienes no entendieron


class Persona1 { //clase 
  nombre() { //metodo
      return console.log('pedro');
  }
}

const saludar = new Persona1(); //instanciando la clase
saludar.nombre(); //llamando el metodo

//propiedades estaticas del los prototipos objetos

//un metodo estatico se pueden ejecutar sin necesidad de instaciar la clase

class Persona { //clase 
  static nombre() { //metodo
      return 'Juan';
  }
}
console.log(Persona.nombre());//llamamos directamente el metodo sin instanciar la clase

Ricardo Alfonso Chavez Vilcapoma

¿Cómo sería las propiedades estáticas si se usa un constructor?

Creo que sí se puede según este tutorial

https://javascript.info/static-properties-methods

Genuine Docs

Sitio web :: ( https://genuinedocuments.org/ )

Nazareno Aznar Altamiranda

¿Por qué la forma de referirse a estos metodos es "static"? siempre tuve esa duda. No relaciono del todo que el metodo se denomine estatico con que no deba instanciarse un objeto para utilizarlo

Hay varias razones:

:one: Por contexto histórico y herencia de los lenguajes predecesores a JavaScript.

:two: Por no cambiar. Al NO estar relacionados con las instancias, estos métodos no cambiarán en el futuro para adecuarse a cada instancia, sino que se quedarán igual sin importar desde dónde los usemos.

:point_right: https://stackoverflow.com/questions/5062093/why-static-fields-are-called-static/5062111

Excelente! Gracias 😄

Juan Antonio Delgadillo Carrillo

me gustan los cursos de Platzi aunque en varias ocaciones me dan dolor de cabeza y cuando entiendo me alegro demasiado

N40 M10

Como los permisos de usuario en unixlike, Interesante!

Victor Hugo Cruz Carballo

para llamar un metodo estatico debemos hacer : NombrePrototipo.nombreMetodoEstatico(parametros)

Henry J. Perez

Asi se vería si se utiliza arrays y objectos como valores:

Y el out put seria algo mas o menos así:

Object methods
  Given: {
    a2: 11,
    b2: 22,
    c2: 33,
    d2: 44,
    e2: { f2: 66, g2: 77 },
    h2: 88,
    i2: [ 99, 1010, 1111 ]
  }
  .keys [
    'a2', 'b2',
    'c2', 'd2',
    'e2', 'h2',
    'i2'
  ]
  .getOwnPropertyNames [
    'a2', 'b2',
    'c2', 'd2',
    'e2', 'h2',
    'i2'
  ]
  .entries [
    [ 'a2', 11 ],
    [ 'b2', 22 ],
    [ 'c2', 33 ],
    [ 'd2', 44 ],
    [ 'e2', { f2: 66, g2: 77 } ],
    [ 'h2', 88 ],
    [ 'i2', [ 99, 1010, 1111 ] ]
  ]
  .getOwnPropertyDescriptors {
    a2: { value: 11, writable: true, enumerable: true, configurable: true },
    b2: { value: 22, writable: true, enumerable: true, configurable: true },
    c2: { value: 33, writable: true, enumerable: true, configurable: true },
    d2: { value: 44, writable: true, enumerable: true, configurable: true },
    e2: {
      value: { f2: 66, g2: 77 },
      writable: true,
      enumerable: true,
      configurable: true
    },
    h2: { value: 88, writable: true, enumerable: true, configurable: true },
    i2: {
      value: [ 99, 1010, 1111 ],
      writable: true,
      enumerable: true,
      configurable: true
    }
  }

Resumen

Métodos y Atributos Estáticos en JavaScript

Métodos y Atributos Estáticos en JavaScript

Métodos y Atributos Estáticos en JavaScript

Métodos y Atributos Estáticos en JavaScript

Métodos y Atributos Estáticos en JavaScript

Resumen

Comentarios

Static: atributos y métodos estáticos en JavaScript

Object.keys()

Object.getOwnPropertyNames()

Object.entries()

Object.getOwnPropertyDescriptors(objetito)

Resumen

Comentarios

Static: atributos y métodos estáticos en JavaScript

Object.keys()

Object.getOwnPropertyNames()

Object.entries()

Object.getOwnPropertyDescriptors(objetito)

Encapsulamiento

Static atributos y métodos estáticos en Javascript

static

Prototipo object

Object.keys()

Object.getOwnPropertyNames()

Object.entries()

Object.getOwnPropertyDescriptors()

Static: atributos y métodos estáticos en JavaScript

🥶 Static: atributos y métodos estáticos en JavaScript

Ideas/conceptos claves

Recursos

Apuntes

🍳 Uso en el prototipo madre Object

`Object.keys()`

`Object.getOwnPropertyNames()`

`Object.entries()`

`Object.getOwnPropertyDescriptors(objetito)`

`Object.keys()`

`Object.getOwnPropertyNames()`

`Object.entries()`

`Object.getOwnPropertyDescriptors(objetito)`

🍳 Uso en el prototipo madre `Object`