Imposta & # 8220; questo & # 8221; variabile facilmente?

Question

Ho una buona conoscenza di Javascript, tranne per il fatto che non riesco a capire un modo carino per impostare il "questo" variabile. Prendere in considerazione:

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

C'è un modo per farlo senza le ultime 4 righe? È piuttosto fastidioso ... Ho provato a associare una funzione anonima, che pensavo fosse bella e intelligente, ma inutilmente:

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.

Ovviamente, passare la variabile in myFunction è un'opzione ... ma non è questo il punto di questa domanda.

Grazie.

Answer 1

Esistono due metodi definiti per tutte le funzioni in JavaScript, call () e apply () . La sintassi della funzione è simile a:

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

Quello che fanno queste funzioni è chiamare la funzione su cui sono state invocate, assegnando il valore del oggetto a questo .

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

Answer 2

Penso che tu stia cercando call :

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

Questo chiama myFunction con this impostato su obj .

Esiste anche il metodo leggermente diverso applicare , che accetta i parametri della funzione come un array:

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

Answer 3

Se si desidera "archiviare" il valore this in una funzione in modo da poterlo chiamare senza problemi in un secondo momento (ad esempio quando non si ha più accesso a quel valore), è possibile bind (non disponibile in tutti i browser):

var bound = func.bind(someThisValue);

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

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

Answer 4

La mia ricerca su come associare questo mi ha portato qui, quindi sto pubblicando i miei risultati: in 'ECMAScript 2015' possiamo anche impostare questo lessicamente usando le funzioni freccia su.

Vedi: https://developer.mozilla.org/ it / docs / Web / JavaScript / Reference / Funzioni / Arrow_functions

Invece di:

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);
}

Ora possiamo fare:

function Person(){
  this.age = 0;

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

var p = new Person();

Answer 5

Impostazione della parola chiave this in javascript.

Javascript ha 3 metodi integrati per impostare comodamente la parola chiave this . Si trovano tutti sull'oggetto Function.prototype in modo che ogni funzione possa utilizzarli (poiché ogni funzione eredita da questo prototipo tramite eredità prototipo). Queste funzioni sono le seguenti:

1. Function.prototype.call () : questa funzione prende come primo argomento l'oggetto che si desidera utilizzare come this . Quindi il resto degli argomenti sono i rispettivi argomenti della funzione che viene chiamata.
2. Function.prototype.apply () : questa funzione prende come primo argomento l'oggetto che si desidera utilizzare come this . Quindi il secondo argomento è un array che contiene i valori degli argomenti della funzione chiamata (il primo elemento dell'array è il primo argomento della funzione, il secondo argomento dell'array è il secondo argomento della funzione ecc.).
3. Function.prototype.bind () : questa funzione restituisce una nuova funzione che ha un valore diverso di this . Prende l'oggetto che si desidera impostare come this come primo argomento e quindi restituisce un nuovo oggetto funzione.

Differenza tra call / apply e bind:

• chiama e si applicano sono simili nel fatto che chiamano immediatamente la funzione (con un valore predefinito this )
• bind è diverso da call e si applicano nel fatto che questa funzione restituisce una nuova funzione con un diversa associazione del valore this .

Esempi:

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');