Javascript Objects, specifically this keyword

Question

I am currently learning javascript at the moment and am struggling to understand objects, especially the "this" keyword. I have gone through tutorials on W3schools and searched youtube and would like if someone could provide a good tutorial on "this" in javascript.

Answer 1

Ignoring Function.prototype.bind, introduced in ES5, the value of thisis set by how a function is called.

If a function is called with an unqualified identifier, e.g.

foo();

then on entering the function, this is undefined. In non-strict mode, it will be set to the global object (window in a browser) or in strict mode it will remain as undefined.

If a function is called as a method of an object, e.g.

someObj.foo();

then its this is set to the object.

If a function is called using the new operator, its this is set to a new Object created as if by new Object().

function Foo(name) {
    this.name = name; // this references a new Object
}

If a function is called using either call or apply, then its this can be set to any object in non–strict mode or to any value at all in strict mode (even null).

So this has nothing to do with execution context, scope, or anything else. It is entirely related to how a function is called or how the value is set using bind.

In regard to this in listeners, it's been answered here: onClick Function "this" Returns Window Object

Dynamically attached listeners are similar, but again there are quirks to deal with in older IE that are dealt with in articles on attaching listeners.

Answer 2

this is kind of a tricky topic. this refers to the "owner" of the function you're currently working inside. Depending on what context, or scope it is in, this can mean several different things. Usually, it refers to the window object, which is in charge of keeping track of most of your javascript variables, as well as containing several functions. The reason for this is because unless they are explicitly defined otherwise, every javascript function's (and variable's) owner is window. In other words, the following is true:

<script type="text/javascript">
var something = "Hey";
this.something === something;    //these will evaluate to true, because when you  
window.something === something;  //declared the variable `something`, it was assigned  
this === window;                 //to the window object behind the scenes.
</script>

It doesn't always refer to window, though. Inside an event handler, this typically refers to the element that triggered the event. I don't want to go into event handlers in depth, but here's an example using jQuery. Side note -- learn the ins and outs of jQuery.

Html:

<div id="myDiv"></div>

Javascript:

<script type="text/javascript">
$('#myDiv').bind("click",function() {
                $(this).css("visibility","hidden");   
           });
</script>

In this example, this refers to the html element in the top box. The $() is around it because that is the syntax for creating a jQuery object for the element. I did this so I would be able to use the css function, but I could have just as easily done something like this.style.visibility = "hidden";

The reason this referred to the element in the above example is because behind the scenes, jQuery's bind method is doing something like this:

var ele = document.getElementById("myDiv");
ele.onclick = function(){ //the same function as above, but with all the  
                          //behind-the scenes stuff that jquery does to create a jQuery  
                          //object
                        };

Notice that because we're assigning the function to ele.onclick, the function "belongs" to the element, ele. Thus, inside that function, this should refer to ele.

If there is anything I left out that you still don't quite understand, let me know.