class properties inheritance

Claude Pache claude.pache at gmail.com
Mon Dec 29 05:01:27 PST 2014


> Le 28 déc. 2014 à 22:42, Антон Шувалов <anton at shuvalov.info> a écrit :
> 
> Hi, guys! I'm confused with class properties. With prototype chains I can setup kinda default values which being replaced by values from children. But replacing become hard to work with classes. For example, we have simple module, some backbone view:
> 
> ```js
> class BaseView extends Backbone.View {
>  constructor() {
>    this.tagName = 'div';
>    super(); // create element from this.tagName value
>  }
> }
> ```
> 
> And now we create inherited view:
> 
> ```js
> class Span extends BaseView {
>  constructor() {
>    this.tagName = 'span'
>    super();
>  }
> }
> ```
> 
> But all `this` variables will be replaced by parent, not by child. It's kinda weird. Another example with prototype chains works fine:
> 
> ```js
> var BaseView = Backbone.View.extends({
>  tagName: 'div'
> })
> ```
> 
> ```js
> var Span = Backbone.View.extends({
>  tagName: 'span'
> });
> ```
> 
> How I can do similar things with es6 classes? Sorry if this question is already discussed.

There is more than one way to resolve your problem. Here are those I see:

(1) Use a getter:

```js
class BaseView extends Backbone.View {
    get tagName() { 
        return 'div'
    }
}
```

(2) If the super constructor supports it, adjust the property after having called the super constructor:

```js
class BaseView extends Backbone.View {
    constructor() {
        super()
        this.tagName = 'div'
    }
}
```

(3) Otherwise, test if your property is already defined:

```js
class BaseView extends Backbone.View {
    constructor() {
        if (this.tagName === undefined)
            this.tagName = 'div'
        super()
    }
}
```

But it is not considered good style to send implicit parameters to the super-constructor through properties of the instance being constructed. You smell it when you see references to `this` before the call to `super()`. At this point, it may be preferable to refactor the code and make all parameters explicit:

```js
class BaseView extends Backbone.View {
    constructor(params = {}) {
        if (params.tagName === undefined)
            params.tagName = 'div'
        super(params)
    }
}
```

—Claude




More information about the es-discuss mailing list