Proposal: Improve syntax for inline anonymous class instantiations

Matthew Robb matthewwrobb at gmail.com
Sat Jan 7 01:07:55 UTC 2017


For some reason this idea made me think about adding extends to function
syntax:
```
class Foo {}

function Bar(a, b) extends Foo {
  // ...
}

// Basic sugar for

function Baz(a, b) {
  // ...
}

Object.setPrototypeOf(Baz, Foo);
Object.setPrototypeOf(Baz.prototype, Foo.prototype);

```

Although now that I re-read the original post I don't think this addresses
the same scenario


- Matthew Robb

On Fri, Jan 6, 2017 at 5:11 PM, 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/20170106/118db1d2/attachment.html>


More information about the es-discuss mailing list