Context

        <p>
        The way context works is through the this variable. The this variable will always refer to the objet that the code is currently inside of. Remember that global objects will actually properties of the window object. This means that even in a global context, the this variable will still refer to an object. Context can be a powerful tool and is an essential one for object-oriented code.
        </p>

        <pre data-sub="prettyprint:_">
        var obj = {
        yes: function(){
        // this == obj
        this.val = true;
        },

        no: function(){
        this.val = false;
        }
        };

        // We see that there is no val property in the 'obj' object
        alert( obj.val == null );
        // We run the yes function and it changes the val property
        // associated with the 'obj' object
        obj.yes();
        alert( obj.val == true );


        // However, we now point window.no to the obj.no method and run it
        window.no = obj.no;
        window.no();
        // This results in the obj object staying the same (as the context was
        // switched to the window object)
        alert( obj.val == true );
        // and window val property getting updated.
        alert( window.val == false );

        </pre>


        <p>
        Javascript also provides a couple of methods to change context. The following example shows these methods.
        </p>


        <pre data-sub="prettyprint:_">
        // A simple function that sets the color style of its context
        function changeColor( color ) {
        this.style.color = color;
        }
        // Calling it on the window object, which fails, since it doesn't
        // have a style object
        changeColor( "white" );

        // Find the element with an ID of main
        var main = document.getElementById("main");
        // Set its color to black, using the call method
        // The call method sets the context with the first argument
        // and passes all the other arguments as arguments to the function
        changeColor.call( main, "black" );

        // A function that sets the color on the body element
        function setBodyColor() {
        // The apply method sets the context to the body element
        // with the first argument, the second argument is an array
        // of arguments that gets passed to the function
        changeColor.apply( document.body, arguments );
        }

        // Set the background color of the body to black
        setBodyColor( "black" );


        var name = "window";
        var f = (function() { alert(this.name); });
        f(); //window
        f.name = "local";
        f();     //still window, the function still run in the context of window
        f.call(f); //local

        var p = { name: "local" };
        p.f = f;
        p.f(); //local
        f.call(p); //local

        </pre>