Example from book secrets of javascript ninja

Question

Starting to read javascript ninja book and I really do not understand why the word 'this' is needed in below example. I tried it w/out it and code do not run. What purpose does the 'this' serve in below context? I think I understand the 'this'(or maybe not at all) but in below, I just do not understand. Please let me know! thank you.

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
(function() {
    var results;
    this.assert = function assert(value,desc) {
        var li = document.createElement("li");
        li.className = value ? "pass" : "fail";
        li.appendChild(document.createTextNode(desc));
        results.appendChild(li);
        if ( !value ) {
            li.parentNode.parentNode.className = "fail";
        }
        return li;
    };

    //this.test = function test(name, fn) {
    this.test = function test(name, fn) {
        results = document.getElementById("results");
        results = assert(true,     name).appendChild(document.createElement("ul"));
        fn();
    };
})();

window.onload = function() {
    test("A test", function() {
        assert(true, "First assertion completed");
        assert(true, "Second assertion completed");
        assert(true, "Third assertion completed");

    });

    test("Another stupid test", function() {

        assert(true, "First assertion completed");
        assert(true, "Second assertion completed");
        assert(true, "Third assertion completed");

    });
    test("A third test", function() {
        assert(null, "fail");
        assert(5, "pass")

    });

};
</script>
<style type="text/css">
    #results li.pass { color: green;}
    #results li.fail { color: red;}

</style>
</head>
<body>
<ul id="results"</ul>
</body>
</html>

score 3 · Accepted Answer · answered Jul 01 '15 at 13:06

The code is taking advantage of the fact that code that is not in "strict" mode will set this to a reference to the global context (window) when a function is invoked without any context. Thus, in that first function, this is window, and the "test" and "assert" symbols are bound as global variables.

Personally I think that's a questionable piece of code to use for pedagogical purposes. I think it would have been better (and clearer) to write that initial function like this:

(function(global) {
    var results;
    global.assert = function assert(value,desc) {
        var li = document.createElement("li");
        li.className = value ? "pass" : "fail";
        li.appendChild(document.createTextNode(desc));
        results.appendChild(li);
        if ( !value ) {
            li.parentNode.parentNode.className = "fail";
        }
        return li;
    };

    //this.test = function test(name, fn) {
    global.test = function test(name, fn) {
        results = document.getElementById("results");
        results = assert(true,     name).appendChild(document.createElement("ul"));
        fn();
    };
})(this);

The above code would work properly in "strict" mode, and is more explicit about binding those symbols globally.

I appreciate both's comments and after reading "this" more throughly, combined w/ direction of this post, I think I understand. I wish I can accept both but this one has little more overall direction so I am accepting this answer. thank you both however! — user3502374, Jul 02 '15 at 22:38

score 3 · Answer 2 · edited May 23 '17 at 12:23

3

To get a better understanding of how this works, look at the answers from this related question:

How does the "this" keyword work?

This should teach you all you need to know (and more) about this in JavaScript.

edited May 23 '17 at 12:23

Community

1
1

answered Jul 01 '15 at 13:07

Stephen Rutstein

105
11

Thank you for your post. It definitely helped me steer into right direciton and I went onto read "this" in "You don't know JS" and it made it very clear to me which helped me understand first person's post. Thank you so much but I will accept first as my accepted answer since it had more overall direction but your post definitely helped me so I thank you very much!. – user3502374 Jul 02 '15 at 22:39

Example from book secrets of javascript ninja

2 Answers2