Carlos Mazzaroli
Geofry Jimenez
Bacan¡¡¡ Muchas gracias....
Martín Antonio Paniagua Velázquez
Muchas gracias!!
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)
Carlos Mazzaroli
Geofry Jimenez
Bacan¡¡¡ Muchas gracias....
Martín Antonio Paniagua Velázquez
Muchas gracias!!
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.
Object.keys()
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
Object.getOwnPropertyNames()
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
Object.entries()
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.
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
Andrés Felipe Eslava Zuluaga
Excelente!
Fernando Quinteros Gutierrez
Zajith Corro Viveros
Daniel Loyo
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í
Darly Lozano Cruz
Muchas gracias por tu respuesta
Bramucci Candela
minuto 1:00 '...que tiene un método' ¿Se refería a un atributo verdad?
Juan Castro
ProfesorYep.
yeferson soto
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! :)
Juan Castro
ProfesorSuper útil :ok_hand:
Mario Barceló Sospedra
¡Gracias, Juan! Espectacular saga la de POO en JS :D
yeferson soto
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?
Ricardo Alfonso Chavez Vilcapoma
Creo que sí se puede según este tutorial
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
Juan Castro
ProfesorHay 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
Nazareno Aznar Altamiranda
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:
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 } }
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.
Hice esos códigos con TypeScript, se los comparto: (Por cierto, estoy usando es2017 en el tsconfig.json)
Static: atributos y métodos estáticos en JavaScript
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
🥶 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.
Recursos
Object.values() - JavaScript | MDN
Object.entries() - JavaScript | MDN
Object.getOwnPropertyDescriptors() - JavaScript | MDN
Apuntes
class Patito { static sonidito = "cuack!"; static hacerSonidito(){ return "cuak!"; } } console.log(Patito.sonidito) // cuak! console.log(Patito.hacerSonidito()) // cuak!
static🍳 Uso en el prototipo madre Object
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.
📌 **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.
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 } } */