Detaillierte Erläuterung des bind()-Beispiels in Funktion

Vorwort

bind() akzeptiert unzählige Parameter. Der erste Parameter ist der This-Punkt der neuen Funktion, die es generiert. Wenn ich beispielsweise ein Fenster übergebe, egal wo es aufgerufen wird Diese Funktion zeigt auf das Fenster, und die Parameter dieser neuen Funktion sind der zweite, dritte, vierte ... n-te Parameter von bind() plus seine ursprünglichen Parameter. (Okay, ich bin selbst verwirrt)

Beispieleinführung

Es ist einfacher zu verstehen, wenn wir uns die grundlegendste Verwendung von bind() ansehen:

this.x = 9; 
var module = {
 x: 81,
 getX: function() { return this.x; }
};
 
module.getX(); // 返回 81
 
var retrieveX = module.getX;
retrieveX(); // 返回 9, 在这种情况下，"this"指向全局作用域
 
// 创建一个新函数，将"this"绑定到module对象
// 新手可能会被全局的x变量和module里的属性x所迷惑
var boundGetX = retrieveX.bind(module);
boundGetX(); // 返回 81

Hier ist es offensichtlich, dass, wenn wir „retrieX“ unter dem Fensterobjekt aufrufen, das Ergebnis „x“ unter dem Fenster sein muss. Wir binden das Modulobjekt an „this“ von „retrieX“ und das Problem wird gelöst, egal wo es aufgerufen wird, „this“. Alle zeigen auf das Modulobjekt.

Es gibt auch andere Parameter von bind(). Ich glaube, dass Freunde, die zum ersten Mal mit bind() konfrontiert werden, verwirrt sein werden, wenn sie die obige Definition sehen.

Lassen Sie uns ein Beispiel geben:

function list() {
 return Array.prototype.slice.call(arguments);
}
 
var list1 = list(1, 2, 3); // [1, 2, 3]
 
// 创建一个拥有预设初始参数的函数
var leadingThirtysevenList = list.bind(undefined,[69,37],{a:2});
 
var list2 = leadingThirtysevenList(); // [[69,37],{a:2}]
var list3 = leadingThirtysevenList(1, 2, 3); // [[69,37],{a:2}, 1, 2, 3]

Die Listenfunktion ist sehr einfach. Sie fügt jeden übergebenen Parameter in ein Array ein. Wir verwenden bind(), um den Anfangswert für die Liste festzulegen Da der Zeiger dieser Funktion nicht geändert werden muss, wird undefiniert ab dem zweiten Parameter übergeben. Die Rückgabewerte von Liste2 und Liste3 werden erläutert alles gut.

Das Szenario, in dem ich bind() normalerweise verwende, besteht darin, mit der Funktion setTimeout zusammenzuarbeiten, da diese beim Ausführen von setTimeout standardmäßig auf das Fensterobjekt verweist. Vor der Verwendung von bind() habe ich Folgendes getan:

function Coder(name) {
 var that = this;
 that.name = name;
 that.getName = function() {
  console.log(that.name)
 };
 that.delayGetName = function() {
  setTimeout(that.getName,1000)
 };
}
var me = new Coder('Jins')
me.delayGetName()//延迟一秒输出Jins

Definieren Sie einen Zeiger, der dies auf der obersten Ebene der Funktion zwischenspeichert, sodass er, egal wie er aufgerufen wird, auf die Instanz von Coder zeigt, die Definition einer weiteren Variablen jedoch immer unbequem ist.

Es ist viel einfacher, bind() zu verwenden:

function Coder(name) {
 this.name = name;
 this.getName = function() {
  console.log(this.name)
 };
 this.delayGetName = function() {
  setTimeout(this.getName.bind(this),1000)
 };
}
var me = new Coder('Jins')
me.delayGetName()//延迟一秒输出Jins

Das ist es einfach, das this von setTimeout direkt an das äußere this zu binden.

Ausführlichere Erläuterungen zu bind()-Beispielen in der Funktion finden Sie auf der chinesischen PHP-Website!