Execution Context

Demonstrates values of "this" in different contexts

by Joseph Priest

HTML

<div id="console-log"></div>

CSS

.console-line
{
    font-family: monospace;
    margin: 2px;
}

JavaScript

//BEGIN IGNORE. This is setup code to print out results
var consoleLine = "<p class=\"console-line\"></p>";
 
console = {
    log: function (text) {
        $("#console-log").append($(consoleLine).html(text));
    }
};
//END IGNORE


//Global Scope
//In this instance, we are only referring to "this" in terms of the global object
var dog = "Fido";
console.log(dog);

//Execution Context
//"this" is now going to refer to the execution context
function myDog(){
    //this now refers to execution context
    var dog = "Snapper";
    console.log(dog);
}
myDog();

//Eval Context
//The context for this will be eval
var dog = {
    name: "Frodo",
    dogInfo: function(){
        console.log(this.name);
    }
};
dog.dogInfo();