Heim > Web-Frontend > js-Tutorial > Ein Artikel, der Sie über die Soft-Bindung in JavaScript informiert

Ein Artikel, der Sie über die Soft-Bindung in JavaScript informiert

无忌哥哥
Freigeben: 2018-07-20 09:28:11
Original
1385 Leute haben es durchsucht

Was ist Softbindung?

Die sogenannte Soft-Bindung ist ein Wort, das der Hard-Bindung entspricht. Bevor wir die Soft-Bindung im Detail erklären, werfen wir zunächst einen Blick auf die Hard-Bindung. In JavaScript ist die Bindung dynamisch, wenn die Funktion aufgerufen wird. Die Situation ist komplizierter , explizite Bindung, neue Bindung usw. und harte Bindung ist eine Art expliziter Bindung, normalerweise durch Aufrufen der Funktionen apply(), call() oder bind( )Methode, die in ES5 bereitgestellt wird, um eine feste Bindung zu implementieren.

Was sind die Probleme bei der harten Bindung und warum ist eine weiche Bindung erforderlich?

Unabhängig davon, ob die oben genannten drei Methoden gut sind oder nicht, können Sie die Bindung der Funktion an das angegebene Objekt erzwingen Nach Ihren eigenen Vorstellungen (Zusätzlich zur Verwendung einer neuen Bindung zum Ändern der harten Bindung) gibt es bei der harten Bindung ein Problem, das darin besteht, dass die Flexibilität der Funktion verringert wird und Sie nach der harten Bindung keine implizite Bindung mehr verwenden können oder explizite Bindung, um dieses Zeigen zu ändern.

In diesem Fall erscheint eine Implementierung namens Soft Binding, das heißt, wir hoffen, dass diese durch Soft Binding nicht mehr standardmäßig (nicht strenger Modus) oder undefiniert (strenger Modus), zeigt aber auf ein Objekt außerhalb der beiden (dies hat den gleichen Effekt wie eine harte Bindung), behält aber gleichzeitig den Unterschied zwischen impliziter Bindung und expliziter Bindung bei. Die dadurch angezeigte Fähigkeit kann dann geändert werden .

Die spezifische Implementierung der Soft-Bindung

Hier verwende ich die Code-Implementierung der Soft-Bindung in „JavaScript, das Sie nicht kennen“:

if(!Function.prototype.softBind){ 
    Function.prototype.softBind=function(obj){ 
        var fn=this;
        var args=Array.prototype.slice.call(arguments,1);
        var bound=function(){ 
            return fn.apply( (!this||this===(window||global))?obj:this,
            args.concat.apply(args,arguments));
            };
        bound.prototype=Object.create(fn.prototype);
        return bound;
        };
}
Nach dem Login kopieren

Schauen wir uns zunächst die Wirkung an und besprechen dann die Umsetzung.

function foo(){
    console.log("name: "+this.name);
    }
var obj1={name:"obj1"},
obj2={name:"obj2"},
obj3={name:"obj3"};
var fooOBJ=foo.softBind(obj1);
fooOBJ();//"name: obj1" 在这里软绑定生效了,成功修改了this的指向,将this绑定到了obj1上1
obj2.foo=foo.softBind(obj1);
obj2.foo();//"name: obj2" 在这里软绑定的this指向成功被隐式绑定修改了,绑定到了obj2上
fooOBJ.call(obj3);//"name: obj3" 在这里软绑定的this指向成功被硬绑定修改了,绑定到了obj3上
setTimeout(obj2.foo,1000);//"name: obj1"18 
/*
*回调函数相当于一个隐式的传参,如果没有软绑定的话,这里将会应用默认绑定将this绑定到全局环
*境上,但有软绑定,这里this还是指向obj1
*/
Nach dem Login kopieren

Sie können sehen, dass die Softbindung Wirkung gezeigt hat. Schauen wir uns die Implementierung von

softBind() genauer an.

Übergeben Sie in der ersten Zeile zunächst die Beurteilung. Wenn für den Prototyp der Funktion keine Methode

softBind() vorhanden ist, fügen Sie diese hinzu und übergeben Sie dann Array.prototype. Slice.call( Argumente,1) Rufen Sie die eingehenden externen Parameter ab. Dies geschieht hier tatsächlich für das Funktions-Currying, das heißt, es ermöglicht, dass einige Parameter im Voraus während der Soft-Bindung festgelegt und dann beim Aufruf der Funktion übergeben werden. Andere Parameter (Sie können im Internet nach detaillierten Erklärungen zum Funktions-Currying suchen) geben schließlich eine gebundene-Funktion zurück, um einen Abschluss zu bilden. Zu diesem Zeitpunkt, wenn die Funktion softBind() aufruft , was Sie erhalten, ist die Funktion bound, wie die obige var fooOBJ=foo.softBind(obj1) .

In der Funktion

bound wird nach dem Aufruf der Soft-Bindung zunächst die Aufrufposition der Funktion (z. B. fooOBJ) oder der Punkt ihres This If !this (this) bestimmt zeigt auf undefiniert) oder this===(window||global) (dies zeigt auf das globale Objekt), dann binden Sie dieses der Funktion an den in softBind übergebenen Parameter obj. Wenn dies zu diesem Zeitpunkt nicht auf Undefind oder das globale Objekt zeigt, binden Sie es an die Funktion, auf die es gerade zeigt (d. h. implizite Bindung oder explizite Bindung). Der zweite Parameter von fn.apply sind die zum Ausführen von foo erforderlichen Parameter, die durch die oben genannten Argumente (externe Parameter) und die internen Argumente (interne Parameter) verbunden sind, was dem oben erwähnten Curry entspricht.

Tatsächlich war ich etwas verwirrt, als ich diese Funktion zum ersten Mal las, wie z. B. den Satz var fn=this, wenn foo softBind über foo.softBind() aufruft. Auf wen zeigt fn? Zeigt es auf foo oder softBind? Wir können einen Demotest schreiben und dann klar sehen, worauf Fn hinweist:

var a=2; 
function foo(){ 
}
foo.a=3;
Function.prototype.softBind=function(){ 
    var fn=this;
    return function(){
        console.log(fn.a);
    }
};
Function.prototype.a=4;
Function.prototype.softBind.a=5;
foo.softBind()();//3
Function.prototype.softBind()();//4
Nach dem Login kopieren

Es ist ersichtlich, dass der Sinn von Fn (oder diesem) immer noch den verbindlichen Regeln von folgt Dies Ja, die Funktion

softBind ist im Funktionsprototyp Function.prototype definiert, aber Funktionen in JavaScript werden niemals zu einem Objekt „gehören“ (im Gegensatz zu Definitionen in Klassen in anderen Sprachen, z als Java-Methode), aber auf diese Funktion wird intern im Objekt verwiesen, sodass fn (oder this) beim Aufruf auf die folgenden zwei Arten implizit an foo bzw. Function.prototype , also werden jeweils 3 und 4 ausgegeben. Das folgende fn.apply() entspricht foo.apply() .

Das obige ist der detaillierte Inhalt vonEin Artikel, der Sie über die Soft-Bindung in JavaScript informiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage