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.

score 3 · Accepted Answer · answered Feb 07 '16 at 12:14

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 it's 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();

answered Feb 07 '16 at 12:14

mati.o

922
1
5
16

This seems like the cleanest way to do this, can you explain the difference of using prototype functions vs. just declaring them 'normally'? – TemporaryName Feb 07 '16 at 12:28
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](http://stackoverflow.com/a/4508498/4716922) to a similar question – mati.o Feb 07 '16 at 12:38
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? – TemporaryName Feb 07 '16 at 12:46
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](https://jsfiddle.net/hbzyxj3h/) – mati.o Feb 07 '16 at 13:19

score 1 · Answer 2 · answered Feb 07 '16 at 12:19

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>

score 0 · Answer 3 · answered Feb 07 '16 at 12:08

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
 });

Nicer JavaScript object initialization

3 Answers3