Eine kurze Analyse der Verwendung und Implementierung der bind()-Methode in Javascript_Javascript-Kenntnissen-js-Tutorial-php.cn

Eine kurze Analyse der Verwendung und Implementierung der bind()-Methode in Javascript_Javascript-Kenntnissen

WBOY

Freigeben： 2016-05-16 15:02:53

Original

1302 Leute haben es durchsucht

Bevor wir die bind()-Methode besprechen, schauen wir uns eine Frage an:

var altwrite = document.write; altwrite("Hallo");
//1. Was stimmt mit dem obigen Code nicht?
//2. Was ist die richtige Operation
//3.So implementieren Sie die bind()-Methode

Für die obige Frage ist die Antwort nicht allzu schwierig. Der Haupttestpunkt ist das Problem, auf das die Funktion altwrite() verweist, was zu einer Ausnahme für einen unzulässigen Aufruf führt Die richtige Lösung ist die Verwendung der bind()-Methode:

altwrite.bind(document)("hello")

Natürlich können Sie auch die Methode call() verwenden:

altwrite.call(document, „hello“)

Der Schwerpunkt dieses Artikels liegt auf der Diskussion des dritten Problems, der Implementierung der bind()-Methode. Bevor wir mit der Diskussion der Implementierung von bind() beginnen, werfen wir zunächst einen Blick auf die Verwendung der bind()-Methode:

Bindungsfunktion

Die einfachste Verwendung von bind() besteht darin, eine Funktion zu erstellen, sodass die Funktion unabhängig von ihrem Aufruf denselben Wert hat. Ein häufiger Fehler besteht wie im obigen Beispiel darin, die Methode aus dem Objekt zu entfernen und sie dann aufzurufen, in der Hoffnung, dass sie auf das ursprüngliche Objekt zeigt. Erfolgt keine besondere Bearbeitung, geht das Originalobjekt in der Regel verloren. Die Verwendung der bind()-Methode kann dieses Problem wunderbar lösen:

this.num = 9; 
var mymodule = { 
 num: 81,
 getNum: function() { return this.num; }
};

module.getNum(); // 81

var getNum = module.getNum; 
getNum(); // 9, 因为在这个例子中，"this"指向全局对象

// 创建一个'this'绑定到module的函数
var boundGetNum = getNum.bind(module); 
boundGetNum(); // 81

Nach dem Login kopieren

Teilfunktionen

Teilfunktionen werden auch Teilanwendungen genannt. Hier ist eine Definition von Teilfunktionen:

Eine teilweise Anwendung kann so beschrieben werden, dass man eine Funktion übernimmt, die eine bestimmte Anzahl von Argumenten akzeptiert, Werte an eines oder mehrere dieser Argumente bindet und eine neue Funktion zurückgibt, die nur die verbleibenden, ungebundenen Argumente akzeptiert.

Dies ist eine sehr gute Funktion. Mit bind() legen wir die vordefinierten Parameter der Funktion fest und übergeben dann beim Aufruf andere Parameter:

function list() { 
 return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// 预定义参数37
var leadingThirtysevenList = list.bind(undefined, 37);

var list2 = leadingThirtysevenList(); // [37] 
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

Nach dem Login kopieren

Zusammen mit setTimeout verwenden

Im Allgemeinen zeigt setTimeout() auf das Fenster oder das globale Objekt. Wenn Sie benötigen, dass dies bei Verwendung einer Klassenmethode auf eine Klasseninstanz verweist, können Sie bind() verwenden, um dies an die Rückruffunktion zu binden, um die Instanz zu verwalten.

function Bloomer() { 
 this.petalCount = Math.ceil(Math.random() * 12) + 1;
}

// 1秒后调用declare函数
Bloomer.prototype.bloom = function() { 
 window.setTimeout(this.declare.bind(this), 1000);
};

Bloomer.prototype.declare = function() { 
 console.log('我有 ' + this.petalCount + ' 朵花瓣!');
};

Nach dem Login kopieren

Hinweis: Die obige Methode kann auch für Ereignisbehandlungsfunktionen und setInterval-Methoden verwendet werden

Bind-Funktion als Konstruktor

Gebundene Funktionen eignen sich auch dazu, mit dem neuen Operator Instanzen der Zielfunktion zu konstruieren. Beachten Sie bei der Verwendung einer gebundenen Funktion zum Erstellen einer Instanz: Diese wird ignoriert, die übergebenen Parameter sind jedoch weiterhin verfügbar.

function Point(x, y) { 
 this.x = x;
 this.y = y;
}

Point.prototype.toString = function() { 
 return this.x + ',' + this.y; 
};

var p = new Point(1, 2); 
p.toString(); // '1,2'


var emptyObj = {}; 
var YAxisPoint = Point.bind(emptyObj, 0/*x*/); 
// 实现中的例子不支持,
// 原生bind支持:
var YAxisPoint = Point.bind(null, 0/*x*/);

var axisPoint = new YAxisPoint(5); 
axisPoint.toString(); // '0,5'

axisPoint instanceof Point; // true 
axisPoint instanceof YAxisPoint; // true 
new Point(17, 42) instanceof YAxisPoint; // true

Nach dem Login kopieren

Im obigen Beispiel teilen sich Point und YAxisPoint Prototypen, daher gilt dies, wenn der Operator „instanceof“ verwendet wird.

Verknüpfung

bind() kann auch Verknüpfungen für Funktionen erstellen, die einen bestimmten this-Wert erfordern.

Wenn Sie beispielsweise ein Array-ähnliches Objekt in ein echtes Array umwandeln möchten, sind die möglichen Beispiele wie folgt:

var slice = Array.prototype.slice;

// ...

slice.call(arguments);

Nach dem Login kopieren

Wenn Sie bind() verwenden, wird die Situation einfacher:

var unboundSlice = Array.prototype.slice; 
var slice = Function.prototype.call.bind(unboundSlice);

// ...

slice(arguments);

Nach dem Login kopieren

Leistung

Aus den obigen Abschnitten geht hervor, dass bind() viele Verwendungsszenarien hat, aber die Funktion bind() wurde erst in der fünften Ausgabe von ECMA-262 hinzugefügt und läuft möglicherweise nicht auf allen Browsern. Dies erfordert, dass wir die Funktion bind() selbst implementieren.

Zuerst können wir einfach die bind()-Methode implementieren, indem wir einen Bereich für die Zielfunktion angeben:

Function.prototype.bind = function(context){ 
 self = this; //保存this，即调用bind方法的目标函数
 return function(){
   return self.apply(context,arguments);
 };
};

Nach dem Login kopieren

Unter Berücksichtigung des Funktions-Curryings können wir ein robusteres bind() erstellen:

Function.prototype.bind = function(context){ 
 var args = Array.prototype.slice.call(arguments, 1),
 self = this;
 return function(){
   var innerArgs = Array.prototype.slice.call(arguments);
   var finalArgs = args.concat(innerArgs);
   return self.apply(context,finalArgs);
 };
};

Nach dem Login kopieren

Dieses Mal kann die bind()-Methode Objekte binden und unterstützt auch die Übergabe von Parametern während der Bindung.

Weiterhin können Javascript-Funktionen auch als Konstruktoren verwendet werden. Wenn also die gebundene Funktion auf diese Weise aufgerufen wird, ist die Situation subtiler und die Übertragung der Prototypenkette muss einbezogen werden:

Function.prototype.bind = function(context){ 
 var args = Array.prototype.slice(arguments, 1),
 F = function(){},
 self = this,
 bound = function(){
   var innerArgs = Array.prototype.slice.call(arguments);
   var finalArgs = args.concat(innerArgs);
   return self.apply((this instanceof F &#63; this : context), finalArgs);
 };

 F.prototype = self.prototype;
 bound.prototype = new F();
 return bound;
};

Nach dem Login kopieren

Dies ist die Implementierung von bind() im Buch „JavaScript Web Application“: Durch Einrichten eines Transitkonstruktors F befinden sich die gebundene Funktion und die Funktion, die bind() aufruft, in derselben Prototypenkette und die neue Operation Der verwendete Operator ruft die gebundene Funktion auf, und das zurückgegebene Objekt kann auch normal die Instanz von verwenden, daher ist dies die strengste Implementierung von bind().

Um die bind()-Funktion im Browser zu unterstützen, müssen Sie die obige Funktion nur geringfügig ändern:

Function.prototype.bind = function (oThis) { 
  if (typeof this !== "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 &#63; this : oThis || window,
       aArgs.concat(Array.prototype.slice.call(arguments))
     );
    };

  fNOP.prototype = this.prototype;
  fBound.prototype = new fNOP();

  return fBound;
 };

Nach dem Login kopieren

Die obige kurze Analyse der Verwendung und Implementierung der bind()-Methode in Javascript ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie Script Home unterstützen.