1

Sorry, I cannot even formulate my question correctly, because my brain cannot comprehend this behavior:

var $a = (function(){
    var innerVariable = "Hello from A";
    this.show = function(){
        console.log(innerVariable);
    }
return this;
})();


var $b = (function(){
    var innerVariable = "Hello from B";
    this.show = function(){
        console.log(innerVariable);
    }
return this;
})();

$a.show(); // "Hello from B" - why $b.innerVariable overwrites $a.innerVariable?
$b.show(); // "Hello from B" - okay, expected and logical

https://jsfiddle.net/9a4cpvzg/1/

I am trying to simulate standard OOP(Java) on ES5. I would like to have these 2 "objects" with public functions.

Can anyone explain to me why $b.innerVariable overwrites $a.innerVariable?

EDIT: Thanks to answer, I see that using this is the problem here. I just saw an internet example of simulating standard OOP in JS and they I followed it - using this inside the functions. My goal is to be able to define objects with public and private functions/variables. this is not important in my case - I just saw it in internet. Could you please suggest solution working on ES5?

CuriousGuy
  • 1,545
  • 3
  • 20
  • 42
  • 3
    It doesn't overwrite `innerVariable`, it overwrites `show`. Think about what `this` is in each function. – tkausl May 31 '21 at 02:37
  • oh, *facepalm*, I didn't even think about `this`.... Okay, could you please suggest how to fix this and keep such classical OOP structure? – CuriousGuy May 31 '21 at 02:39
  • 1
    What is your goal? Do you need `this` to be part of the solution, or are you just looking to return two objects with a public `show` property, that access a "private" variable? – Nicholas Tower May 31 '21 at 02:40
  • 1
    `var $b = (function() { var innerVariable = 'Hello from B'; var show = function () { console.log(innerVariable); }; return { show: show }; )();` Or even better: `var makeB = function () { var innerVariable = 'Hello from B'; var show = function () { console.log(innerVariable); } return { show: show } }; var $b = makeB();` – JLRishe May 31 '21 at 02:44
  • @NicholasTower, no, I don't care about `this`, I just saw it in some example in internet. So, I guess I need to have objects which can have same public functions which access their "private" variables. – CuriousGuy May 31 '21 at 02:46
  • 1
    Hint: `$a === $b`. Do not use `this` here. Construct the objects using object literals. – Bergi May 31 '21 at 02:46
  • "*I am trying to simulate standard OOP(Java) on ES5*" - did you mean for those functions to be used as constructors? Then a) don't use IIFE b) use `new` c) define only a single function with a parameter to avoid code duplication. Btw, don't try to simulate Java - just use real JS OOP. – Bergi May 31 '21 at 02:48
  • @Bergi, could you please show me example(maybe using my code snippet) how to implement object with public and private functions(and private variables) on ES5? – CuriousGuy May 31 '21 at 02:51
  • 1
    @CuriousGuy [This post](https://stackoverflow.com/a/13418980/1048572) should have everything you need to know about ES5 constructors – Bergi May 31 '21 at 02:56
  • @JLRishe thank you! I tried your example and looks like this is exactly what I needed! – CuriousGuy May 31 '21 at 03:15

0 Answers0