Question about the this keyword

JavaScript
1 

function bar() {
        alert(this);
}

bar(); //global

this outputs the following in an alert:
[object]

I’m reading about execution context and javascript and supposedly the above example is global execution context.

What i want to know is why it prints out object?

since this is global, i would think it would alert global.

Next example


var foo = {
baz: function() {
alert(this);
}

}

foo.baz();

What this does, is it prints out an alert that says [object Object]

my question is why is there a capital object along with a lowercase o object.

I’m wondering what the object is. and why doesn’t it print out foo since foo is the object. and when i run alert (this), it’s being run inside the foo object.

This is getting confusing for me.

2

The first one displays [object] because window is an object.

The second one displays [object object] because both foo and baz are objects and this is pointing to foo.baz

3

No, it doesn’t alert “[object]”, it alerts “[object Window]”, for the first snippet. It only alerts [object] if you’re using older IE versions. You shouldn’t.

It’s the same with alert(this.toString()). The toString() method is called automatically whenever the object is referred in string like manner, which alert(this) does.

The general description of toString() for objects is [object type]. In the first case, Window is the type of the global object: [object Window]. In the second case, Object is the type for the foo object: [object Object].

4

Thanks, but my understanding of the this keyword is still kind of foggy.

Is it basically just a reference to the active object?

5

this - refers to the current object.

HTH.

6

Inside global and anonymous functions, this is equal to the window object, or undefined when executing in strict mode.

7 


<!DOCTYPE html><html lang="en"><body><script>
var cody = {
  living:true,
  age:23,
  gender:'male',
  getGender:function(){return this.gender;}
};

console.log(cody.getGender()); // logs 'male'

</script></body></html>

I would like to know when this returns an object and when this will return a value from a property like in this example.

Can someone show all the different variations of the way this is used?

8

is there any reason why the second Object is capitalized O? out of curiosity?

9

when you say strict mode,



// Whole-script strict mode syntax
"use strict";
var v = "Hi!  I'm a strict mode script!";

any particular reasons why you’re running in that mode?

10

As the name implies, it’s more restrictive than the default mode, to prevent some kinds of errors by changing the way JS behaves. The explanation over at MDN is pretty good and goes into detail.

11

Short and sweet: http://www.infoworld.com/d/application-development/6-secrets-of-javascript-jedis-231322?page=0,1

JavaScript secret No. 4: What’s this?

The this keyword is a huge stumbling block for many JavaScript developers to the point that some avoid it altogether. The best description of the topic I’ve seen so far was by Yehuda Katz in his blog post on function invocation. When not using call/apply or bind, the this value will always refer to the global object, except in the following instances:

The function in question was called with the new operator, in which case this points to a new object being constructed.
The function in question is a member of an object, in which case this points to the object.

Rule 2 should be disregarded whenever the function involved is being called asynchronously, such as in a click handler or setTimeout. For example:


Person.getName(); // 'this' points to Person

setTimeout(Person.getName, 1000); // 'this' points to the global object

I’m not sure I get it right, I may be wrong, you’re phrasing may be off too… to note, the this keyword will only work inside functions, and will only be used to reference an object, not a property. But you can use this to reference the object, and then use “.”, like for any other named object, to look for a property of that object.

Looking at your question, I believe you should take a step back and first get a better understanding of JavaScript objects, then worry about the this keyword. Everything in JavaScript is a property of an object, starting down from the global object.

12

Rather than calling the other mode “default” mode I’d call it “old mode”. All future versions of JavaScript will build on “strict mode” while retaining “old mode” simply so that antiquated scripts written for Netscape 4 do not break.

Strict mode fixes some of the problems that JavaScript has due to it now being used for far more than was originally intended.

As a simple example of something strict mode fixes is the requirement that everything be declared before use. This prevents the newbie error of accidental typos in variable names resulting in the script creating additional global variables instead of using the intended variable. Using old mode there is no easy way to tell why your 500 line JavaScript doesn’t do what it is supposed to be doing. Using strict mode the script fails to run and the error console takes you straight to the typo.