Tips to Become a Better JavaScript Developer

Don't think of "this" as having weird rules with strange edge cases about what it defaults to in certain scenarios. It is always dependent on how you call the function, and there are only two rules, depending on your situation.

    1) "this" is whatever you set it to with call/apply/bind, or, if you didn't,
    2) if you're using "use strict"
    2.a) "this" is whatever is to the left of the dot when you call the function.
    2.b) otherwise, "this" is wherever you got the function from. 

Think of 2.a in the literal sense, if you called the function from a bare variable reference with no dot operator on an object, then the statement "whatever is to the left of the dot" is "undefined". Basically, this means that you generally shouldn't end up with "window" as "this".

So, if you got a function from the global scope, it's "this" is in the global scope. If you got it from an object, it's "this" is that object.

    function AClass(){ this.id = "bar"; }
    AClass.prototype.func = function(){ console.log(this.id); };
    var id = "foo";
    var obj1 = new AClass();
    var obj2 = {id: "baz"};
    var func = obj1.func;
    obj2.func = obj1.func; // or even just "func"

    console.log(func === obj1.func, func === obj2.func, obj1.func === obj2.func);

    func();      // prints "foo"
    obj1.func(); // prints "bar"
    obj2.func(); // prints "baz"
    with(obj1){ func(); } // prints "bar"
    with(obj2){ func(); } // prints "baz"

Same exact function in all cases. The reason func's "this" in the first of the last three calls is "window" is not because that's what "this" defaults to, it's because that's where we found "func".

Think of the global scope in a browser as looking something like this:

    function window(){
        with(this){
            // your code
        }
    }
    window.call(window);

So that is why, when an event handler is executed, it's "this" is the DOM element to which the event handler was added.

    myButton.onclick = function(){
        // do something
    }

You just stored the function on the myButton object, so when it gets read back again to be executed, it's coming from myObject.

Using addEventListener does the same thing. And if the browser vendors don't actually store the event callbacks in the object, then I guess they must be using "call" to maintain backwards compatibility with the old event wiring syntax.

It's not even right for what the article author is trying to do. Or in other words, s/he just broke their own rule #1: understand "this". "document.querySelectorAll" must be called on the document object, and reassigning it to a variable like this will make it be called in whatever function scope it's currently in. To even get this to call correctly, it needs to be "var $ = document.querySelectorAll.bind(document);"

only needs one point, "only use javascript when you have to, it's a terrible language and best avoided"

As a backend developer with a tiny bit of front end knowledge, ditching JQuery sounds pretty dumb. It was designed to iron out all the incompatibilities between browsers, no? And funnily enough since it became the standard a while ago, I hear a lot less complaints about trying to get something to work in IE.

(Sounds a little like the NoSQL crowd telling me how much easier their databases are to develop in, without any thought for why the relational model became so popular).

it won't give you anything, calling that $ function will result in an error in all but stupidly rare cases. And by stupidly rare I mean, it's rare to see anyone use "with", and it'd be stupid to do "with(document)"