JavaScriptmancy - Quirks - this, hoisting and function scope

by vintharas

HTML

<pre><code id="theWorld">
</code></pre>

CSS

pre { 
    font-size: 0.9rem; 
    padding: 2%;
    background: #333; 
    color: white;
}

pre .world {
    display: block;
    white-space: pre-wrap;
}

pre .world-error{
    color: rgba(255,0,0,0.7);
}

pre .world-info {
    color: grey;
    font-style: italic;
    padding: 10px 0;
}

pre .world-spell{
    color: rgba(90,90,255,1);
}

Babel + JSX

'use strict'
// log stuff in the home-made console to the write in addition to
// logging it to the browser console
startWorld();

/*

JavaScript-mancy: Mastering the Arcane Art of Writing Awesome JavaScript for C# Devs
Chapter 07 - Mysteries of the JavaScript Arcana: JavaScript Quirks and Gotchas Demystified

*/


narrate(`
After weeks of travelling north Mooleen and Randalf arrive a green valley surrounded by majestic white-peaked mountains as far as the eye can see. There's the beginning of a mountain trail and two persons beside it
waiting for them...
`);

randalf.says('Ah... the Misty Mountains. What a beautiful sight!');
randalf.says('Mooleen, I introduce you to zandalf and bandalf');
randalf.says('I trust them like if they were my brothers...');

randalf.says('...because they actually ARE my brothers');
mooleen.says('Ehem... I can see the resemblance');

narrate(`
Randalf, Zandalf and Bandalf look nothing alike. Where Randalf is tall and spindly, with a carefully trimmed beard and a good natured resemblance, Zandalf is freakishly small and plump, and Bandalf is... blue. Literally blue, like the sky in a clear morning.
`);

randalf.says("Great! While we go up I'd like to tell you something");
randalf.says("I've noticed that some of your incantations have been misfiring");
mooleen.says('Misfiring? What? I know what I am doing... most of the time');

randalf.says('So you meant to light that bale of hay on fire?');
mooleen.says('Yeeees');
randalf.says('And the cart beside it?');
mooleen.says('Yeeeeees');
randalf.says('And the two blocks of buildings surrounding it...');
mooleen.says('Yeee....');

randalf.says('What about my finest robes?');
mooleen.says('That was actually on purpose');

randalf.says('Mooleen...');
randalf.says('OK. I see that you are stumbling with some of the quirks ' +
             'and gotchas of JavaScript-mancy');
randalf.says('Let me give you a couple of tips');



// ********* THIS IN JAVASCRIPT ********** //

// 'this' in JavaScript is...