How to access super class method inside of internal generator function?

Question

Look at this classes, Base and Derived, it's just simple classes that has "name" as property:

class Base {
    constructor(name) {
        this.name = name;
    }
    printName() {
        console.log("Base: " + this.name);
    }
}

class Derieved extends Base {
    constructor(name) {
        super(name);
    }
    // Override
    printName() {
        // IIFE.
        (function() {
            super.printName();  // Can't use super here
        })();

        console.log("Derived: " + this.name);
    }
}

var obj = new Derieved('John');
obj.printName();

I want to invoke Base::printName from Derieved::printName. But some reason, I have to invoke inside of internal function of Derieved::printName.

But run above code, it fails with:

SyntaxError: 'super' keyword unexpected here

If I saved the reference of parent's method to variable, looks like it can called but can't access any properties, it saids undefined.

TypeError: Cannot read property 'name' of undefined

I just wrote that internal function is just normal function, but actually it's generator function, so I can't use arrow function:

get(match: T, options: IQueryOptions|void): Promise<Array<Object>|Error> {
    const superGet = super.get;

    return new Promise((resolve, reject) => {
        co(function*() {
            try {
                    // I need to invoke parent's get method here!!
                const accounts = yield superGet(match, options);

                ... // do something with accounts

                resolve(accounts);
            }
            catch(err) {
                ...
            }
        });
    });
}

Is there a way to to this? Why I can't save the reference of parent's method into variable?

Please, provide more details on your setup for clarity. Does `co` refer to https://github.com/tj/co ? Is it Babel+Flow or Typescript? — Estus Flask, Oct 11 '17 at 09:40
@estus https://www.npmjs.com/package/co, and no, it's Node 6.9.2. — modernator, Oct 11 '17 at 10:00

score 3 · Accepted Answer · answered Oct 11 '17 at 09:59

super can be accessed only from child method, not from the scope of functions that are called inside this method.

Generator functions are still functions and support binding. This will result in bound function that cannot be identified as generator function by its signature, but as long as coroutine library supports generic iterators (co does), that's fine.

So basically it is

get(...) {
    const superGet = super.get;

    return new Promise((resolve, reject) => {
        co(function*() {
              ...
              const accounts = yield superGet.call(this, match, options);
              ...
        }.bind(this));
    });
}

Or even better:

get(...) {
    const superGet = super.get.bind(this);

    return new Promise((resolve, reject) => {
        co(function*() {
              ...
              const accounts = yield superGet(match, options);
              ...
        });
    });
}

There are several things that can be improved here. The first one is that it uses promise constructor antipattern. co already returns a promise, there's no need to wrap it with new Promise.

Another thing is that it is beneficial to separate generator method and promisified method, for the sake of seamless inheritance. co supports delegated yields, it makes this even easier:

class Base {
  get(...args) {
    return co(this._get.bind(this, ...args));
  }

  * _get(...) { ... }
}

class Child extends Base {
  * _get(...) {
    ...
    const accounts = yield* super._get(match, options);
    ...
  }
}

Both TypeScript and Babel support ES2017 async..await and are are able to fall back to co-like generator coroutines in ES6 target output. This makes co efficiently useless in transpiled JS projects, the code above becomes:

class Child extends Base {
  async get(...) {
    ...
    const accounts = await super.get(match, options);
    ...
  }
}

Or even better: `const superGet = (...args) => super.get(...args);` — Bergi, Oct 11 '17 at 10:04
That's correct. I consider this a matter of style. I personally prefer binds because I read them fluently and they are a bit less to type. — Estus Flask, Oct 11 '17 at 10:06
It's not just a matter of style, I remembered `super.method(…)` to have (slightly) different semantics than `super.method.call(this, …)` but I was wrong on that account. The only difference would be that [`.bind(this)` might not work in constructors](https://stackoverflow.com/a/32539428/1048572) in very rare cases. — Bergi, Oct 11 '17 at 10:14
That's quite a good example of the difference between them. I don't remember if I had problems with `call`, guess I didn't. — Estus Flask, Oct 11 '17 at 10:19
You're welcome. I have some legacy Node projects that require generator recipes that are listed above, and yes, it is much smoother with transpiled or Node 8 native async/await. — Estus Flask, Oct 11 '17 at 13:04

Bergi · Answer 2 · 2017-10-11T14:37:03.423

1

Apparently you employ some compiler for the type annotations anyway. In that case, the solution is to just drop the co library and generators, and use proper modern async/await syntax instead, which is supported by TypeScript, Babel and native nodejs:

async get(match: T, options: IQueryOptions|void): Promise<Array<Object>|Error> {
    try {
        const accounts = await super.get(match, options);
        … // do something
        return accounts;
    }
    catch(err) {
        …
    }
}

super will just work out of the box here.

edited Oct 11 '17 at 14:37

answered Oct 11 '17 at 10:01

Bergi

630,263
148
957
1,375

No, it's flow, not TypeScript. – modernator Oct 11 '17 at 12:39
1

@modernator Ah, right. I've updated my answer. If you use neither a modern node version nor Babel for flow-type-stripping, go with the alternatives in estus' answer (which I fully endorse but didn't want to repeat in my answer) – Bergi Oct 11 '17 at 14:38

score 0 · Answer 3 · answered Oct 11 '17 at 08:45

0

Arrow functions to the rescue!

class Base {
    constructor(name) {
        this.name = name;
    }
    printName() {
        console.log("Base: " + this.name);
    }
}

class Derieved extends Base {
    constructor(name) {
        super(name);
    }
    // Override
    printName() {
        // IIFE
        (() => {
            super.printName();  // Can't use super here
        })();

        console.log("Derived: " + this.name);
    }
}

var obj = new Derieved('John');
obj.printName();

basically, the arrow function maintains the this and super contexts, unlike the literal function keyword

answered Oct 11 '17 at 08:45

notrota

1,048
10
21

No, I can't use Arrow Function because I'm using generator. Above IIFE is actually generator function. – modernator Oct 11 '17 at 08:51
Okay, I better to edit question to generator function. – modernator Oct 11 '17 at 08:57

How to access super class method inside of internal generator function?

3 Answers3