Introducción a Javascript

En post anteriores aprendimos lo más básico sobre Javascript, sus tipos y alguna estructura de control. En este post aprenderemos como implementa Javascript el paradigma de programación orientado a objetos. Javascript fue creado inicialmente con un sistema de clases basados en prototipos. Esta nueva sintaxis provee una forma más clara, sencilla y parecida al resto de lenguajes de programación.

Para crear nuestras propias clases simplemente tenemos que utilizar la sintaxis que nos provee Javascript para ello:

class Person {
  #name
  #lastName

  constructor(name, lastName) {
    this.#name = name
    this.#lastName = lastName
  }

  get fullName () {
    return `${this.#name} ${this.#lastName}`
  }

  set fullName (fullName) {
    const nameSplitted = fullName.split(' ')

    this.#name = nameSplitted[0]
    this.#lastName = nameSplitted[1]
  }
}

Crearemos clases con la palabra reservada class. Cuando instanciemos nuevos objetos de esa clase, se ejecutará la función especial constructor. Las variables como #name son atributos privados de la clase, inaccesibles desde fuera. Con get podemos crear propiedades nuevas y con set podremos asignar valores.

const boy = new Person('pepe', 'garcía')
console.log(boy.fullName) // pepe garcía

boy.fullName = 'pepo perez'

console.log(boy.fullName) // 'pepo perez'

Podemos crear instancias de esa clase usando new. Los parámetros que le pasemos son los que recibe el constructor. Se puede ver como funciona el get y el set sobre fullName tanto para obtener su valor, como para asignar de nuevo las propiedades privadas name y lastName.

Así de fácil hemos creado una clase custom. Los Arrays nativos internamente están creados de la misma forma. Podremos crearlo también de la siguiente manera:

const arr = new Array(1, 2, 3, 4)
console.log(arr) //  [1, 2, 3, 4]

Una de las partes más importantes del paradigma orientado a objetos es la herencia entre clases. Una herencia no es más que definir una nueva clase con la lógica de la clase que queremos heredar, más nuevas propiedades. Por ejemplo:

class Student extends Person {
  #school
  constructor(name, lastName, school) {
    super(name, lastName)

    this.#school = school
  }

  get school () {
    return this.#school
  }
}

Creamos una nueva clase Student que hereda de Person usando la sintaxis extends. En el constructor podremos llamar al constructor de Person llamando al método super.

const pepe = new Student('pepe', 'garcía', 'Colegio falso')
console.log('pepe.fullName') // 'pepe garcía'
console.log('pepe.school') // 'Colegio falso'

Tras la instancia podremos ver que tenemos la lógica tanto de Person como de Student.

Las clases son muy útiles, y esto no es más que una pequeña introducción a ellas. Podremos ir aprendiendo mas de ellas en próximos tutoriales.