Context of this in a var Foo = (function () { etc

Question

If I declare this in a class

class AlertConfigViewModel {
   DeleteAlert = function (item) {
        if (item) {
            if (confirm('Are you sure you wish to delete this item?')) {
                this.Alerts.remove(item);
            }
        }
        else {
            alert("something is wrong");
        }
    };
}

it ends up like this:

var AlertConfigViewModel = (function () {
    function AlertConfigViewModel(json) {
      this.DeleteAlert = function (item) {
            if(item) {
                if(confirm('Are you sure you wish to delete this item?')) {
                    this.Alerts.remove(item);
                }
            } else {
                alert("something is wrong");
            }
        };
    }
}

If I call AlertConfigViewModel outside the context of AlertConfigViewModel then the "this" is not AlertConfigViewModel which I thought it would since its inside function AlertConfigViewModel(

The value of `this` in a function is determined by how it's called. — gen_Eric, Mar 14 '13 at 16:02

Jude Fisher · Answer 1 · 2013-03-14T18:12:15.643

Why not just declare your function as a property of your class in the normal manner?

class AlertTest {

    private alerts:string = "these-alerts";

    TraceAlert():void{
       console.log(this.alerts); // Logs "these-alerts", wherever it's called from
    };
}

class CallTest {

    private alerts:string = "not-these-alerts";

    constructor() {
        var target = new AlertTest ();  // Creates an instance of your class, as you say.
        target.TraceAlert()
    }
}

var t:CallTest = new CallTest();
// Output: "these-alerts"

I'm not sure what the FuncName = function() syntax gives you, other than scoping problems.

score 1 · Answer 2 · edited May 23 '17 at 12:21

1

Please take a look at solution posted here: TypeScript and Knockout binding to 'this' issue - lambda function needed?

"this" will always point to class instance if you define method body inside constructor - its a trick, but imo its quite clean solution.

edited May 23 '17 at 12:21

Community

1
1

answered Mar 15 '13 at 11:27

Slawek

2,592
1
24
26

1

It's not a trick per se, it's taking advantage of the closure that happens when the Function instance is created. I've used this many times to supply static DOM actions to my ViewModel objects. – Joel Cochran Mar 15 '13 at 12:26

score 0 · Answer 3 · answered Mar 14 '13 at 16:17

0

I suspect you will only have one instance of this 'class', rendering the use of the this key-word obsolete.

With similar syntax try something like:

ClassName = {
    Alerts: someObject,

    DeleteAlert: function (item) {
        if (item) {
            if (confirm('Are you sure you wish to delete this item?')) {
                ClassName.Alerts.remove(item);
            }
        } else {
            alert("something is wrong");
        }
    }
}

And if you want instances, I'd go for another syntax...

answered Mar 14 '13 at 16:17

apelsinapa

575
3
9

Thanks, but I actually create an instance of this class: **var viewModel: AlertConfigViewModel = new AlertConfigViewModel(rawJson);** – FutuToad Mar 14 '13 at 17:09
so I don't really want to work at a class level – FutuToad Mar 14 '13 at 17:10
I'm using typescript btw – FutuToad Mar 14 '13 at 17:10

Context of this in a var Foo = (function () { etc

3 Answers3