Javascript: call a function inside a multiple instance variable

Question

I have this code.

function coolStuff( name , options ) {
   this.name = name;
   this.options = options;
   this.children = $(name).children();


   this.children.each( function( index, value ) {
        //How can I call this.processMoreCoolStuff if im using multiple instance?

        this.processMoreCoolStuff( {} );
   });

   this.processMoreCoolStuff = function( param ) {
       //Some processing of this.options here!
   }

}


var coolStuffObj01 = new coolStuff( "#cs01", {} );
var coolStuffObj02 = new coolStuff( "#cs02", {} );

How can I call this.processMoreCoolStuff() if im using multiple instance? What is the best approach for this?

Inside the each callback function, this refers to the jQuery element not the coolStuff function. — Titus
– Titus, Commented Mar 28, 2017 at 5:38

Titus · Accepted Answer · 2017-03-28 05:43:22Z

1

Inside the each callback function, this refers to the jQuery element not the coolStuff function. You'll have to keep a reference to the coolStuff instance if you want to access it inside that callback.

Here is an example:

function coolStuff( name , options ) {
   this.name = name;
   this.options = options;
   this.children = $(name).children();
   var self = this;

   this.processMoreCoolStuff = function( param ) {
       //Some processing of this.options here!
       console.log("@processMoreCoolStuff", param);
   }
   
   this.children.each( function( index, value ) {
        //How can I call this.processMoreCoolStuff if im using multiple instance?

        self.processMoreCoolStuff( {name:name, txt:$(value).text()} );
   });
}


var coolStuffObj01 = new coolStuff( "#cs01", {} );
var coolStuffObj02 = new coolStuff( "#cs02", {} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cs01">
  <div>Child 1</div>
  <div>Child 2</div>
</div>
<div id="cs02">
  <div>Child 1</div>
  <div>Child 2</div>
</div>

answered Mar 28, 2017 at 5:43

Titus

22.6k1 gold badge26 silver badges36 bronze badges

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

1 Comment

Eddie Over a year ago

Thanks.. This is the fastest solution.. Thanks alot.

jakeehoffmann · Accepted Answer · 2017-03-28 05:37:04Z

0

Simply do coolStuffObj01.processMoreCoolStuff().

answered Mar 28, 2017 at 5:37

jakeehoffmann

1,4191 gold badge16 silver badges23 bronze badges

Comments

Sagar V · Accepted Answer · 2017-03-28 05:42:30Z

If you want to access the function from each instance(object), in the function last use this return this. Then it will return an object.

Rewrite the function as

function coolStuff( name , options ) {
   this.name = name;
   this.options = options;
   this.children = $(name).children();


   this.children.each( function( index, value ) {
        //How can I call this.processMoreCoolStuff if im using multiple instance?

        this.processMoreCoolStuff( {} );
   });

   this.processMoreCoolStuff = function( param ) {
       //Some processing of this.options here!
   }
   return this; // this line is added

}

Now, if you want to access it, do the following

var coolStuffObj01 = new coolStuff( "#cs01", {} );
coolStuffObj01.processMoreCoolStuff();

brk · Accepted Answer · 2017-03-28 05:45:16Z

0

You can restructure your code and use a constructor function & prototype.Using prototype only create only instance & will be shared.Functions created in the constructor are created as new objects for each new object created with the constructor.

function CoolStuff(name, options) {
  this.name = name;
  this.options = options;
  this.children = $(name).children();
}
CoolStuff.prototype.processMoreCoolStuff = function(param) {
  // rest of the code
}
CoolStuff.prototype.loopChild = function() {
  this.children.each(function(index, value) {
    this.processMoreCoolStuff(); 
  });
}



var coolStuffObj01 = new coolStuff("#cs01", {});
var coolStuffObj02 = new coolStuff("#cs02", {});

answered Mar 28, 2017 at 5:45

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

Jai · Accepted Answer · 2017-03-28 05:55:20Z

0

You have to use .bind() and just change the assignation order:

function coolStuff(name, options) {
  this.name = name;
  this.options = options;
  this.children = $(name).children();
  this.processMoreCoolStuff = function(param) {}; // <----move it up here

  this.children.each(function(index, value) {
    this.processMoreCoolStuff({}); // 2. it knows where to find the method
  }.bind(this)); // <----1. when you bind "this"

}

answered Mar 28, 2017 at 5:55

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Collectives™ on Stack Overflow

Javascript: call a function inside a multiple instance variable

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related