Me encanta que antes de enseñarnos un concepto, nos expliquen cómo era antes de ES6. 💚
Introducción al Clean Code
Deuda técnica y refactorización de código
Reglas del diseño simple
Qué es Clean Code
Nombre y uso de las variables
Uso correcto de var, let y const
Reglas para la nomenclatura
Cómo nombrar según el tipo de dato
Ejercicio: Nombra correctamente según su tipo de dato
Ámbito de las variables
Ámbito global
Ámbito local o de función
Ámbito de bloque
Ámbito estático
Hoisting
Funciones
Declaración y expresión de funciones
Parámetros y argumentos
Funciones de flecha y el this
Clases
POO con ES6 (constructores, métodos y herencia)
Herencia en JavaScript
Tamaño reducido (responsabilidad única)
Organización
Optimizaciones
Cuándo usar comentarios
Formato coherente (codear en equipos)
Principio DRY
Notación big O
Cierre
Sigue aprendiendo JavaScript
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Herencia en JavaScript
17/24Recursos
Aportes 12
Preguntas 1
Ordenar por:
Sintaxis a partir de ES6, para herencia:
- constructor
- extends
- super()
//Clase padre
class Person (name) {
constructor(name) {
this.name;
}
greet() {
console.log(`Hola, mi nombre es ${this.name}`);
}
}
//Clase hija
class Developer extends Person () {
constructor(name) {
super(name);
}
writeCode(coffe) {
coffee ? console.log ("Estoy desarrollando una nueva feature") : console.log("Necesito más café...")
}
}
code :
//Clase Padre
// Antes de ES6
function Person(name) {
this.name = name;
}
Person.prototype.greet = function () {
return "Hello I am " + this.name;
}
var person = new Person("Alex");
console.log(person.name); //> Alex
console.log(person.greet());//>Hello I am Alex
//Clase Hija
function Developer(name) {
this.name = name;
}
//herencia con Prototipos
Developer.prototype = Object.create(Person.prototype)
Developer.prototype.writeCode = function (coffe) {
if (coffe) console.log('I am working in a new feature');
else console.log('I need coffe, please!');
};
var dev = new Developer('Dono');
//accedo desde la clase hija a la funcion del Padre
dev.greet()//> Hello I am Alex
dev.writeCode()//>I need Coffe
//Ahora con ES6 recomienda:
//Sintaxis a partir de ES6:
//Clase Padre
class People {
constructor(name) {
this.name = name;
}
greet () {
console.log('Hola! me llamo ' + this.name);
}
}
// const cat = new Cat("Michi");
// console.log(cat.name);
// console.log(cat.greet());
//Clase Hija
class Developer extends People {
constructor(name){
super(name);
}
writeCode(coffe){
coffe ? console.log('I am developing a new feature') : console.log('I need coffe!');
}
}
const dev = new Developer('Ing');
dev.greet();//Hola! me llamo Ing
dev.writeCode(true);//I am developing a new feature
Amé saber esto de como se hacía antes de ES6, no recuerdo si he visto de alguién más que explique eso, quizás si, pero igual no recuerdo. Muchas gracias Alex
Clase 17: Herencia en JavaScript
- Recuerda que al usar Clases tenemos la habilidad de generar herencia
- Desde el EMAC6 podemos usar la palabra reservada
extendspara crear herencias - Anteriormente se usaba
prototypepara generar herencia
Ejemplo Herencia con EMAC6
//Clase padre
class Person (name) {
constructor(name) {
this.name;
}
greet() {
console.log(`Hola, mi nombre es ${this.name}`);
}
}
//Clase hija
class Developer extends Person () {
constructor(name) {
super(name);
}
writeCode(coffe) {
coffee ? console.log ("Estoy desarrollando una nueva feature") : console.log("Necesito más café...")
}
}
Antes era horrible
brutal
Resumen de la clase
```js
//clase padre
function person(name) {
this.name = name;
}
person.prototype.greet = function() {
console.log('Hello, my name is ' + this.name);
};
//clase hija
function student(name) {
this.name = name;
}
// herencia
student.prototype = Object.create(person.prototype);
student.prototype.writeCode = function(book) {
if (book) console.log('i am reeding the book');
else console.log('i am not reading anything');
};
var dev = new student('luis');
dev.greet();
dev.writeCode();
////
class Person{
constructor(person){
this.name = person;
}
greet(){
console.log(`Hello, my name is ${this.name}`);
}
}
////////////////////////////////////////////////////////////////
//clase hija
class Developer extends Person{
constructor(name){
super(name);
}
//herencia
writeCode(coffee) {
coffee? console.log('I am developing a new feature') : console.log ("I need Coffee")
}
}
const dev = new Developer('Luis');
dev.greet();
dev.writeCode(true);
```person
La herencia es un concepto fundamental en la programación orientada a objetos que permite crear nuevas clases basadas en clases existentes, heredando sus propiedades y métodos.
Puntos clave sobre la herencia en JavaScript:
1. La palabra clave `extends` se usa para crear una clase hija.
2. `super()` se usa en el constructor de la clase hija para llamar al constructor de la clase padre.
3. Los métodos de la clase padre se heredan automáticamente.
4. Los métodos heredados pueden ser sobrescritos en la clase hija.
5. Se pueden añadir nuevos métodos y propiedades a las clases hijas.
6. El operador `instanceof` puede usarse para verificar la herencia.
La herencia permite crear jerarquías de clases, promoviendo la re-utilización de código y permitiendo una organización más estructurada de las propiedades y comportamientos compartidos entre diferentes tipos de objetos.
Muy bien explicado el tema de herencia y facil de entender!!
Antes de ES6, para ejecutar el constructor de la clase padre, lo que ahora se hace con super(), antes se hacia de la siguiente manera
function Developer(name) {
Person.call(this, ...arguments)
}
Claro que aquí el problema era que el Function Constructor padre estaba harcodeado, ya que si queremos que Developer herede de otra “clase”, se puede hacer de la siguiente manera:
function Developer(super, ...args){
if (super) super.apply(this, args)
}
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?