The magic of "var self = this", understanding scope and references

Question

I am not new to javascript and its scopes, but I always wondered why the heck the following example actually works.

// lets define some twist
var ScopeMagic = function() {
    // early reference, copy dat' value
    var self = this;
    // there is no real mystery yet...
    this.mysteryDepth = 0;

    // but we create one there...
    this.increase = function(depth) {
        // okay, its clear that the context is "this"
        setMystery(depth);
        return this;
    };

    // private function, setting a value to the "self" variable
    function setMystery(val) {
        // i though self would by a copy of "this" !
        // mother Mary, i'm using self. I could use this here, but
        //  for the sake of the demo using self on purpose
        self.mysteryDepth += parseInt(val);
    }
}

var perplexity = new ScopeMagic();
perplexity.increase(42);
console.log(perplexity);

And we get the following result.

It works obviously, but how can the object property be modified when we set it by using a reference to self which appears to be a variable of its own (copy of this) ?

`this` can change from under you. `self`, captured in a closure, can't. — Sergio Tulentsev, Oct 17 '16 at 09:34
Pardon me Sergio, but i don't understand the relationship of your comment with the question... — Romain Bruckert, Oct 17 '16 at 09:36
One of the questions is "why the heck it works", right? My comment explains that, if you were asking why you need to do `var self = this`. As to your other question: `self` is a copy of the __reference__, not copy of the object. — Sergio Tulentsev, Oct 17 '16 at 09:37
What @SergioTulentsev is saying is that `this` is always relative to the current scope. In your function `setMystery` `this` will be a reference to that function, whereas `self` will remain a reference to `ScopeMagic`. — Emil S. Jørgensen, Oct 17 '16 at 09:38
Ah. I get it. I understand better now new after reading this answer: http://stackoverflow.com/questions/6605640/javascript-by-reference-vs-by-value — Romain Bruckert, Oct 17 '16 at 09:40
Too bad its a duplicate though, i was really proud of my example! Oooh, mondays at work... — Romain Bruckert, Oct 17 '16 at 09:42

The magic of "var self = this", understanding scope and references

0 Answers0