Improved way to initialize JavaScript objects

Question

Improved way to initialize JavaScript objects

I created a custom object called Stream with the following structure:

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'];
...

To instantiate an object, I use the code snippet below:

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

Sometimes, I need to create multiple objects of this type at once. I would like to find a cleaner way to initialize it while keeping my functions intact. Is there a way to achieve something similar to the code snippet below?

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

If not exact, then perhaps a similar approach.

javascript oop

Answer 1

Answer №1

To pass parameters to the constructor, you can group them into an 'options' parameter.

If you want to maintain functions within 'Stream', utilize its prototype to define functions that will be accessible to all instances of Stream.

function Stream(options){
   this.id = options.id;
   this.autoplay = options.autoplay;
   // ... additional variable setup
}

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

Example :

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

Answer 2

To pass parameters to the constructor, you can group them into an 'options' parameter.

If you want to maintain functions within 'Stream', utilize its prototype to define functions that will be accessible to all instances of Stream.

function Stream(options){
   this.id = options.id;
   this.autoplay = options.autoplay;
   // ... additional variable setup
}

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

Example :

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

Answer 3

Answer №2

One way to utilize anonymous functions is shown below:

var MyClass = (function () {

    var self = function (options) {

        // These are our default options
        this.options = {
            name: 'John',
            lastName: 'Doe'
        }

        // Extend the object with provided options
        $.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>

Answer 4

One way to utilize anonymous functions is shown below:

var MyClass = (function () {

    var self = function (options) {

        // These are our default options
        this.options = {
            name: 'John',
            lastName: 'Doe'
        }

        // Extend the object with provided options
        $.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>

Answer 5

Answer №3

One way to access values in a Stream Constructor is by passing a config object.

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'];
}

Then, you can use it like this:

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

Answer 6

One way to access values in a Stream Constructor is by passing a config object.

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'];
}

Then, you can use it like this:

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

Improved way to initialize JavaScript objects

Answer №1

Answer №2

Answer №3

Similar questions

Unusual shift in the modal's behavior occurs when the parent component's style.transform is applied

Incorporating the angular UI router effectively by reusing the same templateUrl and controller multiple times

Tips for downloading an XLSX file

Reading and extracting data from a massive XML document using Node.js

What exactly is HTML cloud storage all about?

Converting HTML content to L20N format after dynamically modifying the DOM

Running the command Yarn build with Vite.js and React.js is encountering issues and is not functioning properly

Reordering database information using javascript and php

JavaScript comparing elements within an array

Advantages of placing script src tags at the top of the body versus placing them at the bottom of the body

Chart featuring top corners smoothly rounded off for a unique doughnut design

Tips for adding text to your d3 force layout

Executing a JavaScript function from V8 in C++: A Step-by-Step Guide

The issue arises in React when input elements fail to render correctly following a change in value, specifically when the keys remain identical

I am having trouble with Fullcalendar not loading my JSON data to display events

Showing and hiding nested Form Group validation in Angular 4 is a crucial feature that can improve

Exploring the interaction between child objects and cube objects in Three.js

jQuery - easily adjust wrapping and unwrapping elements for responsive design. Perfect for quickly undo

Using Angular to swap out the component's selector with HTML code

Is it possible to retrieve elements by their ID when the ID values are constantly changing?