V
V
Vladimir Kozhin2015-12-20 18:12:47
JavaScript
Vladimir Kozhin, 2015-12-20 18:12:47

How to inherit an es6 class in the normal way and how to document them?

Once again I try to start using classes from es2015 (es6), but I always run into problems.
Help solve some of them (if possible).
Condition:
The code should work natively (without babel) in nodejs/chrome
Tasks:
1. Code navigation (as well as code highlighting, autocomplete) should work well in the IDE (PhpStorm/WebStorm) - now the IDE does not see methods, lends does not give no effect, what jsdoc should i write?
2. It should be possible to inherit es6 classes by ordinary classes (functions with prototypal inheritance) - now the error "Class constructors cannot be invoked without 'new'" occurs, which is quite logical, because classes in es6 are made this way, but how to get around this for inheritance - unclear. I googled a lot, I saw that they did something for this in Angular, but I didn’t understand what exactly.
Code example (4 files):
models/Animal.js

'use strict';

/**
 * @namespace app.models
 */
app.models = app.models || {};

/**
 * @class app.models.Animal
 */
app.models.Animal = class /** @lends app.models.Animal.prototype */{

    static food() {
        return ['meat'];
    }

    constructor(name) {
        this._name = name;
    }

    get name() {
        return this._name;
    }

    say() {
        console.log(this.name + ', go eat: ' + this.constructor.food().join(', '));
    }

}

models/Cat.js
'use strict';

require('./Animal');

/**
 * @namespace app.models
 */
app.models = app.models || {};

/**
 * @class app.models.Dog
 * @extends app.models.Animal
 */
app.models.Cat = function(name, color) {
    // Short extend
    app.models.Animal.prototype.constructor.call(this, name)

    this._color = color;
}

// Short extend
var a = function() {};a.prototype = app.models.Animal.prototype;
app.models.Cat.prototype = new a();

app.models.Cat.prototype.getColor = function() {
    return this._color;
}

models/Dog.js
'use strict';

require('./Animal');

/**
 * @namespace app.models
 */
app.models = app.models || {};

/**
 * @class app.models.Dog
 * @extends app.models.Animal
 */
app.models.Dog = class extends app.models.Animal /** @lends app.models.Dog.prototype */{

    static food() {
        return super.food().concat('bone');
    }

    constructor(name, age) {
        super(name);
        this._age = age;
    }

    get age() {
        return this._age;
    }

}

index.js
'use strict';

global.app = {};

require('./models/Animal');
require('./models/Dog');
require('./models/Cat');

var dog = new app.models.Dog('Cooper', 3); // ok, class Dog found

console.log(dog._name); // ok, private name found

dog.say(); // IDE not found prototype methods
dog.age; // IDE not found prototype methods

app.models.Dog.food(); // IDE not found static methods

// Try extend without "class .. extends .."
var cat = new app.models.Cat('Barsik', 'orange'); // TypeError: Class constructors cannot be invoked without 'new'

Please test your suggestions on this example before giving advice.
I will be very grateful for your help!!

Answer the question

In order to leave comments, you need to log in

1 answer(s)
S
Sergey Sova, 2015-12-21
@LestaD

class Animal {
  // ... some code
}

class Cat extends Animal {
  meow() {
    return this.voice.invoke();
  }
}

class Dog extends Animal {
  woof() {
    return this.voice.invoke(this.volume);
  }
}

Read the class specification before asking questions, please.
You decide what you want in your project, either ES6 or classic JS.
Please do not mix different approaches.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question