it-swarm.com.de

"This" Variable einfach einstellen?

Ich habe ein ziemlich gutes Verständnis von Javascript, außer dass ich keine gute Möglichkeit finde, die Variable "this" einzustellen. Erwägen:

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

Gibt es eine Möglichkeit, dies ohne die letzten 4 Zeilen zu tun? Es ist ziemlich ärgerlich ... Ich habe versucht, eine anonyme Funktion zu binden, die ich für schön und clever hielt, aber ohne Erfolg:

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.

Natürlich ist das Übergeben der Variablen in myFunction eine Option ... aber das ist nicht der Punkt dieser Frage.

Vielen Dank.

133
sam

Für alle Funktionen in JavaScript sind zwei Methoden definiert: call() und apply() . Die Funktionssyntax sieht folgendermaßen aus:

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

Diese Funktionen rufen die Funktion auf, für die sie aufgerufen wurden, und weisen den Wert des Parameters objectthis zu.

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

Ich denke, Sie suchen call :

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

Dies ruft myFunction mit this auf obj auf.

Es gibt auch die etwas andere Methode apply , die die Funktionsparameter als Array verwendet:

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

Wenn Sie den this-Wert in einer Funktion "speichern" möchten, damit Sie ihn später nahtlos aufrufen können (z. B. wenn Sie nicht mehr auf diesen Wert zugreifen können), können Sie bind (es ist jedoch nicht in allen Browsern verfügbar):

var bound = func.bind(someThisValue);

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

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

Meine Suche, wie man this bindet, brachte mich hierher, also poste ich meine Ergebnisse: In 'ECMAScript 2015' können wir dies auch lexikalisch mithilfe von Pfeilfunktionen einstellen.

Siehe: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Anstatt:

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

Wir können jetzt tun:

function Person(){
  this.age = 0;

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

var p = new Person();
0

Festlegen des this-Schlüsselworts in Javascript.

In Javascript sind 3 Methoden integriert, mit denen Sie das Schlüsselwort this bequem festlegen können. Sie befinden sich alle im Function.prototype-Objekt, sodass jede Funktion sie verwenden kann (da jede Funktion von diesem Prototyp durch prototypische Vererbung erbt). Diese Funktionen sind die folgenden:

  1. Function.prototype.call(): Diese Funktion nimmt das Objekt, das Sie als this verwenden möchten, als erstes Argument an. Die restlichen Argumente sind dann die jeweiligen Argumente der aufgerufenen Funktion. 
  2. Function.prototype.apply(): Diese Funktion nimmt das Objekt, das Sie als this verwenden möchten, als erstes Argument an. Dann ist das zweite Argument ein Array, das die Werte der Argumente der aufgerufenen Funktion enthält (erstes Element des Arrays ist das erste Argument der Funktion, das zweite Argument des Arrays ist das zweite Argument der Funktion usw.). 
  3. Function.prototype.bind(): Diese Funktion gibt eine neue Funktion mit einem anderen Wert von this zurück. Sie nimmt das Objekt, das Sie als this-Wert festlegen möchten, als erstes Argument und gibt dann ein neues Funktionsobjekt zurück.

Unterschied zwischen Aufruf/Anwenden und Binden:

  • call und apply ähneln sich dadurch, dass sie sofort die Funktion aufrufen (mit einem vordefinierten Wert von this).
  • bind unterscheidet sich von call und apply dadurch, dass diese Funktion eine neue Funktion mit einer anderen Bindung des this-Werts zurückgibt.

Beispiele:

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

0