Verstehen der Function.prototype.bind-Methode in Javascript

Wenn wir zum ersten Mal Javascript lernen, müssen wir uns möglicherweise nicht um die Funktionsbindung kümmern, aber wenn wir das Kontextobjekt this in einer anderen Funktion verwalten müssen, werden wir auf entsprechende Probleme stoßen. Ich habe viele Leute gesehen, die sich mit all diesen Problemen befassen Sie müssen dies zunächst einer Variablen zuweisen (z. B. self, _this, that usw.), insbesondere var that = this, das ich am häufigsten sehe, damit Sie es nach einer Änderung der Umgebung verwenden können. Dies ist alles möglich, aber es gibt eine bessere und proprietärere Methode, nämlich die Verwendung von Function.prototype.bind, die im Folgenden ausführlich erläutert wird.

Teil 1: Probleme, die gelöst werden müssen

Schauen Sie sich zunächst den Code unten an

var myObj = {
 
  specialFunction: function () {
 
  },
 
  anotherSpecialFunction: function () {
 
  },
 
  getAsyncData: function (cb) {
    cb();
  },
 
  render: function () {
this.getAsyncData(function () {
      this.specialFunction();
      this.anotherSpecialFunction();
    });
  }
};
 
myObj.render();

Hier ich Ich hoffe, ein Objekt zu erstellen, einschließlich der ersten beiden normalen Methoden. Die dritte Methode kann eine Funktion übergeben, und die letzte Methode ruft die getAsyncData-Methode des myObj-Objekts auf. und dann die getAsyncData-Methode eingeben. Diese Funktion ruft weiterhin die ersten beiden Methoden dieses Objekts auf. Zu diesem Zeitpunkt können viele Leute das Problem tatsächlich sehen Folgendes Ergebnis:

TypeError: this.specialFunction is not a function

Teil 2: Problemanalyse

Dies in der Render-Methode im Objekt zeigt auf das myObj-Objekt, sodass wir dies durch aufrufen können this.getAsyncData Die Funktion im Objekt, aber wenn wir die Funktion als Parameter übergeben, verweist dies hier auf das globale Umgebungsfenster. Da die ersten beiden Methoden im Objekt in der globalen Umgebung nicht vorhanden sind, wird ein Fehler gemeldet.

Teil 3: Mehrere Möglichkeiten, das Problem zu lösen

Was wir also tun müssen, ist, die ersten beiden Methoden im Objekt korrekt aufzurufen. Die von vielen Menschen verwendete Methode besteht darin, zuerst die aufzurufen Umgebung des Objekts Holen Sie sich dies und weisen Sie es einer anderen Variablen zu. Anschließend können Sie es in der folgenden Umgebung aufrufen, wie unten gezeigt:

render: function () {
  var that = this;
  this.getAsyncData(function () {
    that.specialFunction();
    that.anotherSpecialFunction();
  });
}

Obwohl diese Methode machbar ist, verwenden Sie Function.prototype .bind() macht den Code klarer und leichter verständlich, wie unten gezeigt:

render: function () {
 
  this.getAsyncData(function () {
 
    this.specialFunction();
 
    this.anotherSpecialFunction();
 
  }.bind(this));
 
}

Hier binden wir dies erfolgreich in die Umgebung ein.

Das Folgende ist ein weiteres einfaches Beispiel:

var foo = {
  x: 3
}
 
var bar = function(){
  console.log(this.x);
}
 
bar(); // undefined
 
var boundFunc = bar.bind(foo);
 
boundFunc(); // 3

Das folgende Beispiel ist auch üblich:

this.x = 9;  // this refers to global "window" object here in the browser
var module = {
 x: 81,
 getX: function() { return this.x; }
};
 
module.getX(); // 81
 
var retrieveX = module.getX;
retrieveX(); 
// returns 9 - The function gets invoked at the global scope
 
// Create a new function with 'this' bound to module
// New programmers might confuse the
// global var x with module's property x
var boundGetX = retrieveX.bind(module);
boundGetX(); // 81

Teil 4: Browser-Unterstützung

Aber diese Methode wird in IE8 und niedriger nicht unterstützt, daher können wir die von MDN bereitgestellte Methode verwenden, um IE zu aktivieren. Niedrigere Versionen unterstützen die .bind()-Methode:

if (!Function.prototype.bind) {
 Function.prototype.bind = function (oThis) {
  if (typeof this !== "function") {
   // closest thing possible to the ECMAScript 5 internal IsCallable function
   throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
  }
 
  var aArgs = Array.prototype.slice.call(arguments, 1),
    fToBind = this,
    fNOP = function () {},
    fBound = function () {
     return fToBind.apply(this instanceof fNOP && oThis
                 ? this
                 : oThis,
                aArgs.concat(Array.prototype.slice.call(arguments)));
    };
 
  fNOP.prototype = this.prototype;
  fBound.prototype = new fNOP();
 
  return fBound;
 };
}

Das Obige ist der gesamte Inhalt dieses Artikels, der für das Lernen aller hilfreich sein wird Sie erfahren mehr über die chinesische PHP-Website.

Weitere verwandte Artikel zum Verständnis von Function.prototype.bind in Javascript finden Sie auf der chinesischen PHP-Website!