Javascript Classes

class Foo {}

class Foo extends Bar {}

class Foo { constructor() {} }

class Foo { myMethod() {} }

class Foo { get myProperty() {} }

class Foo { set myProperty(newValue) {} }

class Foo { static myStaticMethod() {} }

class Foo { static get myStaticProperty() {} }

const Foo = class Foo {};

const Foo = class {};

Section 6.1: Class Constructor

The fundamental part of most classes is its constructor, which sets up each instance's initial state
and handles any

parameters that were passed when calling new.

It's defined in a class block as though you're defining a method named constructor, though it's
actually handled

as a special case.

class MyClass {

constructor(option) {

console.log(`Creating instance using ${option} option.`);

this.option = option;

Complete JavaScript™ Tips & Secrets for Professionals 79

Example usage:

const foo = new MyClass('speedy'); // logs: "Creating instance using speedy option"
A small thing to note is that a class constructor cannot be made static via the static keyword, as
described below

for other methods.

Section 6.2: Class Inheritance

Inheritance works just like it does in other object-oriented languages: methods defined on the
superclass are

accessible in the extending subclass.

If the subclass declares its own constructor then it must invoke the parents constructor via super()
before it can

access this.

class SuperClass {

constructor() {

this.logger = console.log;

log() {

this.logger(`Hello ${this.name}`);

class SubClass extends SuperClass {

constructor() {

super();

this.name = 'subclass';

const subClass = new SubClass();

subClass.log(); // logs: "Hello subclass"

Section 6.3: Static Methods

Static methods and properties are defined on the class/constructor itself, not on instance objects.
These are specified

in a class definition by using the static keyword.

class MyClass {

static myStaticMethod() {

return 'Hello';

static get myStaticProperty() {

return 'Goodbye';

console.log(MyClass.myStaticMethod()); // logs: "Hello"

console.log(MyClass.myStaticProperty); // logs: "Goodbye"

We can see that static properties are not defined on object instances:

const myClassInstance = new MyClass();

Complete JavaScript™ Tips & Secrets for Professionals 80

console.log(myClassInstance.myStaticProperty); // logs: undefined

However, they are defined on subclasses:

class MySubClass extends MyClass {};

console.log(MySubClass.myStaticMethod()); // logs: "Hello"

console.log(MySubClass.myStaticProperty); // logs: "Goodbye"

Section 6.4: Getters and Setters

Getters and setters allow you to define custom behaviour for reading and writing a given property
on your class. To

the user, they appear the same as any typical property. However, internally a custom function you
provide is used

to determine the value when the property is accessed (the getter), and to preform any necessary
changes when the

property is assigned (the setter).

In a class definition, a getter is written like a no-argument method prefixed by the get keyword. A
setter is similar,

except that it accepts one argument (the new value being assigned) and the set keyword is used
instead.
Here's an example class which provides a getter and setter for its .name property. Each time it's
assigned, we'll

record the new name in an internal .names_ array. Each time it's accessed, we'll return the latest
name.

class MyClass {

constructor() {

this.names_ = [];

set name(value) {

this.names_.push(value);

get name() {

return this.names_[this.names_.length - 1];

const myClassInstance = new MyClass();

myClassInstance.name = 'Joe';

myClassInstance.name = 'Bob';

console.log(myClassInstance.name); // logs: "Bob"

console.log(myClassInstance.names_); // logs: ["Joe", "Bob"]

If you only define a setter, attempting to access the property will always return undefined.

const classInstance = new class {

set prop(value) {

console.log('setting', value);

};

classInstance.prop = 10; // logs: "setting", 10

console.log(classInstance.prop); // logs: undefined

If you only define a getter, attempting to assign the property will have no effect.

const classInstance = new class {

get prop() {

return 5;

Complete JavaScript™ Tips & Secrets for Professionals 81

};

classInstance.prop = 10;

console.log(classInstance.prop); // logs: 5

Section 6.5: Private Members

JavaScript does not technically support private members as a language feature. Privacy - described
by Douglas

Crockford - gets emulated instead via closures (preserved function scope) that will be generated
each with every

instantiation call of a constructor function.

The Queue example demonstrates how, with constructor functions, local state can be preserved
and made

accessible too via privileged methods.

class Queue {

constructor () { // - does generate a closure with each instantiation.

const list = []; // - local state ("private member").

this.enqueue = function (type) { // - privileged public method

// accessing the local state

list.push(type); // "writing" alike.

return type;

};

this.dequeue = function () { // - privileged public method

// accessing the local state

return list.shift(); // "reading / writing" alike.

};

}
var q = new Queue; //

//

q.enqueue(9); // ... first in ...

q.enqueue(8); //

q.enqueue(7); //

//

console.log(q.dequeue()); // 9 ... first out.

console.log(q.dequeue()); // 8

console.log(q.dequeue()); // 7

console.log(q); // {}

console.log(Object.keys(q)); // ["enqueue","dequeue"]

With every instantiation of a Queue type the constructor generates a closure.

Thus both of a Queue type's own methods enqueue and dequeue (see Object.keys(q)) still do have
access to list

that continues to live in its enclosing scope that, at construction time, has been preserved.

Making use of this pattern - emulating private members via privileged public methods - one should
keep in mind

that, with every instance, additional memory will be consumed for every own property method
(for it is code that

can't be shared/reused). The same is true for the amount/size of state that is going to be stored
within such a

closure.

Section 6.6: Methods

Methods can be defined in classes to perform a function and optionally return a result.

They can receive arguments from the caller.

Complete JavaScript™ Tips & Secrets for Professionals 82

class Something {

constructor(data) {

this.data = data

}
doSomething(text) {

return {

data: this.data,

text

var s = new Something({})

s.doSomething("hi") // returns: { data: {}, text: "hi" }

Section 6.7: Dynamic Method Names

There is also the ability to evaluate expressions when naming methods similar to how you can
access an objects'

properties with []. This can be useful for having dynamic property names, however is often used in
conjunction

with Symbols.

let METADATA = Symbol('metadata');

class Car {

constructor(make, model) {

this.make = make;

this.model = model;

// example using symbols

[METADATA]() {

return {

make: this.make,

model: this.model

};

// you can also use any javascript expression

// this one is just a string, and could also be defined with simply add()
["add"](a, b) {

return a + b;

// this one is dynamically evaluated

[1 + 2]() {

return "three";

let MazdaMPV = new Car("Mazda", "MPV");

MazdaMPV.add(4, 5); // 9

MazdaMPV[3](); // "three"

MazdaMPV[METADATA](); // { make: "Mazda", model: "MPV" }

Section 6.8: Managing Private Data with Classes

One of the most common obstacles using classes is finding the proper approach to handle private
states. There are

4 common solutions for handling private states:

Complete JavaScript™ Tips & Secrets for Professionals 83

Using Symbols

Symbols are new primitive type introduced on in ES2015, as defined at MDN

A symbol is a unique and immutable data type that may be used as an identifier for object
properties.

When using symbol as a property key, it is not enumerable.

As such, they won't be revealed using for var in or Object.keys.

Thus we can use symbols to store private data.

const topSecret = Symbol('topSecret'); // our private key; will only be accessible on the scope of

the module file

export class SecretAgent{

constructor(secret){

this[topSecret] = secret; // we have access to the symbol key (closure)

this.coverStory = 'just a simple gardner';

this.doMission = () => {

figureWhatToDo(topSecret[topSecret]); // we have access to topSecret

};

Because symbols are unique, we must have reference to the original symbol to access the private
property.

import {SecretAgent} from 'SecretAgent.js'

const agent = new SecretAgent('steal all the ice cream');

// ok lets try to get the secret out of him!

Object.keys(agent); // ['coverStory'] only cover story is public, our secret is kept.

agent[Symbol('topSecret')]; // undefined, as we said, symbols are always unique, so only the

original

symbol will help us to get the data.

But it's not 100% private; let's break that agent down! We can use the
Object.getOwnPropertySymbols method to

get the object symbols.

const secretKeys = Object.getOwnPropertySymbols(agent);

agent[secretKeys[0]] // 'steal all the ice cream' , we got the secret.

Using WeakMaps

WeakMap is a new type of object that have been added for es6.

As defined on MDN

The WeakMap object is a collection of key/value pairs in which the keys are weakly referenced.
The keys must be

objects and the values can be arbitrary values.

Another important feature of WeakMap is, as defined on MDN.

The key in a WeakMap is held weakly. What this means is that, if there are no other strong
references to the key,

the entire entry will be removed from the WeakMap by the garbage collector.

The idea is to use the WeakMap, as a static map for the whole class, to hold each instance as key
and keep the
private data as a value for that instance key.

Thus only inside the class will we have access to the WeakMap collection.

Let's give our agent a try, with WeakMap:

Complete JavaScript™ Tips & Secrets for Professionals 84

const topSecret = new WeakMap(); // will hold all private data of all instances.

export class SecretAgent{

constructor(secret){

topSecret.set(this,secret); // we use this, as the key, to set it on our instance private

data

this.coverStory = 'just a simple gardner';

this.doMission = () => {

figureWhatToDo(topSecret.get(this)); // we have access to topSecret

};

Because the const topSecret is defined inside our module closure, and since we didn't bind it to
our instance

properties, this approach is totally private, and we can't reach the agent topSecret.

Define all methods inside the constructor

The idea here is simply to define all our methods and members inside the constructor and use the
closure to access

private members without assigning them to this.

export class SecretAgent{

constructor(secret){

const topSecret = secret;

this.coverStory = 'just a simple gardner';

this.doMission = () => {

figureWhatToDo(topSecret); // we have access to topSecret

};

}
}

In this example as well the data is 100% private and can't be reached outside the class, so our
agent is safe.

Using naming conventions

We will decide that any property who is private will be prefixed with _.

Note that for this approach the data isn't really private.

export class SecretAgent{

constructor(secret){

this._topSecret = secret; // it private by convention

this.coverStory = 'just a simple gardner';

this.doMission = () => {

figureWhatToDo(this_topSecret);

};

Section 6.9: Class Name binding

ClassDeclaration's Name is bound in different ways in different scopes -

1. The scope in which the class is defined - let binding

2. The scope of the class itself - within { and } in class {} - const binding

class Foo {

// Foo inside this block is a const binding

// Foo here is a let binding

For example,

Complete JavaScript™ Tips & Secrets for Professionals 85

class A {

foo() {

A = null; // will throw at runtime as A inside the class is a `const` binding

}
}

A = null; // will NOT throw as A here is a `let` binding

This is not the same for a Function -

function A() {

A = null; // works

A.prototype.foo = function foo() {

A = null; // works

A = null; // works

Clases
Las clases de javascript, introducidas en ECMAScript 2015, son una mejora
sintáctica sobre la herencia basada en prototipos de JavaScript. La sintaxis de las
clases no introduce un nuevo modelo de herencia orientada a objetos en
JavaScript. Las clases de JavaScript proveen una sintaxis mucho más clara y simple
para crear objetos y lidiar con la herencia.

Definiendo clases
Las clases son "funciones especiales", como las expresiones de funciones y declaraciones
de funciones, la sintaxis de una clase tiene dos componentes: expresiones de
clases y declaraciones de clases.

Declaración de clases

Una manera de definir una clase es mediante una declaración de clase. Para declarar una
clase, se utiliza la palabra reservada class y un nombre para la clase "Rectangulo".

class Rectangulo {
constructor(alto, ancho) {
this.alto = alto;
this.ancho = ancho;
}
}
Copy to Clipboard

Alojamiento

Una importante diferencia entre las declaraciones de funciones y las declaraciones de

clases es que las declaraciones de funciones son alojadas y las declaraciones de clases no
lo son. En primer lugar necesitas declarar tu clase y luego acceder a ella, de otro modo el
ejemplo de código siguiente arrojará un ReferenceError:

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Expresiones de clases

Una expresión de clase es otra manera de definir una clase. Las expresiones de clase
pueden ser nombradas o anónimas. El nombre dado a la expresión de clase nombrada es
local dentro del cuerpo de la misma.

// Anonima
let Rectangulo = class {
constructor(alto, ancho) {
this.alto = alto;
this.ancho = ancho;
}
};

console.log(Rectangulo.name);
// output: "Rectangulo"

// Nombrada
let Rectangulo = class Rectangulo2 {
constructor(alto, ancho) {
this.alto = alto;
this.ancho = ancho;
}
};
console.log(Rectangulo.name);
// output: "Rectangulo2"
Nota: Las expresiones de clase están sujetas a las mismas restricciones de elevación que se
describen en la sección Class declarations.

Cuerpo de la clase y definición de métodos

El contenido de una clase es la parte que se encuentra entre las llaves {}. Este es el lugar se
definen los miembros de clase, como los métodos o constructores.

Modo estricto
El cuerpo de las declaraciones de clase y las expresiones de clase son ejecutadas en modo
estricto. En otras palabras, el código escrito aquí está sujeto a una sintaxis más estricta para
aumentar el rendimiento, se arrojarán algunos errores silenciosos y algunas palabras clave
están reservadas para versiones futuras de ECMAScript.

Constructor

El método constructor es un método especial para crear e inicializar un objeto creado con
una clase. Solo puede haber un método especial con el nombre "constructor" en una clase.
Si esta contiene mas de una ocurrencia del método constructor, se arrojará
un Error SyntaxError

Un constructor puede usar la palabra reservada super para llamar al constructor de

una superclase

Métodos prototipo

Vea también métodos definidos.

class Rectangulo {
constructor (alto, ancho) {
this.alto = alto;
this.ancho = ancho;
}
// Getter
get area() {
return this.calcArea();
}
// Método
calcArea () {
return this.alto * this.ancho;
}
}

const cuadrado = new Rectangulo(10, 10);

console.log(cuadrado.area); // 100
Copy to Clipboard

Métodos estáticos

La palabra clave static define un método estático para una clase. Los métodos estáticos son
llamados sin instanciar su clase y no pueden ser llamados mediante una instancia de clase.
Los métodos estáticos son a menudo usados para crear funciones de utilidad para una
aplicación.

class Punto {
constructor ( x , y ){
this.x = x;
 this.y = y;
}

static distancia ( a , b) {
const dx = a.x - b.x;
const dy = a.y - b.y;

return Math.sqrt ( dx * dx + dy * dy );
}
}

const p1 = new Punto(5, 5);

const p2 = new Punto(10, 10);

console.log (Punto.distancia(p1, p2)); // 7.0710678118654755

Copy to Clipboard

"Boxing" con prototipos y métodos estáticos

Cuando un método estático o método del prototipo es llamado sin un valor para "this" (o
con "this" como booleano, cadena, número, undefined o null), entonces el valor de "this"
será undefined dentro de la funciona llamada. Autoboxing no ocurrirá. El comportamiento
será igual inclusive si se escribe el código en modo no estricto.

class Animal {
hablar() {
return this;
}
static comer() {
return this;
}
}

let obj = new Animal();

obj.hablar(); // Animal {}
let hablar = obj.hablar;
hablar(); // undefined

Animal.comer() // class Animal

let comer = Animal.comer;
comer(); // undefined

Si se escribe el código del cuadro superior usando clases función tradicionales, entonces
autoboxing ocurrirara porque tomará valor de "this" sobre la función que es llamada.

function Animal() { }

Animal.prototype.hablar = function(){
return this;
}

Animal.comer = function() {
 return this;
}

let obj = new Animal();

let hablar = obj.hablar;
hablar(); // global object

let hablar = Animal.hablar;

hablar(); // global object

Subclases con extends

La palabra clave extends es usada en declaraciones de clase o expresiones de clase para
crear una clase hija.

class Animal {
constructor(nombre) {
this.nombre = nombre;
}

hablar() {
console.log(this.nombre + ' hace un ruido.');
}
}

class Perro extends Animal {

hablar() {
console.log(this.nombre + ' ladra.');
}
}
Copy to Clipboard

También se pueden extender las clases tradicionales basadas en funciones:

function Animal (nombre) {

this.nombre = nombre;
}
Animal.prototype.hablar = function () {
console.log(this.nombre + 'hace un ruido.');
}

class Perro extends Animal {

hablar() {
super.hablar();
console.log(this.nombre + ' ladra.');
}
}

var p = new Perro('Mitzie');

p.hablar();
Copy to Clipboard
Fijarse que las clases no pueden extender objectos regulares (literales). Si se quiere heredar
de un objecto regular, se debe user Object.setPrototypeOf()::

var Animal = {
hablar() {
console.log(this.nombre + ' hace ruido.');
},
comer() {
console.log(this.nombre + ' se alimenta.');
}
};

class Perro {
constructor(nombre) {
this.nombre = nombre;
}
hablar() {
console.log(this.nombre + ' ladra.');
}
}

// Solo adjunta los métodos aún no definidos

Object.setPrototypeOf(Perro.prototype, Animal);

var d = new Perro('Mitzie');

d.hablar(); // Mitzie ladra.
d.comer(); // Mitzie se alimenta.

Especies
Quizás se quiera devolver objetos Array derivados de la clase array MyArray. El
patron species permite sobreescribir constructores por defecto.

Por ejemplo, cuando se usan metodos del tipo map() que devuelven el constructor por
defecto, se quiere que esos métodos devuelvan un objeto padre Array, en vez de MyArray.
El símbolo Symbol.species permite hacer:

class MyArray extends Array {

// Sobreescribe species sobre el constructor padre Array
static get [Symbol.species]() { return Array; }
}

var a = new MyArray(1,2,3);

var mapped = a.map(x => x * x);

console.log(mapped instanceof MyArray); // false

console.log(mapped instanceof Array); // true
Copy to Clipboard

Llamadas a súperclases con super

La palabra clave super es usada para llamar funciones del objeto padre.

class Gato {
constructor(nombre) {
this.nombre = nombre;
}

hablar() {
console.log(this.nombre + ' hace ruido.');
}
}

class Leon extends Gato {

hablar() {
super.hablar();
console.log(this.nombre + ' maulla.');
}
}

Mix-ins
Subclases abstractas or mix-ins son plantillas de clases. Una clase ECMAScript solo puede
tener una clase padre, con lo cual la herencia multiple no es posible. La funcionalidad debe
ser proporcionada por la clase padre.

Una función con una clase padre como entrada y una subclase extendiendo la clase padre
como salida puede ser usado para implementar mix-ins en EMCAScript:

var calculatorMixin = Base => class extends Base {

calc() { }
};

var randomizerMixin = Base => class extends Base {

randomize() { }
};
Copy to Clipboard

Una clase que use este método puede ser escrita tal que así:

class Foo { }
class Bar extends calculatorMixin(randomizerMixin(Foo)) { }
Copy to Clipboard

Especificaciones
Specification
ECMAScript Language Specification
# sec-class-definitions