Pages

this et map and Co

Perte du this

var Sum10 = {
  prop: 10,
  addPropTo: function(array) {
    return array.map(function(elt) {
      return this.prop + elt;
    });
  }
};
           
console.log(Sum10.addPropTo([5,10,15]));
Le code ne marche pas !

Plus surprenant est d'exécuter le code suivant

window.prop = 10;




Don't worry : il y a perte du this. Problème classique que l'appel à la fonction bind peut résoudre facilement.

var Sum10 = {
  prop: 10,
  addPropTo: function(array) {
    return array.map(function(elt) {
      return this.prop + elt;
    }.bind(this));
  }
};
                     

console.log(Sum10.addPropTo([5,10,15]));

et puisque ce problème est classique en JS. Il suffit d'appeler les fonctions de type map avec un argument supplémentaire : this.

var Sum10 = {
  prop: 10,
  addPropTo: function(array) {
    return array.map(function(elt) {
      return this.prop + elt;
    },this);
  }
};
                     


console.log(Sum10.addPropTo([6,11,15]));



En action


objet littéral : get et set

Pour des objets littéraux les fonctions get et set permettent d'accéder à des propriétés.

var objLitteral = {
  elements: ["P1", "P2", "P3"],
  get nb() {
    return this.elements.nb || this.elements.length;
  },
  set nb(value) {
    this.elements.nb = value;
  }
};

console.log(objLitteral.nb);
objLitteral.nb = 10;
console.log(objLitteral.nb);

map, reduce : en action

Compléter le code suivant pour obtenir un alignement des colonnes.


JS Bin on jsbin.com