🤩 Access a heap of free courses with a SitePoint account

What is ‘this’ in JavaScript?

    Craig Buckler
    Share

    JavaScript is a great programming language. That would have been a controversial statement a few years ago, but developers have rediscovered its beauty and elegance. If you dislike JavaScript, it’s probably because:

    • You’ve encountered browser API differences or problems — which isn’t really JavaScript’s fault.
    • You’re comparing it to a class-based language such as C++, C# or Java — and JavaScript doesn’t behave in the way you expect.

    One of the most confusing concepts is the ‘this’ keyword. In most languages, ‘this’ is a reference to the current object instantiated by the class. In JavaScript, ‘this’ normally refers to the object which ‘owns’ the method, but it depends on how a function is called.

    Global Scope

    If there’s no current object, ‘this’ refers to the global object. In a web browser, that’s ‘window’ — the top-level object which represents the document, location, history and a few other useful properties and methods.

    
    window.WhoAmI = "I'm the window object";
    alert(window.WhoAmI);
    alert(this.WhoAmI); // I'm the window object
    alert(window === this); // true
    

    Calling a Function

    ‘this’ remains the global object if you’re calling a function:

    
    window.WhoAmI = "I'm the window object";
    
    function TestThis() {
    	alert(this.WhoAmI); // I'm the window object
    	alert(window === this); // true
    }
    
    TestThis();
    

    Calling Object Methods

    When calling an object constructor or any of its methods, ‘this’ refers to the instance of the object — much like any class-based language:

    
    window.WhoAmI = "I'm the window object";
    
    function Test() {
    
    	this.WhoAmI = "I'm the Test object";
    
    	this.Check1 = function() {
    		alert(this.WhoAmI); // I'm the Test object
    	};
    
    }
    
    Test.prototype.Check2 = function() {
    	alert(this.WhoAmI); // I'm the Test object
    };
    
    var t = new Test();
    t.Check1();
    t.Check2();
    

    Using Call or Apply

    In essence, call and apply run JavaScript functions as if they were methods of another object. A simple example demonstrates it further:

    
    function SetType(type) {
    	this.WhoAmI = "I'm the "+type+" object";
    }
    
    var newObject = {};
    SetType.call(newObject, "newObject");
    alert(newObject.WhoAmI); // I'm the newObject object
    
    var new2 = {};
    SetType.apply(new2, ["new2"]);
    alert(new2.WhoAmI); // I'm the new2 object
    

    The only difference is that ‘call’ expects a discrete number of parameters while ‘apply’ can be passed an array of parameters.

    That’s ‘this’ in a nutshell! However, there are several gotchas which may catch you out. We’ll discuss those in my next post…