<p dir="auto">Classes <strong>with super class</strong> are very slow to <code class="notranslate">new</code>, in comparison to what babel@7.8.8 does. The difference can be found at <a href="https://fossies.org/diffs/babel/7.8.8_vs_7.9.0/packages/babel-plugin-transform-classes/test/fixtures/regression/T2997/output.js-diff.html" rel="nofollow">here</a>.</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="function test(Vec3) {
    const t1 = Date.now();
    (() =&gt; {
        for (let i = 0; i &lt; 1000000; ++i) {
            const x = Math.random();
            new Vec3(x, x, x); // Key line
        }
    })();
    const t2 = Date.now();
    console.log(`Past: ${t2 - t1}ms`);
}

test(require('./out/7.8.8/vec3.js').Vec3); // 18ms
test(require('./out/7.9.x/vec3.js').Vec3); // Oops, 2451ms!!"><pre class="notranslate"><span class="pl-k">function</span> <span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-v">Vec3</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">const</span> <span class="pl-s1">t1</span> <span class="pl-c1">=</span> <span class="pl-v">Date</span><span class="pl-kos">.</span><span class="pl-en">now</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-kos">(</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
        <span class="pl-k">for</span> <span class="pl-kos">(</span><span class="pl-k">let</span> <span class="pl-s1">i</span> <span class="pl-c1">=</span> <span class="pl-c1">0</span><span class="pl-kos">;</span> <span class="pl-s1">i</span> <span class="pl-c1">&lt;</span> <span class="pl-c1">1000000</span><span class="pl-kos">;</span> <span class="pl-c1">++</span><span class="pl-s1">i</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
            <span class="pl-k">const</span> <span class="pl-s1">x</span> <span class="pl-c1">=</span> <span class="pl-v">Math</span><span class="pl-kos">.</span><span class="pl-en">random</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
            <span class="pl-k">new</span> <span class="pl-v">Vec3</span><span class="pl-kos">(</span><span class="pl-s1">x</span><span class="pl-kos">,</span> <span class="pl-s1">x</span><span class="pl-kos">,</span> <span class="pl-s1">x</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// Key line</span>
        <span class="pl-kos">}</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-k">const</span> <span class="pl-s1">t2</span> <span class="pl-c1">=</span> <span class="pl-v">Date</span><span class="pl-kos">.</span><span class="pl-en">now</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">`Past: <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">t2</span> <span class="pl-c1">-</span> <span class="pl-s1">t1</span><span class="pl-kos">}</span></span>ms`</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span>

<span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./out/7.8.8/vec3.js'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">Vec3</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// 18ms</span>
<span class="pl-en">test</span><span class="pl-kos">(</span><span class="pl-en">require</span><span class="pl-kos">(</span><span class="pl-s">'./out/7.9.x/vec3.js'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">Vec3</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-c">// Oops, 2451ms!!</span></pre></div>
<p dir="auto">I have upload the test code to <a href="https://github.com/shrinktofit/babel-perf">this repository</a>. You can try it just by <code class="notranslate">node ./run-perf.js</code>.</p>
<blockquote>
<p dir="auto">Issue originally made by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/madole/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/madole">@madole</a></p>
</blockquote>
<h3 dir="auto">Bug information</h3>
<ul dir="auto">
<li><strong>Babel version:</strong> 6</li>
<li><strong>Node version:</strong> 5</li>
<li><strong>npm version:</strong> 3</li>
</ul>
<h3 dir="auto">Input code</h3>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="class Animal {
    constructor(name) {
        this.name = name;
    }

    async getAge() {
        const age = await getAgeFromAPI();
        return age;
    }
}

class Dog extends Animal {
    async getAge() {
        const age = await super.getAge();
        return age * 7;
    }
}"><pre class="notranslate"><span class="pl-k">class</span> <span class="pl-v">Animal</span> <span class="pl-kos">{</span>
    <span class="pl-en">constructor</span><span class="pl-kos">(</span><span class="pl-s1">name</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">name</span> <span class="pl-c1">=</span> <span class="pl-s1">name</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>

    <span class="pl-k">async</span> <span class="pl-en">getAge</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">const</span> <span class="pl-s1">age</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-en">getAgeFromAPI</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-k">return</span> <span class="pl-s1">age</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-k">class</span> <span class="pl-v">Dog</span> <span class="pl-k">extends</span> <span class="pl-v">Animal</span> <span class="pl-kos">{</span>
    <span class="pl-k">async</span> <span class="pl-en">getAge</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
        <span class="pl-k">const</span> <span class="pl-s1">age</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-smi">super</span><span class="pl-kos">.</span><span class="pl-en">getAge</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
        <span class="pl-k">return</span> <span class="pl-s1">age</span> <span class="pl-c1">*</span> <span class="pl-c1">7</span><span class="pl-kos">;</span>
    <span class="pl-kos">}</span>
<span class="pl-kos">}</span></pre></div>
<h3 dir="auto">Description</h3>
<p dir="auto">I should be able to call getAge on the Dog instance and it should call the parent's prototype method of the same name.</p>
<p dir="auto">It actually compiles to</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="class Dog extends Animal {
    getAge() {
        return (0, _bluebird.coroutine)(function* () {
            const age = yield super.getAge();
            return age * 7;
        })();
    }
}"><pre class="notranslate"><code class="notranslate">class Dog extends Animal {
    getAge() {
        return (0, _bluebird.coroutine)(function* () {
            const age = yield super.getAge();
            return age * 7;
        })();
    }
}
</code></pre></div>
<p dir="auto">Which means super is in the wrong scope... it could detect this scenario and compile to something like this..</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="class Dog extends Animal {
    getAge() {
        var _this = this;

        return (0, _bluebird.coroutine)(function* () {
            const age = yield Animal.prototype.getAge.call(_this);
            return age * 5;
        })();
    }"><pre class="notranslate"><code class="notranslate">class Dog extends Animal {
    getAge() {
        var _this = this;

        return (0, _bluebird.coroutine)(function* () {
            const age = yield Animal.prototype.getAge.call(_this);
            return age * 5;
        })();
    }
</code></pre></div>