Breaking up an ES6 class into multiple files

Question

With a JavaScript 'class' (not really a class, I know), it's possible to break up a big definition by putting methods in separate files, like this:

var Foo = function () {
  console.log('initializing foo');
};

Foo.prototype.render = require('./render');

But with ES6 classes, it looks like the syntax rules out this approach – it seems the methods always have to be written as function literals inside the class block.

I tried this in the 6to5 REPL:

class Foo {
  constructor() {
    console.log('initializing foo');
  }

  require('./render');
}

...but it errors.

As an example, CoffeeScript's class syntax allows me to do this:

class Foo
  constructor: ->
    console.log 'initializing foo'

  render: require './render'

Is there really no way to do this with ES6 classes?

score 13 · Accepted Answer · answered Jan 17 '15 at 07:06

13

Classes are just syntactic sugar. So you can do

class Foo {
  constructor() {
    console.log('initializing foo');
  }
}

Foo.prototype.render = require('./render');

Or you could create a getter:

class Foo {
  constructor() {
    console.log('initializing foo');
  }

  get render() {
    return require('./render');
  }
}

answered Jan 17 '15 at 07:06

Felix Kling

795,719
175
1,089
1,143

2

What about accessing `this` within those methods? – Nathan H Sep 14 '17 at 12:07
@NathanH: what about it? Except for arrow functions, the value of `this` depends on how a function a function is *called*, not how it was created. – Felix Kling Sep 14 '17 at 14:44
Thanks I think that was it, I was probably using the arrow syntax. – Nathan H Sep 18 '17 at 08:55

score 1 · Answer 2 · answered Jan 16 '15 at 14:08

1

What about this?

class Foo {
  constructor() {
    console.log('initializing foo');
  }

  render() { 
    require('./render'); 
  }
}

answered Jan 16 '15 at 14:08

mutil

3,205
1
27
34

Breaking up an ES6 class into multiple files

2 Answers2