Hint of different behaviors of functions depending on context in which the function is defined and executed

javascript-functions-contexts.js

'use strict' // attention ces considérations ne sont valides qu'en utilisant le mode strict
var globale = 'globale'

var methode3 = () => {
  if (!this || !this.attrLocal) {
    console.log('  > methode3() NE partage PAS le contexte de Classe1')
  }

  if (this && this.attrLocal) {
    console.log('  > methode3() partage le contexte de Classe1')
  }
  console.log('  > this ==', this, '. instanceof Classe1 ?', this instanceof Classe1)
}

function methode4 () {
  if (!this || !this.attrLocal) {
    console.log('  > methode4() ne partage pas le contexte de Classe1')
  }

  if (this && this.attrLocal) {
    console.log('  > methode4() partage le contexte de Classe1')
  }
  console.log('  > this ==', this, '. instanceof Classe1 ?', this instanceof Classe1)
}

function Classe1 () {
  if (this.globale !== globale) {
    console.log('Classe1 définit son propre contexte')
  }

  this.attrLocal = 'locale1'

  if (typeof attrLocal === 'undefined') {
    console.log("Il faut différencier le constructeur de l'objet du contexte de la fonction\n" +
                "- attrLocal fait référence à une variable du constructeur (qui n'existe pas)\n" +
                '- this.attrLocal est un attribut de Classe1\n')
  }

  function methode1 () {
    if (!this || !this.attrLocal) {
      console.log('  > methode1() ne partage pas le contexte de Classe1')
    }

    if (this && this.attrLocal) {
      console.log('  > methode1() partage le contexte de Classe1')
    }
    console.log('  > this ==', this, '. instanceof Classe1 ?', this instanceof Classe1)
  }

  this.methode1 = methode1
  this.methode4 = methode4

  var methode2 = () => {
    if (!this.attrLocal) {
      console.log('  > methode2() NE partage PAS le contexte de Classe1')
    }

    if (this.attrLocal) {
      console.log('  > methode2() partage le contexte de Classe1')
    }

    console.log('  > this ==', this, '. instanceof Classe1 ?', this instanceof Classe1)
  }

  this.methode2 = methode2
  this.methode3 = methode3
  
    console.log('comportement des function () {}')
  console.log("- si une fonction créée est appelée via this.fonction(), elle partage le this avec l'appelant")
  this.methode1()
  console.log('- pareil si elle est définie en dehors de la classe et appelée avec this.methode4()')
  this.methode4()
  console.log('- si une fonction créée est appelée sans le this, elle a son propre contexte et ne partage pas le this')
  methode1()
  console.log('- pareil si elle est définie en dehors de la classe et appelée avec methode4()')
  methode4()
  console.log('\n')

  console.log("() => {} a un comportement différent: il adopte le contexte d'exécution de son contexte de définition")
  console.log("  et non de son contexte d'exécution")
  console.log('- si une fonction fléchée est définie dans une classe, elle partage le this de la classe')
  this.methode2()
  console.log('- même si elle est appelée sans le this.methode2()')
  methode2()
  console.log('- si une fonction fléchée est définie hors de la classe elle ne PARTAGE PAS le this de la classe')
  methode3()
  console.log('- même si elle est appelée avec this.methode3()')
  this.methode3()
  console.log('\n')
}

console.log('new Classe1()')
new Classe1()


class Classe2 {
  constructor () {
    this.attrLocal = 'attrLocal'
    this.methode1()

    if (!this.hasOwnProperty('methode1')) {
      console.log("methode1 n'est pas une propriété de Classe2")
      // c'est normal car methode1 appartient à Classe2.prototype pas à cette instance
      // comme this fait référence indifférement à l'instance ou à Classe2.prototype,
      // on ne peut pas s'en rendre compte (sauf avec hasOwnProperty
    }

    this.methode1 = this.methode1.bind(this)
    if (this.hasOwnProperty('methode1')) {
      console.log('Après this.methode1 = this.methode1.bind(this)')
      console.log('  > methode1 est une propriété de Classe2')
      // cette fois ci on a réassigné de force methode1 à l'instance plutôt qu'à Classe2.prototype
      // du coup c'est effectivement devenu un attribut de l'instance auquel il a été assigné une fonction
    }
    this.methode1()

    Classe2.methode2()
    this.methode2 = Classe2.methode2.bind(this)
    this.methode2()
  }

  methode1 () {
    if (this.attrLocal) {
      console.log('la méthode de la Classe partage bien le même this que le constructeur')
    }
  }

  static methode2 () {
    if (!this || !this.attrLocal) {
      console.log('les méthodes statiques ne partagent pas le this en revanche')
    }
    if (this && this.attrLocal) {
      console.log("sauf si on les bind à l'instance")
    }
  }
}

console.log('new Classe2()')
new Classe2()