CLASSY

An introduction to ES6 classes

example

// Base class
class Animal {
    constructor({hasClaws}) {
        this._hasClaws = hasClaws;
    }
    hasClaws() {
        return this._hasClaws;
    }
}

// Derived class
class Cat extends Animal {
    constructor({hasClaws, purrs}) {
        super({hasClaws});
        this._purrs = purrs;
    }
    purrs() {
        return this._purrs;
    }
}

USAGE

const chaos = new Cat({hasClaws: true, purrs: true});

chaos.hasClaws();
chaos.purrs();

chaos instanceof Cat; // true
chaos instanceof Animal; // true
new Animal();     // ReferenceError

class Animal {
    
    prop: 6,                              // SyntaxError

    constructor({hasClaws}) {
        this._hasClaws = hasClaws;
    },                                    // SyntaxError
    
    ;                                     // ignored
    
    hasClaws() {                          // required syntax
        return this._hasClaws;
    }
}                                         // no semi-colon

typeof Animal     // "function" - just like an ES5 constructor function..
Animal();         // TypeError (but you have to use new)
new Animal();     // ✅

SAME SAME

(BUT DIFFERENT)

// anonymous
const Walrus = class Walrus {
    hasTusks(){
        return true;
    }
};
const wilfred = new Walrus();

// named
const Walrus = class Walrus {
    name(){
        return Walrus.name;
    }
};
const wilfred = new Walrus();
wilfred.name(); // 'Walrus'

expressions

const dynamic = 'methodName';

class Foo {
    constructor(prop) {
        this.prop = prop;
    }
    static staticMethod() {
        return 'classy';
    }
    prototypeMethod() {
        return 'prototypical';
    }
    [dynamic]() {
        return 'snazzy';
    }
}

const foo = new Foo(123);
Foo.staticMethod(); // 'classy'
foo.prototypeMethod(); // 'prototypical'
typeof foo.methodName; // 'function'

class methods

class Cat extends Animal {
    constructor({hasClaws, purrs}) {
        // note the change in syntax
        // super() only works in the constructor
        // you must call super before using this
        super({hasClaws});      
        this._purrs = purrs;
    }

    hasFur() {
        // here we must use super[prop]
        return super.hasFur() && !this.isSphinx;
    }
}

// The prototype of a subclass is the superclass:
Object.getPrototypeOf(Cat) === Animal; // true

sub-classes

It is an error to define a constructor in a derived class but leave it empty (not calling super).

THE FUTURE

class Cat extends Animal {   
    purrs = true;
    #hasFur;

    constructor({hasClaws, hasFur}) {
        super({hasClaws});
        this.#hasFur = hasFur;
    }
}

class fields

https://github.com/tc39/proposal-class-fields

mixins

// loudNoises is a function. Base is a variable, not an actual class
const loudNoises = Base => class extends Base {
    shout() { ··· }
    roar() { ··· }
    growl() { ··· }
};

class Cat extends loudNoises(Animal) {}

// This can keep going and going
class Cat extends climbsThings(movesQuickly(loudNoises(Animal))) {}

MIXINS

Mixins are not natively supported in ES6. There are a couple of different approaches we can use to implement them. This is the one we're going to use.

the end

ES6 Classes

By Helen Durrant

ES6 Classes

  • 63
Loading comments...

More from Helen Durrant