es6 classes reopen without extend

application.route.js

import Ember from 'ember';

class ApplicationRoute extends Ember.Route {
  beforeModel() {
    super.beforeModel(...arguments);
    console.log('ApplicationRoute: native beforeModel');
  }
}

export default ApplicationRoute;

application.template.hbs

<ul>
  <li>{{#link-to 'reopened'}}reopened (no extend){{/link-to}}</li>
  <li>{{#link-to 'reopened-extend'}}reopened (with extend){{/link-to}}</li>
  <li>{{#link-to 'unopened'}}unopened{{/link-to}}</li>
</ul>
{{outlet}}

reopened-extend.route.js

import Ember from 'ember';

class ReopenedWithExtend extends Ember.Route.extend(
  // Empty extend block
) {
  beforeModel() {
    super.beforeModel(...arguments);
    console.log('Reopened (with extend): native beforeModel');
  }
}

// With the empty extend block above, this reopen only affects this one route 
ReopenedWithExtend.reopen({
  init() {
    this._super(...arguments);

    const originalBeforeModel = this.beforeModel;
    this.beforeModel = function() {
      console.log('Reopened (with extend): injected beforeModel');
      originalBeforeModel.apply(this, arguments);
    };
  },
});

export default ReopenedWithExtend;

reopened-extend.template.hbs

<h3>reopened (with extend)</h3>

expected console logs:
<pre>----- will transition -----
Reopened (with extend): injected beforeModel
Reopened (with extend): native beforeModel
----- did transition -----</pre>

actual:
<pre>----- will transition -----
Reopened (with extend): injected beforeModel
Reopened (no extend): injected beforeModel
Reopened (with extend): native beforeModel
----- did transition -----</pre>

reopened.route.js

import Ember from 'ember';

class ReopenedRoute extends Ember.Route {
  beforeModel() {
    super.beforeModel(...arguments);
    console.log('Reopened (no extend): native beforeModel');
  }
}

// Without .extend() above, this reopen appears to affect all routes?
// Compare reopened-extend/route.js
ReopenedRoute.reopen({
  init() {
    this._super(...arguments);

    const originalBeforeModel = this.beforeModel;
    this.beforeModel = function() {
      console.log('Reopened (no extend): injected beforeModel');
      originalBeforeModel.apply(this, arguments);
    };
  },
});

export default ReopenedRoute;

reopened.template.hbs

<h3>reopened (no extend)</h3>
expected console logs:
<pre>
----- will transition -----
Reopened (no extend): injected beforeModel
Reopened (no extend): native beforeModel
----- did transition -----
</pre>

This one works as expected.

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL,
  willTransition() {
      console.log('----- will transition -----');
  },
  didTransition() {
      console.log('----- did transition -----');
  },
});

Router.map(function() {
  this.route('unopened');
  this.route('reopened');
  this.route('reopened-extend');
});

export default Router;

twiddle.json

{
  "version": "0.13.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}

unopened.route.js

import Ember from 'ember';

class ClosedRoute extends Ember.Route {
  beforeModel() {
    super.beforeModel(...arguments);
    console.log('Unopened: native beforeModel');
  }
}

export default ClosedRoute;

unopened.template.hbs

<h3>unopened</h3>
expected console logs:
<pre>----- will transition -----
Unopened: native beforeModel
----- did transition -----
</pre>

actual:
<pre>----- will transition -----
Reopened (no extend): injected beforeModel
Unopened: native beforeModel
----- did transition -----
</pre>