What is the "this" in an example JS function?

Question

Below is the entire contents of a JS/JQuery file. I didn't write it, but I'm trying to add on to it. I am having trouble understanding what this is referring to. I haven't seen functions set up in this style before (SmartPhone = function() {})

SmartPhone = function()
{
    this.miniMap = new GameModeMap();

    this.init = function()
    {
        var self=this;
        var $PhoneContainer = $("#PhoneContainer");
        $PhoneContainer.append("<div id='PhoneScreen'></div>");
        $PhoneContainer.append("<div class='PhoneButton'></div>");
        $('.PhoneButton').click(function(){self.toggleClicked()});

        this.miniMap.init("#PhoneScreen");

        //append the appMenu
        $("#PhoneScreen").append("<div id='AppMenu'></div>");
        $("#AppMenu").hide();
        initMenu();
        //toggleClicked();
    }

    this.toggleClicked = function() 
    {
        console.log(this);
        $('#PhoneContainer').toggleClass ('clicked');
        $('#PhoneScreen').toggleClass ('vertical');
        this.miniMap.toggle();
        $('#AppMenu').toggle();
    }

    this.init();
}

You can't hide code in here, after you posted, it's forever in the edit history, I'm not sure about what license your code turns into when you post it here. — , Jul 25 '11 at 18:48
Yes, but this is better than having it flying out in the open. — Briz, Jul 25 '11 at 18:51
I don't see why hide that. It's so trivial that anyone can reproduce that. Also, by doing that, you won't help other people that'll find this question on Google. — , Jul 25 '11 at 19:03

score 2 · Answer 1 · answered Jun 20 '11 at 15:08

2

How this works

Live Example

var Construct = function() {
  this.magic = 42;
}
var c = new Construct();
alert(c.magic === 42);

answered Jun 20 '11 at 15:08

Raynos

166,823
56
351
396

score 2 · Accepted Answer · answered Jun 20 '11 at 15:10

2

They're using the Object Functionality of JavaScript.

SmartPhone is essentially a class structure in this example, with init() being the construct (called by the last this.init() line within SmartPhone.

this is refering to the scope, and in this case the object being created.

answered Jun 20 '11 at 15:10

Brad Christie

100,477
16
156
200

I chose your answer because you best answered the question of what `this` was in the example method – Briz Jun 20 '11 at 15:34
@Briz: Another great resource: http://stackoverflow.com/questions/133973/how-does-this-keyword-work-within-a-javascript-object-literal/134149#134149 – Brad Christie Jun 20 '11 at 16:32

score 1 · Answer 3 · answered Jun 20 '11 at 15:13

The "this" variable in JavaScript can point to many different things depending on your context. There is a great blog post on this called: Understanding JavaScript’s this keyword

In the context you are showing, this will be bound to the object created from the SmartPhone constructor.

score 0 · Answer 4 · answered Jun 20 '11 at 15:09

0

this refers to the SmartPhone object. For instance, this.init is defining the init method for the SmartPhone. Later, you could access it by using SmartPhone.init().

answered Jun 20 '11 at 15:09

DJ Quimby

3,669
25
35

So, in essence I should be able to call toggleClicked with SmartPhone.toggleClicked(); ? I tried this and it does nothing. – Briz Jun 20 '11 at 15:15

What is the "this" in an example JS function?

4 Answers4