7.2.1.1. First branch: global scope versus (local) function scope

• – In the global scope, this refers the global object,

  // in the browser environment:
  console.log(this === window); // true
  // in Node.js, each module has its own global object:
  console.log(this === global); // true

• – In the function scope, the question to answer is: how is the function invoked?

7.2.1.2. Function invoked with the operator (.)

const f = function () {return this;};
f();                    // returns global by default [object Window]

7.2.1.3. Function invoked as an object method

const obj = {};
obj.myMethod = function () {return this;};
obj.myMethod();        // returns [object obj]

7.2.1.4. Function invoked as a “callback” (DOM events, AJAX requests, etc.)

const nav = document.querySelector('nav'); // <nav> tag
const toggNav = function (){ console.log(this);};
nav.addEventListener('click',toggNav);     // this = <nav> element
const xhr = new XMLHttpRequest();
xhr.addEventListener("load",jsonCallback); // this = "xhr" element

7.2.1.5. Function coded in the “arrow syntax”

Within an “arrow function”, this retains the value of the enclosing lexical context this.

7.2.1.6. Function invoked as “constructor” by the operator new

See section 7.3: “Operator new”.

7.2.1.7. Multiple invocations: Inner function redefining “this”

WARNING.– An inner function may change the value of this depending on the way that function has been invoked.

Here is a frequent issue: the inner function is a method of window object:

const nav = document.querySelector('.nav'); // <nav class="nav">
const toggNav = function () {
    console.log(this);       // <nav> element
    setTimeout(function () { // callback
        console.log(this);   // [object Window] !Beware!
                           }, 1000);
 };
nav.addEventListener('click', toggNav, false);

One solution for passing the context value: copy this in that (usual name):

let that = this;
setTimeout(function () { console.log(that); // <nav> ok!
                        }, 1000);

A simpler (ES6) solution is to use the arrow syntax:

setTimeout( () => { console.log(this);      // <nav> ok!
                        }, 1000);

7.5.1.1. Default initializations using a logical shortcut

Evaluating expressions in boolean context, e.g. conditional instructions, forces the variables to be cast as booleans instead of their own type. This leads to defining some default initialization idioms:

const localObjet = objet || {"nom":"default object"};
let localNum = num !== 0? (num || numDefaut) : 0;
let localStr = str !== ""? (str || strDefaut) : "";
let localProp = "prop" in objet? prop : propDefaut;

depending on the polymorphism of false, with respect to various values or types:

 0, NaN, "", null, undefined → false (boolean)

7.5.1.2. Encapsulation using a closure

A frequent situation: we need an external control variable within the code block of a function, example:

let once = true;               // variable de corntrÔle exteme
function printOnce(str){
        if (once) {once = false; return str;}
    // implicit else = return undefined
 }

Solution: build a closure around both the variable and the code block, then return the inner code as a function expression:

function printOnce() {
   let once = true;
   return function(str){
        if (once) {once = false; return str;}
   };
 }
const printOneTime = printOnce();
console.log(printOneTime("Hello"));   // -> Hello
console.log(printOneTime("Hello"));   // -> undefined

7.5.1.3. Displaying the properties of an object: “Map/Entries Combo”

Using the built-in object Map (ES6), an “Iterable” with a size property, and set and get methods, in combination with Object.entries:

const can = { nom: 'Good', prenom: 'Morning' };
const canMapped = new Map(Object.entries(can)); // idiom
canMapped.get('nom');  // -> 'Good'
canMapped.size;        // -> 2

Using Map in combination with Array.from for a time series data array:

const timeData = [['d1', 'v1'], ['d2', 'v2']];
const timeMap = new Map(timeData);
timeMap.get('date1'); // returns "v1"
timeMap.forEach(function(v,d){console.log('date ${d}, v= ${}');});
const dates = Array.from(timeMap.keys()));  // ["d1", "d2"]
const valus = Array.from(timeMap.values()));     // ["v1", "v2"]

7.5.2.1. Read a JSON object and give it a prototype

Data are often exchanged over the Internet in text files using JSON format, and this is an advantage for JavaScript: the assign/create combination can easily fit that use: Object.assign “mixes” a clone of the JSON parsed object, with a prototype independently provided by Object.create.

const base = {
   // JSON data
 };
const proto = {
   // prototype methods
 };
const nu = Object.assign(
   Object.create(proto),
   base)
 );

The object nu inherits by delegation of the methods of proto, while copying the properties of base. We have learnt that proto can be built from a function, thus providing a constructor.name:

function Nu(){} // "prototype support" + "constructor.name"
Nu.prototype.method1 = function(){/*…*/};
Nu.prototype.method2 = function(){/*…*/};
const proto = Nu.prototype;
const nu = Object.assign(Object.create(proto), base));
// nu is a "Nu" object (constructor.name === "Nu")

For an array of objects from the JSON file, and a given Nu.prototype, a single function call can build the entire nu’s array, even choosing the properties to keep, or adding some. Let us wrap up everything here.

function Nu(){}
Nu.prototype.email = function(){console.log("Dear "+this.nom);};
const dataset = [{"nom":"Dan"},{"nom":"Bob"}]; // JSON array
const nus = dataset.map(function(d,i){
let nuPlus = {"n":(20+i)}; // if any is to be added
delete d.uselessprop;   // if any is not to be kept
return Object.assign(Object.create(Nu.prototype), d, nuPlus);
});

nus.forEach( x=>{ x.email(); });        // "Dear Dan" / "Dear Bob"
console.log( nus[0].constructor.name);                  // "Nu"
console.log( nus[0] instanceof Nu);                     // true
console.log( Nu.prototype.isPrototypeOf(nus[0]));       // true

7.5.3.1. Augmenting the previous namespace

If it exists already, we use it as argument for the IIFE, otherwise we use an empty object. The “augmentation” is concentrated in a single instruction, the IIFE, which modifies the object window.webpage (or a copy, if webpage is frozen).

// webpage (the namespace name) can be modified locally and isn't
// overwritten outside of our function context
 (function(webpage) {
     // new public methods and properties
     webpage.foobar = "foobar";
     webpage.sayHello = function() {alert("hello world");};
     // check whether 'webpage' exists in the global scope
     // if not, assign window.namespace an object literal
 })(window.webpage = window.webpage || {});
// if "frozen" or "sealed", first copy webpagePlus = webpage

7.5.4.1. Code

        // helpers: protoChainOf(), methodCalls()
function list(q,i){
   return '${protoChainOf(q, '=', 0)}
 methods:
 ${methcdCails(q)}';
 }
function User(){return 'User only';}
function Age(){return 'Age only';}
function UserAge(){return "Mixin";}
User.prototype.full = function(){return this.first+"
 "+this.last;};
Age.prototype.year = function(){return 2017 - this.age;};
let z1= Object.assign(Object.create(User.prototype),
Age.prototype),
     z2= Object.assign(Object.create(zu1),
 {constructor:UserAge});
const last= 'Bel', first= 'Jo', age= 28, qqs= [];
qqs.push( Object.assign(Object.create(z1), {first,age}) );
qqs.push( Object.assign(Object.create(z2), {first},{age}) );
         // dynamic modification of methods
Age.prototype.year = function(){return 2018 - this.age;};
User.prototype.full = function(){return "M. "+this.last;};
console.log( qqs.reduce(function(s,q,i){return
s+list(q,i);},""));

7.5.4.2. Logs

7.5.4.3. Comments

The prototype chain is correctly incremented and methods are delegated along. But, in case of subsequent changes, only those of User.prototype are passed on (see: the “M.”), not those of Age.prototype: function year is a copy and not a reference to the method year of Age.prototype.

The “decoration” works, but this form of multiple inheritance remains static: there is no automatic update. The next pattern may be a solution to this issue.

7.5.5.1. Code: The “push” approach: the code is on the observable side

const Observable = function() { this.observers = []; }
Observable.prototype = {
   subscribe(callback) {        // adds to the list
     let yet = this.observers.some(c => c === callback);
     if(!yet) this.observers.push(callback);
   },
   unsubscribe(callback) {               // remove from the list
     let i = this.observers.indexOf(callback);
     if(i>-1) this.observers.splice(i, 1);
   },
   publish(str) {                // notifies the list
     this.observers.forEach(c => {c(this.title+" "+str);});
   }
 };
const Observer = function(n) {        // closure: creating observers
   const name = n;
   return function(str){console.log(str+" for "+name);}
 };
        // let's create a newsletter and 2 subscribers
const subscriber1 = Observer("Bob");
const subscriber2 = Observer("Nora");
const blog = Object.assign(Object.create(Observable.prototype),
                {"title":"myBlog","observers":[]});
blog.subscribe(subscriber1);    // register an observer
blog.subscribe(subscriber2);    // register an observer
blog.publish('Jan.2018 issue'); // notifies a change
        // logs: ----------------------
//> "myBlog Jan.2018 issue for Bob"
//> "myBlog Jan.2018 issue for Nora"

Each observable owns its list of observers and communication methods. The observers, in this example, are closures: just a name and a callback.

The handling of DOM events (chapter 8) uses this pattern and many animation modules as well.