Contenido del Curso

Object-Oriented Programming in JavaScript

1. Classes & Objects

Classes Class Attributes Class Methods Objects' Creating Keyword 'this'Constructor

2. Encapsulation

Private Modifier Get and Set

3. Static

Static Attributes Static Functions

4. Inheritance

What is an Inheritance Constructor Inheritance Overriding

Overriding

Overriding Methods

In the previous chapter, we redefined the constructor for the daughter class. If there are some methods in the parent class that you want to be different in the daughter’s, you can simply write it again with another function's body:


              12345678910111213141516171819202122232425262728
            
class Rectangle {
  height;
  width;
  constructor(height, width) {
    this.height = height;
    this.width = width;
    console.log('Rectangle created');
  }
  rotate() {
    side = this.width;
    this.width = this.height
    this.height = side;
    console.log('Now rectangle has width', this.width, 'and height', this.height);
  }
}

class Square extends Rectangle{
  constructor(size){
    super(size, size);
    console.log('Square created');
  }
  rotate() {
    console.log('Rotating square does not change it');
  }
}

square = new Square(5);
square.rotate();

Here, if you rotate the square, nothing changes, so we'll override this function to only output the message, not change the sides.

In case if you want to use methods from parent’s class, use super keyword again. Let's use increase() method from Rectangle class inside increaseTwice() from Square class.


              12345678910111213141516171819202122232425262728
            
class Rectangle {
  height;
  width;
  constructor(height, width) {
    this.height = height;
    this.width = width;
    console.log('Rectangle created');
  }
  increase(num) {
    this.width *= num;
    this.height *= num
    console.log('Now figure has width', this.width, 'and height', this.height);
  }
}

class Square extends Rectangle{
  constructor(size){
    super(size, size);
    console.log('Square created');
  }
  increaseTwice() {
    super.increase(2);
  }
}

square = new Square(5);
square.increase(4);
square.increaseTwice();

Tarea

Let's place our Figures in the boxes. Add to the parent's class function box(), which outputs the message I am a Rectangle, and I need a box of size won h, where w and h are width and height of the current Rectangle. Then override this function in Square class, so it outputs the message: I am a Square, and I need a box of size son s, and s is a length of square's side.

Create Rectangle and Square objects and call box() method for them.

Overriding attributes

Inside the daughter's class, we can refer to any attributes and methods of the parent's class. In general, there is no sense to override attributes because you can refer them directly from the parent's class. The exception is private attributes: they are accessible only inside the current class, that's why you can't override them.

Cambia al escritorio para practicar en el mundo realContinúe desde donde se encuentra utilizando una de las siguientes opciones

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 4. Capítulo 3

Overriding

Overriding Methods


              12345678910111213141516171819202122232425262728
            
class Rectangle {
  height;
  width;
  constructor(height, width) {
    this.height = height;
    this.width = width;
    console.log('Rectangle created');
  }
  rotate() {
    side = this.width;
    this.width = this.height
    this.height = side;
    console.log('Now rectangle has width', this.width, 'and height', this.height);
  }
}

class Square extends Rectangle{
  constructor(size){
    super(size, size);
    console.log('Square created');
  }
  rotate() {
    console.log('Rotating square does not change it');
  }
}

square = new Square(5);
square.rotate();

Here, if you rotate the square, nothing changes, so we'll override this function to only output the message, not change the sides.

In case if you want to use methods from parent’s class, use super keyword again. Let's use increase() method from Rectangle class inside increaseTwice() from Square class.


              12345678910111213141516171819202122232425262728
            
class Rectangle {
  height;
  width;
  constructor(height, width) {
    this.height = height;
    this.width = width;
    console.log('Rectangle created');
  }
  increase(num) {
    this.width *= num;
    this.height *= num
    console.log('Now figure has width', this.width, 'and height', this.height);
  }
}

class Square extends Rectangle{
  constructor(size){
    super(size, size);
    console.log('Square created');
  }
  increaseTwice() {
    super.increase(2);
  }
}

square = new Square(5);
square.increase(4);
square.increaseTwice();

Tarea

Create Rectangle and Square objects and call box() method for them.

Overriding attributes

Cambia al escritorio para practicar en el mundo realContinúe desde donde se encuentra utilizando una de las siguientes opciones

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 4. Capítulo 3

Overriding

Overriding Methods


              12345678910111213141516171819202122232425262728
            
class Rectangle {
  height;
  width;
  constructor(height, width) {
    this.height = height;
    this.width = width;
    console.log('Rectangle created');
  }
  rotate() {
    side = this.width;
    this.width = this.height
    this.height = side;
    console.log('Now rectangle has width', this.width, 'and height', this.height);
  }
}

class Square extends Rectangle{
  constructor(size){
    super(size, size);
    console.log('Square created');
  }
  rotate() {
    console.log('Rotating square does not change it');
  }
}

square = new Square(5);
square.rotate();

Here, if you rotate the square, nothing changes, so we'll override this function to only output the message, not change the sides.

In case if you want to use methods from parent’s class, use super keyword again. Let's use increase() method from Rectangle class inside increaseTwice() from Square class.


              12345678910111213141516171819202122232425262728
            
class Rectangle {
  height;
  width;
  constructor(height, width) {
    this.height = height;
    this.width = width;
    console.log('Rectangle created');
  }
  increase(num) {
    this.width *= num;
    this.height *= num
    console.log('Now figure has width', this.width, 'and height', this.height);
  }
}

class Square extends Rectangle{
  constructor(size){
    super(size, size);
    console.log('Square created');
  }
  increaseTwice() {
    super.increase(2);
  }
}

square = new Square(5);
square.increase(4);
square.increaseTwice();

Tarea

Create Rectangle and Square objects and call box() method for them.

Overriding attributes

Cambia al escritorio para practicar en el mundo realContinúe desde donde se encuentra utilizando una de las siguientes opciones

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Overriding Methods


              12345678910111213141516171819202122232425262728
            
class Rectangle {
  height;
  width;
  constructor(height, width) {
    this.height = height;
    this.width = width;
    console.log('Rectangle created');
  }
  rotate() {
    side = this.width;
    this.width = this.height
    this.height = side;
    console.log('Now rectangle has width', this.width, 'and height', this.height);
  }
}

class Square extends Rectangle{
  constructor(size){
    super(size, size);
    console.log('Square created');
  }
  rotate() {
    console.log('Rotating square does not change it');
  }
}

square = new Square(5);
square.rotate();

Here, if you rotate the square, nothing changes, so we'll override this function to only output the message, not change the sides.

In case if you want to use methods from parent’s class, use super keyword again. Let's use increase() method from Rectangle class inside increaseTwice() from Square class.


              12345678910111213141516171819202122232425262728
            
class Rectangle {
  height;
  width;
  constructor(height, width) {
    this.height = height;
    this.width = width;
    console.log('Rectangle created');
  }
  increase(num) {
    this.width *= num;
    this.height *= num
    console.log('Now figure has width', this.width, 'and height', this.height);
  }
}

class Square extends Rectangle{
  constructor(size){
    super(size, size);
    console.log('Square created');
  }
  increaseTwice() {
    super.increase(2);
  }
}

square = new Square(5);
square.increase(4);
square.increaseTwice();

Tarea

Create Rectangle and Square objects and call box() method for them.

Overriding attributes

Cambia al escritorio para practicar en el mundo realContinúe desde donde se encuentra utilizando una de las siguientes opciones

Sección 4. Capítulo 3

Cambia al escritorio para practicar en el mundo realContinúe desde donde se encuentra utilizando una de las siguientes opciones