This is a set of thoughts on JavaScript Advanced Topics. May be messy.
Understanding the "this" keyword in JavaScript
Understanding event delegation
Let's say that we have a parent ul element with several child elements:
            <ul id="parent-list">
              <li id="post-1">Item 1</li>
              <li id="post-2">Item 2</li>
              <li id="post-3">Item 3</li>
              <li id="post-4">Item 4</li>
              <li id="post-5">Item 5</li>
              <li id="post-6">Item 6</li>
Let's also say that something needs to happen when each child element is clicked.You could add a separate event listener to each individual li element, but what if li elements are frequently added and removed from the list? Here's a very basic JavaScript snippet which illustrates event delegation:
            // Get the element, add a click listener...
            document.getElementById("parent-list").addEventListener("click", function(e) {
             // is the clicked element!
             // If it was a list item
             if( && == "LI") {
                // List item found! Output the ID!
                console.log("List item ","post-", ""), " was clicked!");
Understanding Prototypal Inheritance in JavaScript
In JavaScript all functions are objects
            function foo() {


            typeof foo.prototype // ‘object’
And here is the example of prototype inheritance
            function Dog() {


            Dog.prototype.bark = function() {



            var fido = new Dog();
            fido.bark(); // ‘woof!’
JavaScript uses an inheritance model called “differential inheritance”. What that means is that methods aren’t copied from parent to child. Instead, children have an “invisible link” back to their parent object. What actually happens when I write fido.bark() is this:
1. The JS engine looks for a property called bark on our fido object.
2. It doesn’t find one, so it looks “up the prototype chain” to fido’s parent, which is Dog.prototype.
3. It finds Dog.prototype.bark, and calls it with this bound to fido.
AMD and CommonJS
In JavaScript, the word "modules" refers to small units of independent, reusable code. ... Asynchronous Module Definition (AMD) is the most popular for client-side code, while node.js modules (an extension to CommonJS Modules/1.1) is the leading pattern in server-side environments.
Closure in JavaScript
A closure is a way of keeping access to variables in a function after that function has returned.
            function notAClosure() {
                var shortLivedVariable = "I'm only here for a little while";
                return shortLivedVariable;
            notAClosure(); // returns "I'm only here for a little while"
In a closure those variables stick around for a while longer since there is a reference to the variables after the function returns.
            function aClosure() {
                var longLivedVariable = "I'm here for a long time";
                var innerFunction = function inner() {
                    return longLivedVariable;
                return innerFunction;
            var closure = aClosure(); // returns a reference to innerFunction
            closure(); // returns "I'm here for a long time"
This is a good example of closure:
            function cat(name) {
                return {
                    sayName: function() {
                        return name;

            var fluffy = cat('Mr. Fluffy');
   // returns undefined
            fluffy.sayName() // returns 'Mr. Fluffy'

            var whiskers = cat('Whiskers');
            whiskers.sayName() // returns 'Whiskers'
Function types in JavaScript
Anonymous function.
            function takesACallback(callback) {
                // do some interesting things here
                return "The callback says: " + callback();

            takesACallback(function() {
                return "I'm the callback!";
            }); // returns "The callback says: I'm the callback!"
Anonymous functions are typical used as callbacks.
Module pattern vs Classical inheritance
Module pattern
In JavaScript, the Module pattern is used to further emulate the concept of classes in such a way that we’re able to include both public/private methods and variables inside a single object, thus shielding particular parts from the global scope. - Addy Osmani, Learning Javascript Design Patterns
            var myModule = (function(){

            	var privateVar = "abc";
            	var privateMethod = function() {

            	return {
            		setVar: function(str) {
            			privateVar = str;
            		getVar: function() {
            			return privateVar;
            		printVar: privateMethod

Classical inheritance
            function Person (name) {
    = name;
            Person.prototype.sayMyName = function() {
            	console.log("My name is " +;
            Person.prototype.walk = function() {
            	console.log("I am walking...");

            function Student(name){
    this, name );

            Student.prototype = new Person();
            // Student.prototype = Object.create(Person.prototype);

   = function() {
            	console.log("I am reading...");

            var neil = new Student("neill");
            console.log(neil instanceof Student); // true
            console.log(neil instanceof Person); // true
Call(), Apply() and Bind()
            var obj = {num:2};
            var functionName = function(arg1, arg2, arg3) {
              return this.num + arg1 + arg2 + arg3;

  , 1, 2, 3) //return 8
            functionName.apply(obj, [1, 2, 3]) //also returns 8, but argument is an array

            var anotherFunction = functionName.bind(obj) //returns function with object
            anotherFunction(1, 2, 3) //return 8