Nicer JavaScript object initialization

Question

I have a type of object which I've declared like this:

function Stream(id, info, container){
    var self = this;

    this.id = id;
    this.paddedId = ("00000" + this.id).substr(-5,5);
    this.live = info['live'];
    this.autoplay = info['autoplay'];
...

I instantiate that with:

var stream = new Stream(1, streamInfo, "stream");

On some occasions I instantiate several objects of that type at once. The object also has functions, I want to initiate it a bit cleaner, how can I do it like this, but keep my functions? See here:

var stream = new Stream({
        'id': 1
        'live': true
        'autoplay': false
     });

Or at least something similar to this.

mati.o · Accepted Answer · 2022-03-30 19:31:18Z

3

You can wrap the parameters you want to pass to the constructor into a 'options' parameter.

If you want to keep function on 'Stream', use its prototype to define functions on it which will make them available on all Stream's instances.

function Stream(options){
   this.id = options.id;
   this.autoplay = options.autoplay;
   // ... rest of variable initialization
}

Stream.prototype.foo = function() {
  // ...
}
 
Stream.prototype.bar = function() {
 // ...
}

Usage :

var stream = new Stream({ id : 'myId', autoplay : true });
stream.foo();
stream.bar();

edited Mar 30, 2022 at 19:31

answered Feb 7, 2016 at 12:14

mati.o

1,8382 gold badges20 silver badges28 bronze badges

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

4 Comments

TemporaryName Over a year ago

This seems like the cleanest way to do this, can you explain the difference of using prototype functions vs. just declaring them 'normally'?

mati.o Over a year ago

Basically, each object's instance in javascript has it's prototype, which is the equivalent to class definition we all are used to in oop languages. If you would define a function in the constructor of Stream, it would be created each time the constructor is invoked, leading to poorer performance. Here's a good answer to a similar question

TemporaryName Over a year ago

Thanks! Very clear now. Another question I have: I had issues with invoking functions within the constructor, but they weren't initialized yet. Wouldn't I have problems with this when invoking prototype functions?

mati.o Over a year ago

Well, I've tried fiddling with prototype function invocation inside the constructor and had no issues

function Test(){ 	this.myVariable = 'some value';   this.do();      console.log(this.myVariable); };   Test.prototype.do= function(){ 	this.myVariable = 'other value'; };  new Test();

here's that fiddle

WalksAway · Accepted Answer · 2016-02-07 12:19:24Z

You could use anonymous functions like this

var MyClass = (function () {

    var self = function (options) {

        // these will be our default options
        this.options = {
            name: 'John',
            lastName: 'doe'
        }

        // here we just extend the object
        $.extend(this.options, options);
    };

    self.prototype.get = function (attr) {
        return this.options[attr];
    };

    self.prototype.set = function (attrName, attrValue) {
        this.options[attrName] = attrValue;
    };

    self.prototype.whatsMyName = function () {
        $('.' + this.get('name')).html(this.get('name') + ' ' + this.get('lastName'));
    };

    return self;
})();

var Tom = new MyClass({
    name: 'Tom',
    lastName: 'Mathew'
});

var Allen = new MyClass({
    name: 'Allen',
    lastName: 'C'
});

Tom.whatsMyName();
Allen.whatsMyName();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div class="Tom"></div>
<div class="Allen"></div>

Zohaib Ijaz · Accepted Answer · 2016-02-07 12:08:16Z

0

You can pass a config object in Stream Constructor and then get values from that

function Stream(fonfig){
   var self = this;
   var info = config.info || {};
   this.id = config.id;

   this.paddedId = ("00000" + this.id).substr(-5,5);
   this.live = info['live'];
   this.autoplay = info['autoplay'];
}

and you can call as you mentioned

var stream = new Stream({
    'id': 1
    'live': true
    'autoplay': false
 });

answered Feb 7, 2016 at 12:08

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

Collectives™ on Stack Overflow

Nicer JavaScript object initialization

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related