dynamicThis.js

// Arrow functions would have been useful for defining concise formulae to be invoked in 
// the context of other objects.

// For example here's an object describing a piece of rope. It includes a method which 
// returns the area enclosed by the rope. 
// Since the enclosed area will vary according to the shape of the rope, the area method
// accepts a formula for calculating the area based on a specified shape.

// However with fat arrows, the context is static and tight-bound so 'this' is wrong and
// 'call' is useless
var pieceOfRope = function(length) {
  return {
    length: length,
    // argument fn defines the area for a given shape
    area: function(fn) {return fn.call(this)}
  }
}
 
var myRope = pieceOfRope(6);
var areaOfCircle = myRope.area(()=>this.length*this.length/(Math.PI*4)); // reference error
var areaOfSquare = myRope.area(()=>this.length*this.length/16; // reference error

/****************** // *******************/

// Using thin arrow (which didn't make ES6) 'this' is dynamic and loose-bound so all is good
var pieceOfRope = function(length) {
  return {
    length: length,
    //argument fn defines area for a given shape    
    area: function(fn) {return fn.call(this)}
  }
}
 
var rope = pieceOfRope(6);
var areaOfCircle = myRope.area(()->this.length*this.length/(Math.PI*4)); //2.86
var areaOfSquare = myRope.area(()->this.length*this.length/16; //2.25