Besprechen Sie die Funktion bind() in Javascript

Die bind()-Funktion in Javascript verstehen

Teilen:

Die bind()-Methode erstellt eine neue Funktion Wenn diese neue Funktion aufgerufen wird, ist dieser Wert der erste Parameter, der an bind() übergeben wird, und seine Parameter sind die anderen Parameter von bind() und seine ursprünglichen Parameter.

Die Syntax lautet wie folgt:

fun.bind(thisArg[, arg1[, arg2[, ...]]])

thisArg Wenn die gebundene Funktion aufgerufen wird, wird dieser Parameter als this-Zeiger der ursprünglichen Funktion verwendet, wenn diese ausgeführt wird. Dieser Parameter hat keine Auswirkung, wenn die gebundene Funktion mit dem neuen Operator aufgerufen wird.

arg1, arg2, … (optional) Wenn die gebundene Funktion aufgerufen wird, werden diese Parameter sowie die Parameter der gebundenen Funktion selbst der Reihe nach als Parameter der ursprünglichen Funktion verwendet, wenn diese ausgeführt wird.

Parameter

Der erste Parameter von bind wird als Zeiger verwendet, wenn die ursprüngliche Funktion ausgeführt wird. Es gibt nicht viel zu sagen, und der zweite Startparameter ist optional. Wenn die gebundene Funktion aufgerufen wird, werden diese Parameter sowie die Parameter der gebundenen Funktion selbst als Parameter der ursprünglichen Funktion verwendet, wenn sie der Reihe nach ausgeführt werden. Wie ist das zu verstehen? Die Funktion

rrree

fn erfordert drei Parameter. Die Funktion _fn verwendet standardmäßig 10, sodass Sie nur zwei Parameter übergeben müssen Die ersten beiden werden vergeben.

function fn(a, b, c) {
  return a + b + c;
}
var _fn = fn.bind(null, 10);
var ans = _fn(20, 30); // 60

Was nützt das? Wenn die ersten paar Parameter einiger Funktionen auf „Standard“ gesetzt wurden, können wir bind verwenden, um eine neue Funktion zurückzugeben. Mit anderen Worten: bind() ermöglicht einer Funktion, voreingestellte Anfangsparameter zu haben. Diese Argumente (falls vorhanden) folgen diesem als zweites Argument für bind(). Sie werden dann am Anfang der Argumentliste der Zielfunktion eingefügt, und die an die gebundene Funktion übergebenen Argumente folgen ihnen.

function fn(a, b, c) {
  return a + b + c;
}
var _fn = fn.bind(null, 10);
var ans = _fn(20, 30, 40); // 60

neu

Das von bind zurückgegebene Ergebnis ist immer noch eine Funktion. Wenn es sich um eine Funktion handelt, kann sie vom neuen Operator aufgerufen werden. Die Spezifikation macht sehr deutlich, dass der erste Parameter von bind ungültig ist, wenn der neue Operator zum Aufrufen einer gebundenen Funktion verwendet wird.

function list() {
  return Array.prototype.slice.call(arguments);
}
var list1 = list(1, 2, 3); // [1, 2, 3]
// Create a function with a preset leading argument
var leadingThirtysevenList = list.bind(undefined, 37);
var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

Im Allgemeinen verwenden wir es nicht auf diese Weise, aber wenn Sie ein Bind-Polyfill schreiben möchten (http://caniuse.com/#search=bind), müssen Sie dennoch darüber nachdenken, new zum Aufrufen zu verwenden Es.

Wir können auch Standardwerte festlegen (siehe vorherigen Abschnitt), und die ursprünglich bereitgestellten Parameter werden weiterhin dem Konstruktoraufruf vorangestellt.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
var _Person = Person.bind({});
var p = new _Person('hanzichi', 30); // Person {name: "hanzichi", age: 30}

Mit setTimeout

Wann kann es leicht passieren, dass dieser Zeiger verloren geht? Nun, setTimeout ist eine Szene, und es ist einfach, dies auf das Fenster zu verweisen. Dasselbe gilt natürlich auch für setInterval. Wenn Sie die Methoden eines Objekts verwenden, die dies erfordern, um auf das Objekt zu verweisen, müssen Sie dies möglicherweise explizit an die Callback-Funktion binden, um das Objekt weiterhin verwenden zu können.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
var _Person = Person.bind(null, 'hanzichi');
var p = new _Person(30); // Person {name: "hanzichi", age: 30}

Wir stoßen oft auf ähnliche Probleme, wenn wir Canvas zum Schreiben von Spezialeffekten oder zum Erstellen von Spielen verwenden. Es gibt ein Problem mit dem obigen Code. Dies zeigt in der Render-Methode tatsächlich auf das Fenster! Wir können bind verwenden, um dies explizit an die Callback-Funktion zu binden, sodass wir das Objekt weiterhin verwenden können.

var canvas = {
  render: function() {
    this.update();
    this.draw();
  },
  update: function() {
    // ...
  },
  draw: function() {
    // ...
  }
};
window.setInterval(canvas.render, 1000 / 60);

Eine ähnliche Situation ist die Ereignisüberwachung von dom. Wenn Sie nicht aufpassen, kann dies auf das dom-Element hinweisen. Sie können auf diesen Teil des Codes verweisen, der bei der Arbeit an bigrender vor https://github.com/hanzichi/hanzichi.github.io/blob/master/2016/bigrender/js/bigrender.js#L179-L184 geschrieben wurde.

Tipp

bind kann auch einige interessante Dinge bewirken.

Um ein Array-ähnliches Objekt in ein Array umzuwandeln, verwenden wir im Allgemeinen Slice (wird von ie9- nicht unterstützt). Referenz Nr. 14

window.setInterval(canvas.render.bind(canvas), 1000);

Ein weiteres ähnliches Beispiel: Nehmen wir an, wir möchten Ereignisse zu mehreren Knoten hinzufügen. Natürlich gibt es kein Problem mit der for-Schleife. Wir können die forEach-Methode auch „plagiieren“.

var slice = Array.prototype.slice;
// slice.apply(arguments);
// slice(arguments, 1);
bind 能让调用变的更加简单。
// same as "slice" in the previous example
var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);
// ...
slice(arguments);
// slice(arguments, 1);

Darüber hinaus können wir bind verwenden, um die Funktion besser zu kapseln:

Array.prototype.forEach.call(document.querySelectorAll('input[type="button"]'), function(el){
  el.addEventListener('click', fn);
});

Ebenso können wir x.y(z) in die Form von y(x,z) ändern:

var unboundForEach = Array.prototype.forEach
  , forEach = Function.prototype.call.bind(unboundForEach);
forEach(document.querySelectorAll('input[type="button"]'), function (el) {
  el.addEventListener('click', fn);
});

Geben Sie ein weiteres Beispiel. Das Drucken von 1-5 pro Sekunde auf der Konsole scheint ein klassisches Problem bei der Untersuchung von Abschlüssen zu sein.

var obj = {
  num: 10,
  getCount: function() {
    return this.num;
  }
};
var unboundBind = Function.prototype.bind
  , bind = Function.prototype.call.bind(unboundBind);
var getCount = bind(obj.getCount, obj);
console.log(getCount());  // 10

Sie können let unter ES6 verwenden:

for(var i = 1; i <= 5; i++) {
  !function(i) {
    setTimeout(function() {
      console.log(i);
    }, i * 1000);
  }(i);
}

Sie können auch bind verwenden, um Ihre Leistung sofort zu verbessern:

for(let i = 1; i <= 5; i++) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
}

Empfohlenes Tutorial: „

js Basic Tutorial 》

Das obige ist der detaillierte Inhalt vonBesprechen Sie die Funktion bind() in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!