Définir "cette" variable facilement?

Question

J'ai une bonne compréhension de Javascript, sauf que je n'arrive pas à trouver un moyen agréable de définir la variable "this". Considérer:

var myFunction = function(){
    alert(this.foo_variable);
}

var someObj = document.body; //using body as example object
someObj.foo_variable = "hi"; //set foo_variable so it alerts

var old_fn = someObj.fn;   //store old value
someObj.fn = myFunction;   //bind to someObj so "this" keyword works
someObj.fn();              
someObj.fn = old_fn;       //restore old value

Y at-il un moyen de faire cela sans les 4 dernières lignes? C'est plutôt ennuyant ... J'ai essayé de relier une fonction anonyme, que je trouvais belle et intelligente, mais en vain:

var myFunction = function(){
    alert(this.foo_variable);
}

var someObj = document.body;        //using body as example object
someObj.foo_variable = "hi";        //set foo_variable so it alerts
someObj.(function(){ fn(); })();    //fail.

Évidemment, passer la variable dans myFunction est une option ... mais ce n'est pas le but de cette question.

Merci.

Answer 1

Il existe deux méthodes définies pour toutes les fonctions en JavaScript, call() et apply() . La syntaxe de la fonction ressemble à ceci:

call( /* object */, /* arguments... */ );
apply(/* object */, /* arguments[] */);

Ces fonctions appellent la fonction sur laquelle elles ont été appelées, en affectant la valeur du paramètre object à this.

var myFunction = function(){
    alert(this.foo_variable);
}
myFunction.call( document.body );

Answer 2

Je pense que vous cherchez call :

myFunction.call(obj, arg1, arg2, ...);

Ceci appelle myFunction avec this défini sur obj.

Il y a aussi la méthode légèrement différente apply , qui prend les paramètres de la fonction comme un tableau:

myFunction.apply(obj, [arg1, arg2, ...]);

Answer 3

Si vous souhaitez 'stocker' la valeur this dans une fonction afin de pouvoir l'appeler de manière transparente ultérieurement (par exemple, lorsque vous n'avez plus accès à cette valeur), vous pouvez la modifier bind (non disponible dans tous les navigateurs):

var bound = func.bind(someThisValue);

// ... later on, where someThisValue is not available anymore

bound(); // will call with someThisValue as 'this'

Answer 4

Ma recherche sur la façon de lier this m’a amené ici et j’affiche donc mes conclusions: Dans 'ECMAScript 2015', nous pouvons également définir ceci de manière lexicale à l’aide des fonctions de flèche.

Voir: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Au lieu de:

function Person() {
  setInterval(function growUp() {
    // The callback refers to the `self` variable of which
    // the value is the expected object.
    this.age++;
  }.bind(this), 1000);
}

Nous pouvons maintenant faire:

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| properly refers to the person object
  }, 1000);
}

var p = new Person();

Answer 5

Définition du mot clé this en javascript.

Javascript dispose de 3 méthodes intégrées pour définir le mot clé this de manière pratique. Elles sont toutes situées sur l’objet Function.prototype afin que chaque fonction puisse les utiliser (puisque chaque fonction hérite de ce prototype via un héritage prototype). Ces fonctions sont les suivantes:

1. Function.prototype.call(): Cette fonction prend l'objet que vous souhaitez utiliser comme this comme premier argument. Alors le reste des arguments sont les arguments respectifs de la fonction appelée. 
2. Function.prototype.apply(): Cette fonction prend l'objet que vous souhaitez utiliser comme this comme premier argument. Ensuite, le deuxième argument est un tableau contenant les valeurs des arguments de la fonction appelée (le premier élément du tableau est le premier argument de la fonction, le deuxième argument du tableau est le deuxième argument de la fonction, etc.). 
3. Function.prototype.bind(): Cette fonction renvoie une nouvelle fonction ayant une valeur différente de this. Il prend l'objet que vous souhaitez définir comme valeur this comme premier argument, puis renvoie un nouvel objet fonction.

Différence entre call/apply et bind:

• call et apply sont similaires dans le fait qu'ils appellent immédiatement la fonction (avec une valeur prédéfinie de this)
• bind diffère de call et apply du fait que cette fonction renvoie une nouvelle fonction avec une liaison différente de la valeur this.

Exemples:

const thisObj = {
  prop1: 1,
  prop2: 2,
};

function myFunc(arg1, arg2) {
  console.log(this.prop1, this.prop2);
  console.log(arg1, arg2);
}

// first arg this obj, other arguments are the  
// respective arguments of the function
myFunc.call(thisObj, 'Call_arg1', 'Call_arg2');

// first arg this obj, other argument is an array which  
// are the respective arguments of the function
myFunc.apply(thisObj, ['Apply_arg1', 'Apply_arg2']);


// the bind method returns a new function with a different
// this context which is stored in the newMyFunc variable
const newMyFunc = myFunc.bind(thisObj);

// now we can call the function like a normal function 
newMyFunc('first', 'second');