Natives JS implementiert Call-, Apply- und Bind-Methoden (detaillierte Erklärung)

Zusammenfassung

Wir wissen, dass wir, wenn wir die Richtung ändern wollen, drei Möglichkeiten haben, dies zu tun.
call und apply sind direkte Aufrufe, während bind eine Methode zurückgibt und nicht direkt aufgerufen wird.

Wenn wir es tiefer verstehen wollen, dann können wir es selbst umsetzen.

Denken wir zunächst einmal darüber nach, dass der Aufrufer dieser drei Methoden eine Methode ist, irgendeine Methode.

Da dies der Fall ist, können alle Methoden diese drei Methoden wieder aufrufen, also müssen die drei Methoden, die wir geschrieben haben, unter dem Prototyp von Function geschrieben werden.

Mit dieser Idee können wir Folgendes umsetzen:

Aufrufmethode

Sehen wir uns zunächst an, wie die Aufrufmethode aufgerufen wird:

let p1 = {
    
    
  name: 'lisi'
}

let a = function (arg1, arg2) {
    
    
  console.log(arg1, arg2);
  console.log(this.name);
}

a.call(p1, 'aa', 'bb');

Wir können sehen, dass unter den Parametern, die von der Aufrufmethode übergeben werden, der erste das geänderte this ist, das auf das Objekt zeigt, und der Rest die Parameter der ursprünglichen Methode sind.


Die Aufrufmethode, die wir selbst geschrieben haben, besteht also darin, Argumente zu verarbeiten, aber Argumente sind iterierbare Objekte, daher ist es bequemer, wenn wir sie zuerst in ein Array konvertieren.

Hier verwenden wir die Methode Array.from(), um die Argumente umzuwandeln.


Wie ändern wir also die Richtung in der Aufrufmethode?
Tatsächlich ist es auch sehr einfach, weil wir das Objekt von p1 erhalten können, wir müssen nur eine Methode unter p1 hinzufügen , die ursprüngliche Methode kopieren und sie direkt aufrufen .


In einem anderen Fall, wenn die ursprüngliche Funktion einen Rückgabewert hat, müssen wir uns auch damit befassen.

Das heißt, wenn Sie die neue Methode direkt aufrufen, verwenden Sie eine Variable zum Empfangen und Zurückgeben von .

Function.prototype.mycall = function () {
    
    
  let arr = Array.from(arguments)
  let newThis = arr.shift();
  newThis.fun = this;
  let result = newThis.fun(...arr);
  return result
}

Methode anwenden

Sehen wir uns die Verwendung der apply-Methode an:

a.apply(p1, ['aa', 'bb'])

Wie Sie sehen können, ist der zweite Parameter der apply-Methode ein Array, sodass wir Argumente nicht in ein Array umwandeln müssen.

Wir können also direkt nach der Aufrufmethode schreiben

Function.prototype.myapply = function () {
    
    
  let newThis = arguments[0];
  let arr = arguments[1];
  newThis.fun = this;
  let result = newThis.fun(...arr);
  return result
}

Bindungsmethode

Schauen wir uns zuerst an, wie man die Methode bind verwendet.

let x = a.bind(p1, 'aa', 'bb');
x();

Das heißt, normalerweise ruft unsere bind-Methode im Vergleich zur call-Methode nicht direkt auf und gibt eine neue Methode zurück

Wir müssen also eigentlich nur die im Aufruf direkt aufgerufene Methode in eine Funktion stecken und die Funktion zurückgeben .

Function.prototype.mybind = function () {
    
    
  let arr = Array.from(arguments)
  let newThis = arr.shift();
  newThis.fun = this;
  return function () {
    
    
    newThis.fun(...arr)
  }
}

Supongo que te gusta

Origin blog.csdn.net/weixin_46726346/article/details/119749272
Recomendado
Clasificación