javascript - Initializing an empty ES6 class - Stack Overflow

I'm building an app where I have a View which is a class which takes a bunch of properties to display, create, update, etc.

I setup my view like this

export default class {
   constructor(view) {
      this.id = view.id;
      this.title = view.title;
   }
}

I want to be able to initialize a View when a new view is being created, and I'm thinking the correct way is like this

let newView = new View()

Unfortunately, it appears if I do this, the constructor function is not called. When I run this test

expect(newView.id).toBe(undefined)

I get an error cannot read property id of undefined.

let newView = new View({})

Returns correctly, but I find it a bit odd to provide an empty object. Is this correct? Is there a better way to instantiate an empty class?

I'm building an app where I have a View which is a class which takes a bunch of properties to display, create, update, etc.

I setup my view like this

export default class {
   constructor(view) {
      this.id = view.id;
      this.title = view.title;
   }
}

I want to be able to initialize a View when a new view is being created, and I'm thinking the correct way is like this

let newView = new View()

Unfortunately, it appears if I do this, the constructor function is not called. When I run this test

expect(newView.id).toBe(undefined)

I get an error cannot read property id of undefined.

let newView = new View({})

Returns correctly, but I find it a bit odd to provide an empty object. Is this correct? Is there a better way to instantiate an empty class?

• javascript
• es6-class

Share Improve this question Follow edited Oct 10, 2016 at 5:56 Ziv Weissman 4,56644 gold badges3030 silver badges6363 bronze badges asked Oct 10, 2016 at 5:34 pedalpetepedalpete 21.6k4545 gold badges133133 silver badges245245 bronze badges 4

• are you missing class name? – theAnubhav Commented Oct 10, 2016 at 5:36
• @AnubhavSrivastava No. It's a default exported class. – Andrew Li Commented Oct 10, 2016 at 5:38
• 1 What do you mean 'empty class'? It has a constructor which expects arguments does it not? It can't find property id because you don't supply arguments to constructor, which assigns id. You could probably use the spread operator or provide a default argument. – Andrew Li Commented Oct 10, 2016 at 5:40
• 2 constructor(view = {})? "the constructor function is not called" - I think it is called, but then crashes on = view.id because view is undefined. – nnnnnn Commented Oct 10, 2016 at 5:43

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

This is correct.

Your constructor is being called but it is defined with a parameter. In your first call you pass empty object:

let newView = new View(); 

Exception:

export default class {
   constructor(view) {   //view = 'undefined'
      this.id = view.id; //This line will cause exception.
      this.title = view.title;
   }
}

Therefore your parameter 'view' in constructor will be undefined and you will get your exception.

When you call:

let newView = new View({}); // new object {}

Your parameter 'view' will be defined and you can access its' props. (of course they will all be null)

Supplement: Unfortunately there is no overloads on constructors, they still act like regular JS functions, there is a workaround you can do:

export default class {
   constructor(view) {  
      view = view || {}; //this is default value for param.
      this.id = view.id; 
      this.title = view.title;
   }
}

Then you are covered for new View() and new View({object})

You can use default parameters to set view object as a default variable identifier view with properties id, title set to undefined

class View {
   constructor(view = {id: void 0, title: void 0}) {
      this.id = view.id; 
      this.title = view.title;
   }
}

var newView = new View();

console.assert(newView.id === undefined
              , {"message":"newView.id is not undefined"
              , "newView.id":newView.id}
);

console.assert(newView.id !== undefined
              , {"message":"newView.id is undefined"
              , "newView.id":newView.id}
);

console.dir(newView);