Wie funktioniert die grundlegende Objekt-/Funktionsverkettung in Javascript?

Ich versuche, die Prinzipien der Verkettung von Funktionen im jQuery-Stil direkt in meinen Kopf zu bekommen. Damit meine ich:

var e = f1('test').f2().f3();

Ich habe ein Beispiel zum Laufen gebracht, ein anderes nicht. Ich werde diese unten posten. Ich möchte immer die ersten prinzipiellen Grundlagen lernen, wie etwas funktioniert, damit ich darauf aufbauen kann. Bisher hatte ich nur ein flüchtiges und loses Verständnis davon, wie Verkettung funktioniert, und ich stoße auf Fehler, die ich nicht intelligent beheben kann.

Was ich weiß:

1. Funktionen müssen sich selbst zurückgeben, auch bekannt als “return this;”
2. Verkettbare Funktionen müssen sich in einer übergeordneten Funktion befinden, auch bekannt als jQuery, .css() ist eine Untermethode von jQuery(), daher jQuery().css();
3. Die übergeordnete Funktion sollte entweder sich selbst oder eine neue Instanz von sich selbst zurückgeben.

Dieses Beispiel hat funktioniert:

var one = function(num){
    this.oldnum = num;

    this.add = function(){
        this.oldnum++;
        return this;
    }

    if(this instanceof one){
        return this.one;    
    }else{
        return new one(num);    
    }
}
var test = one(1).add().add();

Aber dieses hier nicht:

var gmap = function(){

    this.add = function(){
        alert('add');

        return this;    
    }   

    if(this instanceof gmap) {
        return this.gmap;   
    } else{
        return new gmap();  
    }

}
var test = gmap.add();

In JavaScript sind Funktionen erstklassige Objekte. Wenn Sie eine Funktion definieren, ist dies der Konstruktor für dieses Funktionsobjekt. Mit anderen Worten:

var gmap = function() {
    this.add = function() {
        alert('add');
    return this;
    }

    this.del = function() {
       alert('delete');
       return this;
    }

    if (this instanceof gmap) {
        return this.gmap;
    } else {
        return new gmap();
    }
}
var test = new gmap();
test.add().del();

Durch die Zuweisung der

new gmap();

zum Variablentest Sie haben nun ein neues Objekt konstruiert, das alle Eigenschaften und Methoden vom gmap()-Konstruktor (Klasse) “erbt”. Wenn Sie das obige Snippet ausführen, sehen Sie eine Warnung für „Hinzufügen“ und „Löschen“.

In Ihren obigen Beispielen bezieht sich “this” auf das Fensterobjekt, es sei denn, Sie packen die Funktionen in eine andere Funktion oder ein anderes Objekt.

Das Verketten ist für mich zunächst schwer zu verstehen, zumindest war es das für mich, aber als ich es verstanden hatte, wurde mir klar, wie mächtig ein Werkzeug sein kann.

Leider muss die direkte Antwort „nein“ lauten. Selbst wenn Sie die vorhandenen Methoden überschreiben können (was Sie wahrscheinlich in vielen UAs können, aber ich vermute, nicht in IE), würden Sie immer noch mit bösen Umbenennungen stecken bleiben:

HTMLElement.prototype.setAttribute = function(attr) { 
    HTMLElement.prototype.setAttribute(attr) //uh-oh;  
}

Das Beste, womit Sie wahrscheinlich davonkommen könnten, ist die Verwendung eines anderen Namens:

HTMLElement.prototype.setAttr = function(attr) {
    HTMLElement.prototype.setAttribute(attr);
    return this;
}

Um eine Funktion „umzuschreiben“, aber dennoch die ursprüngliche Version verwenden zu können, müssen Sie die ursprüngliche Funktion zunächst einer anderen Variablen zuweisen. Angenommen ein Beispielobjekt:

function MyObject() { };

MyObject.prototype.func1 = function(a, b) { };

Umzuschreiben func1 Gehen Sie für die Verkettbarkeit wie folgt vor:

MyObject.prototype.std_func1 = MyObject.prototype.func1;
MyObject.prototype.func1 = function(a, b) {
    this.std_func1(a, b);
    return this;
};

Hier ist ein Arbeitsbeispiel. Sie müssen diese Technik nur auf alle Standardobjekte anwenden, die Ihrer Meinung nach verkettet werden müssen.

Wenn Sie all diese Arbeit erledigt haben, stellen Sie vielleicht fest, dass es bessere Möglichkeiten gibt, das zu erreichen, was Sie zu tun versuchen, wie z. B. die Verwendung einer Bibliothek, die bereits über eine integrierte Verkettbarkeit verfügt. _{*Husten* jQuery *Husten*}

Lassen Sie mich zunächst sagen, dass ich dies mit meinen eigenen Worten erkläre.

Methodenverkettung ruft so ziemlich eine Methode des Objekts auf, das von einer anderen Funktion/Methode zurückgegeben wird. zum Beispiel (mit jquery):

$('#demo');

Diese jquery-Funktion wählt ein jquery-Objekt aus und gibt das DOM-Element mit der ID demo zurück. Wenn das Element ein Textknoten (Element) wäre, könnten wir eine Methode des zurückgegebenen Objekts verketten. zum Beispiel:

$('#demo').text('Some Text');

Solange also eine Funktion/Methode ein Objekt zurückgibt, können Sie eine Methode des zurückgegebenen Objekts mit der ursprünglichen Anweisung verketten.

Warum letztere nicht funktionieren, achten Sie darauf, wo und wann das Schlüsselwort verwendet wird this wird genutzt. Es ist höchstwahrscheinlich ein Kontextproblem. Wenn Sie anrufen thisStelle sicher das this bezieht sich auf dieses Funktionsobjekt selbst, nicht auf das Fensterobjekt/den globalen Geltungsbereich.

Ich hoffe, das hilft.

Rufen Sie die Methode einfach als var test = gmap().add();

da gmap eine Funktion und keine Variable ist