Para refrescar un poco la memoria.
Introducción
¿Qué hay dentro de los objetos en JavaScript?
Profundicemos en los objetos
Static: atributos y métodos estáticos en JavaScript
Métodos estáticos del prototipo Object
Object.defineProperty
Cómo copiar objetos en JavaScript
Cómo funciona la memoria en JavaScript
Shallow copy en JavaScript
Qué es JSON.parse y JSON.stringify
Recursividad en JavaScript
Qué es recursividad
Deep copy con recursividad
Playgrounds: Hacer freeze de un objeto de forma recursiva
Abstracción y encapsulamiento sin prototipos
Abstracción con objetos literales y deep copy
Factory pattern y RORO
Module pattern y namespaces: propiedades privadas en JavaScript
Getters y setters
Cómo identificar objetos
Qué es duck typing
Duck typing en JavaScript
Instance Of en JavaScript con instancias y prototipos
Atributos y métodos privados en prototipos
Creando métodos estáticos en JavaScript
Próximos pasos
¿Quieres más cursos de POO en JavaScript?
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Última oportunidad para asegurar tu aprendizaje por 1 año a precio especial
Antes: $249
Paga en 4 cuotas sin intereses
Termina en:
Aplicaremos la abstracción y encapsulamiento a nuestros objetos en JavaScript sin necesidad de utilizar prototipos ni clases. Emplearemos el deep copy para generar nuevos objetos a partir de un objeto base y los encapsularemos con ayuda de los métodos del superprototipo Object
tales como defineProperty
, seal
y freeze
.
Vamos a crear un objeto base para un estudiante:
// OBJETO BASE
const studentBase = {
name: undefined,
email: undefined,
age: undefined,
approvedCourses: undefined,
learningPaths: undefined,
socialMedia: {
twitter: undefined,
instagram: undefined,
facebook: undefined,
},
};
Con esto podemos crear nuevos estudiantes generando copias a partir de este objeto literal studentBase
. Para ello emplearemos deep copy con recursividad:
function isObject(subject) {
return typeof subject == "object";
}
function isArray(subject) {
return Array.isArray(subject);
}
// FUNCIÓN RECURSIVA
function deepCopy(subject) {
let copySubject;
const subjectIsObject = isObject(subject);
const subjectIsArray = isArray(subject);
if (subjectIsArray) {
copySubject = [];
} else if (subjectIsObject) {
copySubject = {};
} else {
return subject;
}
for (key in subject) {
const keyIsObject = isObject(subject[key]);
if (keyIsObject) {
copySubject[key] = deepCopy(subject[key]);
} else {
if (subjectIsArray) {
copySubject.push(subject[key]);
} else {
copySubject[key] = subject[key];
}
}
}
return copySubject;
}
// OBJETO BASE
const studentBase = {
name: undefined,
email: undefined,
age: undefined,
approvedCourses: undefined,
learningPaths: undefined,
socialMedia: {
twitter: undefined,
instagram: undefined,
facebook: undefined,
},
};
// GENERANDO NUEVOS OBJETOS
const juan = deepCopy(studentBase);
const emma = deepCopy(studentBase);
Sabemos que con Object.defineProperty
es posible editar las propiedades writable
, enumerable
y configurable
de los atributos de un objeto. Con esto limitamos el acceso a los datos de los nuevos objetos que generemos.
Editemos la propiedad configurable
del atributo name
del objeto juan
para evitar que sea borrada:
Object.defineProperty(juan, "name", {
value: "Juanito", // Definimos el valor del atributo "name" como "Juanito"
configurable: false
});
// El resto de propiedades (writable y enumerable) por defecto serán true
// Si intentamos borrar el atributo "name" ...
delete juan.name
// Observamos que no fue eliminado dicho atributo, pues bloqueamos su eliminación
console.log(juan);
/* > Mensaje en consola
{
name: 'Juanito',
email: undefined,
age: undefined,
approvedCourses: undefined,
learningPaths: undefined,
socialMedia: { twitter: undefined, instagram: undefined, facebook: undefined }
}
*/
Seguramente deseemos tener esta configuración con el resto de nuestros atributos y así evitar que sean borradas, pero tendríamos que hacerlo uno por uno. Podemos simplificar esta labor utilizando Object.seal
:
Object.seal(juan); // Ahora todos los atributos están restringidos a que sean eliminados
Con Object.isSealed
podemos comprobar si todas las propiedades de un objeto están bloqueadas a que sean eliminadas. Nos devolverán un booleano.
Object.isSealed(juan);
Empleamos Objcet.isFrozen
para preguntar si las propiedades de un objeto están restringidas a su eliminación y edición. Devolverá un booleano.
Object.isFrozen(juan);
Contribución creada por: Martín Álvarez (Platzi Contributor) con el aporte de Javier Salcedo Salgado.
Aportes 17
Preguntas 4
Para refrescar un poco la memoria.
El método **Object.isSealed()**
si el objeto está sellado.
Devuelve true si el objeto está sellado, de lo contrario devuelve false. Un objeto está sellado si no es extensible y si todas sus propiedades no se pueden configurar y por lo tanto no removibles (pero no necesariamente no modificables).
El método **Object.isFrozen()**
determina si un objeto está congelado.
Devuelve true si el objeto está sellado, de lo contrario devuelve false. Un objeto está sellado si no es extensible y si todas sus propiedades no se pueden configurar y por lo tanto no removibles (pero no necesariamente no modificables).
Un objeto está congelado si y solo si no es extendible, todas sus propiedades son no-configurables, y todos los datos de sus propiedades no tienen capacidad de escritura.
/* Codigo para hacer un DeepCopy */
const studentBase = {
name: undefined,
email: undefined,
age: undefined,
approvedCourse: undefined,
learningPaths: undefined,
socialMedia: {
twitter: undefined,
instagram: undefined,
facebook: undefined,
}
};
const carlos = deepCopy(studentBase);
// Object.defineProperty(carlos, "name", {
// value: "Carlitos",
// configurable: false,
// });
Object.seal(carlos); // Es lo mismo que lo de arriba pero mas easy
carlos.name = "Carlitos";
Object.isSealed(carlos); // Nos muestra con True o False si todas las propiedades estan selladas
Object.isFrozen(carlos); // Nos muestra con True o False si todas las propiedades estan congeladas
Object.freeze()
Este método congela un objeto que sea pasado. Es decir:
writable
, enumerable
y configurable
) sean modificadasObject.seal()
Este método sella un objeto que sea pasada. Es decir:
configurable: false
, con lo que impide que sean borradaswritable
esta true
Object.isSealed()
Este método determina si un objeto se encuentra sellado. Devuelve un valor boolean
. Es decir:
const person = {
name: 'Eduardo',
lastName: 'Mendez',
}
Object.seal(person)
Object.isSealed(person) // true
Esta función no toma en cuenta que la función Object.seal()
haya sido aplicada en el objeto. Nosotros podemos simular el comportamiento de Object.seal()
con otras funciones:
const person = {
name: "Eduardo",
lastName: "Mendez",
};
Object.preventExtensions(person);
Object.defineProperty(person, "name", { configurable: false });
Object.defineProperty(person, "lastName", { configurable: false });
Object.isSealed(person) // true
Object.isFrozen()
Este método determina si un objeto se encuentra congelado. Devuelve un valor boolean
. Es decir:
const person = {
name: 'Eduardo',
lastName: 'Mendez',
}
Object.freeze(person)
Object.isFrozen(person) // true
Al igual que Object.isSealed()
, esta función no toma en cuenta que la función Object.freeze()
haya sido aplicada en el objeto. Nosotros podemos simular el comportamiento de Object.freeze()
con otras funciones:
const person = {
name: "Eduardo",
lastName: "Mendez",
};
Object.preventExtensions(person);
Object.defineProperty(person, "name", { configurable: false, writable: false });
Object.defineProperty(person, "lastName", {
configurable: false,
writable: false,
});
Object.isFrozen(person) // true
Object.preventExtensions()
evita o previene que nuevas propiedades sean agregadas a un objeto.
Para los que somos mas gráficos…
const studentBase = {
name: undefined,
email: undefined,
age: undefined,
approvedCourses: undefined,
learningPaths: undefined,
socialMedia: {
facebook: undefined,
twitter: undefined,
instagram: undefined,
}
};
const juan = deepCopy(studentBase);
Object.seal(juan); //* Ninguna propiedad del objeto Juan se podrá eliminar
Object.isSealed(juan); //* Pregunta si tiene todas sus propiedades protegidas
Object.isFrozen(juan); //* Pregunta si tiene todas sus propiedades protegidas y además no se pueden agregar otras
La finalidad de esta clase es demostrar que podemos crear objetos, sin prototipos o clases, esto haciendo uso de un objeto literal como molde (donde se aplico abstracción) y además poder encapsular sus propiedades haciendo uso de los métodos estáticos del prototipo global Object
Object.isSealed(juan); // Lo que nos permite este método es que si todas las propiedades de nuestro objeto que enviemos como argumento tienen la protección como "configurable": false. Nos mandaría true o false.
Object.isFrozen(juan); // Este método nos dice que si todas las propiedades que tengamos en nuestro objeto tengan el "writable" y "configurable" como false, esto quiere decir que no podremos editar ni borrar nuestras propiedades.
Crear una nueva propiedad y edita alguna que ya habíamos creado:
Object.defineProperty(obj, "propiedad", {
value: valor,
writable: true,
enumerable: true,
configurable: true
});
Object.defineProperty(juan,"name",{
value: "Luis Alberto Spinetta",
configurable:false,
})
// proteje nuestras propiedades
Object.seal()
Un atajo para que las propiedades no se puedan editar
Object.isSealed()
Verifica si un objeto está sellado o no
Object.isFrozen()
determina si un objeto está congelado o no
Excelente clase
Mi resumen:
/*-----------------Abstracción de objetos literales-------------------*/
// OBJETO BASE
const studentBase = {
name: undefined,
email: undefined,
age: undefined,
approvedCourses: undefined,
learningPaths: undefined,
socialMedia: {
twitter: undefined,
instagram: undefined,
facebook: undefined,
},
};
//Con esto podemos crear nuevos estudiantes generando copias a partir de este objeto literal studentBase.
function isObject(subject) {
return typeof subject == "object";
}
function isArray(subject) {
return Array.isArray(subject);
}
// FUNCIÓN RECURSIVA
function deepCopy(subject) {
let copySubject;
const subjectIsObject = isObject(subject);
const subjectIsArray = isArray(subject);
if (subjectIsArray) {
copySubject = [];
} else if (subjectIsObject) {
copySubject = {};
} else {
return subject;
}
for (key in subject) {
const keyIsObject = isObject(subject[key]);
if (keyIsObject) {
copySubject[key] = deepCopy(subject[key]);
} else {
if (subjectIsArray) {
copySubject.push(subject[key]);
} else {
copySubject[key] = subject[key];
}
}
}
return copySubject;
}
// GENERANDO NUEVOS OBJETOS
const rica = deepCopy(studentBase);
const terry = deepCopy(studentBase);
/*-----------------Encapsulación de objetos literales-------------------*/
Object.defineProperty(rica, "name", { //También permite editar propiedades existentes
value: "Ricardito", // Definimos el valor del atributo "name" como "Juanito"
configurable: false
});
// El resto de propiedades (writable y enumerable) por defecto serán true
// Si intentamos borrar el atributo "name"
delete rica.name
// Observamos que no fue eliminado dicho atributo, pues bloqueamos su eliminación
console.log(rica);
/*
{
name: 'Ricardito',
email: undefined,
age: undefined,
approvedCourses: undefined,
learningPaths: undefined,
socialMedia: { twitter: undefined, instagram: undefined, facebook: undefined }
}
*/
console.log(Object.seal(rica)); // Ahora todos los atributos están restringidos a que sean eliminados
console.log(Object.isSealed(rica)); //true //Verificar si no se pueden borrar los atributos de un objeto
Espera queeee, como que con funciones 🤯
Object.seal()
protege a que se pueda eliminar nuestras propiedades.🗑️
Object.isSealed
verifica que todas las propiedades de nuestro objeto, tiene la proteccion configurable como false.✅
Object.isFrozen(juanito)
verifica que todas las propiedades no se borren ni editen.✅
uhmmm :0
creo que todo el curso se fuese resumido en 4 videos y no hacer 20
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.