JS prototype, create object with new features

Question

I just started with JS and I created a Contructor for a box. Now I want a box that can store Images and a box that can store text. How do I declare the new box objects, with prototype?

//box constructor

function Box(x, y, w, h) {
  this.x = x;
  this.y = y;
  this.w= w;
  this.h= h;    
}

//image box features:

 this.src = ....
 this.title = ...

//text box features:

  this.font = ...
  this.font-size=...
  this.color=....

Box.prototype.src = ""; and etc...

Givi
– Givi

2013-04-06 22:42:26 +00:00
Commented Apr 6, 2013 at 22:42 — Givi
– Givi, Commented Apr 6, 2013 at 22:42

user1106925 · Accepted Answer · 2013-04-06 22:42:27Z

5

function Box(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;    
}

function ImageBox(x, y, w, h) {
    Box.call(this, x, y, w, h); // Apply Box function logic to new ImageBox object

    this.src = ....
    this.title = ...
}
// Make all ImageBox object inherit from an instance of Box
ImageBox.prototype = Object.create(Box.prototype);

function TextBox(x, y, w, h) {
    Box.call(this, x, y, w, h); // Apply Box function logic to new TextBox object

    this.font = ...
    this.font-size =...
    this.color =....
}
// Make all TextBox object inherit from an instance of Box
TextBox.prototype = Object.create(Box.prototype);

answered Apr 6, 2013 at 22:42

community wiki

user1106925

Sign up to request clarification or add additional context in comments.

6 Comments

vuvu Over a year ago

Thank You, that was a fast answer @amNotIam, I check it out!

user1106925 Over a year ago

@vuvu: You're welcome. And I just changed it to use .call instead of .apply so that you pass individual arguments. I have a feeling that your TextBox and ImageBox constructors will be passed more args that don't need to be sent on.

vuvu Over a year ago

How do I define a TextBox then, with 7 parameters or how would the syntax look like for a new TextBox? (Sorry, I'm new)

user1106925 Over a year ago

@vuvu: Just add additional parameters to the function after the existing ones. And then to make a new TextBox, just call the function with new before the call. var tb = new TextBox(0, 0, 100, 100, "foo-font", "12px", "maroon")

fernandosavio Over a year ago

@amnotiam You can use apply and pass the arguments keyword (that is an array of the params received). this way is more flexible

|

Collectives™ on Stack Overflow

JS prototype, create object with new features

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related