So implementieren Sie Call, Apply und Binding in nativem JS

1. Implementieren Sie den Anruf

Schritt:

Legen Sie die Funktion als Eigenschaft des Objekts fest.
Weisen Sie dies der Funktion zu und übergeben Sie die angegebenen Parameter, um die Funktion auszuführen.
Löschen Sie diese Funktion nach der Ausführung;
Wenn keine Parameter übergeben werden, wird standardmäßig auf das Fenster verwiesen.

Function.prototype.mycall = Funktion (Kontext, ...Argumente) {
    //Beurteilen Sie, ob es sich um eine Funktion handelt. Wenn es keine Funktion ist, wird ein Fehler gemeldet, if (typeof this !== "function") {
        throw new Error("keine Funktion");
    }
    Kontext = Kontext || Fenster;
    Kontext.fn = dies;
    const res = Kontext.fn(...args);
    lösche context.fn;
    Rückgabewert;
}

Testcode:

varname = "Li Hui", Alter = 25;
var obj = {
    Name: "Zhou Guo",
    objAge: dieses.Alter,
    myFun: Funktion (fm, zu) {
        console.log(`Name: ${this.name}, Alter: ${this.age}, von: ${fm}, bis: ${to}`)
    }
};
var Person = {
    Name: "jüngerer Bruder",
    Alter: 12,
};

Function.prototype.mycall = Funktion (Kontext, ...Argumente) {
    //Beurteilen Sie, ob es sich um eine Funktion handelt. Wenn es keine Funktion ist, wird ein Fehler gemeldet, if (typeof this !== "function") {
        throw new Error("keine Funktion");
    }
    Kontext = Kontext || Fenster;
    Kontext.fn = dies;
    const res = Kontext.fn(...args);
    lösche context.fn;
    Rückgabewert;
}

obj.myFun.mycall(Person, „Chengdu“, „Renshou“); //Name: jüngerer Bruder, Alter: 12, von: Chengdu, nach: Renshou

2. Implementieren Sie apply

Function.prototype.myApply = Funktion (Kontext, ...Argumente) {
    //Beurteilen Sie, ob es sich um eine Funktion handelt. Wenn es keine Funktion ist, wird ein Fehler gemeldet, if (typeof this !== "function") {
        throw new Error("keine Funktion");
    }
    Kontext = Kontext || Fenster;
    Kontext.fn = dies;
    args = args && args[0] || [];
    const Ergebnis = Kontext.fn(...args);
    lösche context.fn;
    Ergebnis zurückgeben;
}

Testcode:

obj.myFun.myApply(person, ["Chengdu", "Renshou"]); //Name: jüngerer Bruder, Alter: 12, von: Chengdu, nach: Renshou

3. Implementieren Sie Bind

Die Methode bind() bindet hauptsächlich eine Funktion an ein Objekt. bind() erstellt eine Funktion und der Wert dieses Objekts im Funktionskörper wird an den Wert des ersten Parameters gebunden, der an bind() übergeben wird.

Methode 1: Verwenden von „Apply“

Funktion.prototype.myBind = Funktion () {
    let self = this; //Ursprüngliche Funktion speichern let context = [].shift.call(arguments); //Den this-Kontext speichern, der gebunden werden muss let args = [...arguments]; //Die restlichen übergebenen Parameter in ein Array umwandeln return function () { //Eine neue Funktion zurückgeben self.apply(context,[].concat.call(args,[...arguments]));
    }
}

ES6 vereinfacht es:

Function.prototype.myBind = Funktion (Kontext, ...args1) {
        return (...args2) => { //Pfeilfunktion zurückgeben, diese ist an das Funktionsobjekt gebunden, das diese Methode aufruft. Kontext = Kontext || Fenster;
            return this.apply(context, args1.concat(args2));//Parameter zusammenführen}
    }

Methode 2: Call and Apply nicht verwenden

Kombinieren Sie den obigen Code mit dem handgeschriebenen JS-Apply-Code:

Function.prototype.myBind = Funktion (Kontext, ...args1) {
    return (...args2) => { //Pfeilfunktion zurückgeben, diese ist an das Funktionsobjekt gebunden, das diese Methode aufruft. Kontext = Kontext || Fenster;
        Kontext.fn = dies;
        const args = args1.concat(args2);
        const res = Kontext.fn(...args);
        lösche context.fn;
        Rückgabewert;
    }
}

Testcode:

obj.myFun.myBind(person, "Chengdu", "Renshou")(); //Name: jüngerer Bruder, Alter: 12, von: Chengdu, nach: Renshou

Oben sind die Details, wie natives JS Aufruf, Anwenden und Binden implementiert. Weitere Informationen zur JS-Implementierung von Aufruf, Anwenden und Binden finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:

Beispielcode für die Verwendung von JS zur einfachen Implementierung der Methoden „Apply“, „Call“ und „Bind“
Detaillierte Erläuterung der Implementierungsprinzipien von call, apply und bind in JavaScript
So implementieren Sie eine einfache Version von Call, Apply, Binding mit 50 Zeilen Javascript-Code
Detaillierte Erklärung des Codes zur Implementierung von call, bind und apply in Javascript

<<: So setzen Sie das MySQL-Root-Passwort unter Windows zurück

>>: So verwenden Sie tcpdump zum Erfassen von Paketen im Linux-System