Proposal: Improve syntax for inline anonymous class instantiations

Alexander Jones alex at weej.com
Sat Jan 7 12:45:37 UTC 2017


Hi Igor

With `super()` and closure binding of the anonymous class `constructor` (as
with all class methods) you can basically solve your problem of constructor
arguments appearing in the wrong place:

```
this.add(
    new class extends ArrayView {
        constructor() { super("items", itemsModel); }
        populateItem(item) {
            item.add(new Checkbox("check", new PropertyModel(item.model,
"done")));
            item.add(new Label("title", new PropertyModel(item.model,
"title")));
        }
    }
);
```

I concede that spelling `constructor`, `super`, and the various soup of
punctuation is a little less than ideal, but at the end of the day I think
this is quite reasonable, don't you?

Cheers

Alex

On 6 January 2017 at 22:11, Igor Vaynberg <igor.vaynberg at gmail.com> wrote:

> Given a simple class with an abstract method "populateItem"
>
> class ArrayView extends Container {
>     constructor(id, model) {
>         super(id);
>         this.model = model;
>     }
>
>     // methods referencing "populateItem" omitted for clarity
> }
>
> the current anonymous instantiation syntax looks like this:
>
> this.add(new class extends ArrayView {
>     populateItem(item) {
>         item.add(new Checkbox("check", new PropertyModel(item.model,
> "done")));
>         item.add(new Label("title", new PropertyModel(item.model,
> "title")));
>     }
> }
> ("items", itemsModel)
> );
>
> The problem with this syntax is that it pushes the constructor
> parameters below the class body which I think causes two problems:
>
> When scanning code constructors often contain the piece of information
> that helps locate the anonymous class, which currently requires the
> developer to look back. This is especially problematic for anonymous
> classes with long class bodies.
>
> When writing code I usually think about the constructor first, so it
> seems it would be preferable to write it before moving onto working on
> the class body. This is also the reason why constructors are usually
> placed toward the top of named classes' source.
>
> A better syntax would move the constructor parameters between the
> super class name and the class body:
>
> this.add(new class extends ArrayView("items", itemsModel) {
>     populateItem(item) {
>         item.add(new Checkbox("check", new PropertyModel(item.model,
> "done")));
>         item.add(new Label("title", new PropertyModel(item.model,
> "title")));
>     }
> });
>
> If possible it would also be great to get rid of the "class extends"
> keywords for this usecase:
>
> this.add(new ArrayView("items", itemsModel) {
>     populateItem(item) {
>         item.add(new Checkbox("check", new PropertyModel(item.model,
> "done")));
>         item.add(new Label("title", new PropertyModel(item.model,
> "title")));
>     }
> });
>
> Thoughts?
>
>
> Thanks,
> -igor
> _______________________________________________
> es-discuss mailing list
> es-discuss at mozilla.org
> https://mail.mozilla.org/listinfo/es-discuss
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.mozilla.org/pipermail/es-discuss/attachments/20170107/9a10836a/attachment.html>


More information about the es-discuss mailing list