0

I'm new to using the ES6 classes, I'm trying to figure out how to group methods within a class I'm creating for a Table so methods such as sort, resize, etc...

class Table extends someClass{
    myMethods(){
        //BLAH      
    }
    var column={
        sort:()=>{
            console.log('firing');
        },
        resize:{
            mousedown:()=>{

            },
            mousemove:()=>{

            },
            mouseup:()=>{

            },
            mouseout:()=>{

            }
        }       
    },
    var cells={
        edit:()=>{
            console.log('firing');
        }
    }
}

//ERROR (Unexpected Identifier)

The problem is the Table class is already extending the (default base class) someClass and I would say extends Column class or something but I can't since it already is extending the base class.

Question: How can I organize my methods sort,resize inside a Class which already extends another class? (or is this non-standard, and if so please provide the proper way.)

  • It's not really clear what you're asking here. Why would a table extend a column? – Evan Trimboli Nov 29 '16 at 21:03
  • @EvanTrimboli all I'm looking for is a way to organize the methods within the class, there's methods that go on table column cells vs methods that would go on table body cells, so I'm trying to organize them in such way. –  Nov 29 '16 at 21:06
  • If they are things that need their own methods, then they should be classes. – Evan Trimboli Nov 29 '16 at 21:08
  • @EvanTrimboli yeah exactly, but can I extend a class to multiple other classes? –  Nov 29 '16 at 21:09
  • No, you can't, but why would you in this case? What would be the proposed hierarchy? – Evan Trimboli Nov 29 '16 at 21:11
  • @EvanTrimboli Well say you have multiple event listeners that are associated with a resize operation, the event listeners differ in type, such as `mousedown`, `mousemove`, `mouseup`, `mouseout`, etc... so instead of creating 10 different methods under the `Table` Class it would be more clear if they were under an object which references say `resize` since thats what all the methods are related to. –  Nov 29 '16 at 21:16
  • Sorry, I don't understand your last comment, not really following the idea in general. – Evan Trimboli Nov 29 '16 at 21:21
  • "*group methods within a class*" - you don't, unless by prefixing method names. – Bergi Nov 29 '16 at 21:39
  • possible duplicate of [Organize prototype methods while preserving object reference and inheritance](http://stackoverflow.com/q/15884096/1048572) - this hasn't really changed with ES6. – Bergi Nov 29 '16 at 21:49
  • @Bergi so your saying `prefixing` is only way? if you don't use the new ES6 Classes you can organize the methods like the example above. –  Nov 29 '16 at 21:50
  • @Bergi Oh nice links, thank you, reading now. –  Nov 29 '16 at 21:51
  • It doesn't make any sense to me that a Table class would inherit anything from a Column class. A Table class might have properties that are of Column type, but the table to columns relationship is a "contains-a" not an "is-a" relationship. – PMV Nov 29 '16 at 22:07
  • @PMV yeah we've been through it already, the question was originally can you extend to multiple class (you can't). Simply looking for the best way to organize methods within a class.... –  Nov 29 '16 at 22:09

1 Answers1

0

Your code doesn't work because you are using the var keyword in the class body. You can only have methods in a class body. You can create properties for a class by setting values to them in the methods. For example:

class Table extends someClass {
    constructor() {
        this.column = {
            sort: () => {
                console.log('firing');
            },
            resize: () => {
                console.log('firing');
            }
        };

        this.cells = {
            edit: () => { 
                console.log('firing');
            }
        }

    }

    myMethods() {
        //BLAH      
    }
}

Now you can access methods like so:

var table = new Table();
table.column.sort();

This class Table syntax declares a class with type Table. The {} syntax, for example: 

{
    edit: () => { 
        console.log('firing');
    }
}

creates objects without a type.

Here's a guide on ES6 classes which should answer your other questions.

0xcaff
  • 13,085
  • 5
  • 47
  • 55
  • The structure doesn't really make sense though. Why would you calls `cells.edit` or `columns.sort`? Seems like these methods would belong on some kind of `Cell` or `Column` class. – Evan Trimboli Nov 29 '16 at 21:29
  • can you have two constructors I thought the constructor had to be in the parent class? –  Nov 29 '16 at 21:33
  • @EvanTrimboli thats the point I was trying to make but how could table inherit from the multiple classes... `Cell`, `Column`, `Base` –  Nov 29 '16 at 21:34
  • @caffinatedmonkey nice yeah I see from the example in the link. –  Nov 29 '16 at 21:39
  • Why would the table inherit from multiple classes? Inheritance is supposed to be an "is-a" relationship. A table is not a cell, or a column. – Evan Trimboli Nov 29 '16 at 21:39
  • @EvanTrimboli thats what I was saying I'm confused on... either you can inherit from multiple class (which you can't), it looks like you can have a difference in the constructor as per the link caffinatedmonkey just posted. –  Nov 29 '16 at 21:42
  • @EvanTrimboli it's really disorganized to have like 10 methods related to 'resizing' under the base class in my opinion, the methods should be related to specifically whats happening. –  Nov 29 '16 at 21:44
  • Why would you have 10 methods related to resizing? If you need to group a bunch of stuff together, it typically means you need a class there. – Evan Trimboli Nov 29 '16 at 21:46
  • @EvanTrimboli I already gave you in example... different event listeners on the element that "resizes", if some `mousedown`, then `drags` then move the mouse `out` or releases the mouse `mouseup`.... It looks horrible to have 10 methods only relating to the Table's columns whereas other functions aren't related to the Table columns.... –  Nov 29 '16 at 22:00