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

2/19
Recursos

Aportes 14

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

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: "[email protected]",
    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", "[email protected]"]
//     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: "[email protected]"
//         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.

Resumen corto de static.
Si quieres tener acceso a una variable o método sin tener que crear instancias de una clase usa la palabra static antes de crear tu variable o método.

class saludar {
    static saludar =  'hola';
    static metodoSaludar () {
        return 'hola2'
    }
}
console.log(saludar.saludar) //hola
console.log(saludar.metodoSaludar()) //hola2

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: '[email protected]',
  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

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 😦

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
  }
}
*/

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

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:"[email protected]",
    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:"[email protected]"
    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:"[email protected]",
    age:30
};
Object.entries(objeto);
// [
    0: ["name", "Juan"*],1: ["email","[email protected]"],
    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.

Object.entries() fue introducido cpon el ECMAScript 8, junto con Objet.values(), para referencia este curso

🥶 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

  • 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: "[email protected]",
	age: 19
};

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

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

Object.entries(obj);
/* [
		0: ["name", "Fernando"],
		1: ["mail", "[email protected]"],
		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.

la base de todo lo que vamos hacer en el curso

Acceder a los valores con Object.values

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

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

const objetito = {
  name: "Juanito",
  email: "[email protected]",
  age: 18,
}

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

Object.values(objetito);
// [ 'Juanito', '[email protected]', 18 ]

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

¡Espero que sirva! 😃

Resumen de la clase en RunJS!

patito sonidoto juanito objetito … parece que es estandar ponerle ito a todo

¿Por qué hablamos de instancias y metodos estaticos si el ejemplo fue con un Objeto Literario llamado objetito ?
. Se supone que los objetos literarios no se puede instanciar