Un article vous apprend la liaison souple de ceci en JavaScript

Tout d’abord, qu’est-ce que la reliure souple ?

La reliure dite souple est un mot correspondant à la reliure rigide. Avant d'expliquer la reliure souple en détail, jetons d'abord un coup d'œil à la reliure rigide. En JavaScript, la liaison de this est dynamique. Elle est liée lorsque la fonction est appelée. Ce vers quoi elle pointe dépend entièrement de l'endroit où la fonction est appelée. La situation est plus compliquée. Les règles de liaison incluent à elles seules la liaison par défaut et la liaison implicite. , liaison explicite, nouvelle liaison, etc., et la liaison matérielle est un type de liaison explicite, généralement en appelant les fonctions apply(), call() ou bind( ) méthode fournie dans ES5 pour implémenter la liaison matérielle.

Quels sont les problèmes avec la liaison matérielle et pourquoi une liaison souple est nécessaire ?

Que les trois méthodes ci-dessus soient bonnes ou non, vous pouvez forcer la liaison de cette fonction à l'objet spécifié ? selon vos propres idées (en plus d'utiliser une nouvelle liaison pour modifier la liaison matérielle), il y a un problème avec la liaison matérielle, c'est-à-dire qu'elle réduira la flexibilité de la fonction, et après la liaison matérielle, vous ne pourrez plus utiliser la liaison implicite ou une liaison explicite pour modifier ce pointage.

Dans ce cas, une implémentation appelée soft Binding apparaît, c'est-à-dire que grâce à Soft Binding, nous espérons que cela ne pointera plus vers l'objet global par défaut (mode non strict) ou undefined (mode strict), mais pointe vers un objet en dehors des deux (cela a le même effet qu'une liaison dure), mais conserve en même temps la différence entre une liaison implicite et une liaison explicite. La capacité pointée par ceci peut alors être modifiée .

L'implémentation spécifique de la liaison souple

Ici, j'utilise l'implémentation de code de la liaison souple dans "JavaScript You Don't Know" :

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;
        };
}

Jetons d'abord un coup d'œil à l'effet, puis discutons de sa mise en œuvre.

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
*/

Vous pouvez voir que la reliure souple a pris effet. Examinons de plus près l'implémentation de softBind().

Dans la première ligne, portez d'abord le jugement. S'il n'y a pas de méthode softBind() sur le prototype de la fonction, ajoutez-la, puis transmettez Array.prototype. slice.call( arguments,1) Obtenez les paramètres externes entrants. Ceci est en fait fait ici pour le currying de fonction, c'est-à-dire que cela permet de définir certains paramètres à l'avance lors de la liaison logicielle, puis de les transmettre lors de l'appel de la fonction. D'autres paramètres (vous pouvez rechercher sur Internet des explications détaillées sur le currying des fonctions) renvoient finalement une fonction bound pour former une fermeture à ce moment-là, lorsque la fonction appelle softBind() Après cela. , ce que vous obtenez est la fonction bound, telle que la var fooOBJ=foo.softBind(obj1) ci-dessus.

Dans la fonction bound, elle déterminera d'abord la position d'appel de la fonction (comme fooOBJ) après avoir appelé la liaison logicielle, ou le point de son this If !this (this. pointe vers undefined ) ou this===(window||global) (cela pointe vers l'objet global), puis liez this de la fonction au paramètre obj passé dans softBind. Si cela ne pointe pas vers undefind ou l'objet global à ce moment-là, liez-le à la fonction vers laquelle il pointe actuellement (c'est-à-dire une liaison implicite ou une liaison explicite). Le deuxième paramètre de fn.apply correspond aux paramètres requis pour exécuter foo, qui est composé des arguments ci-dessus (paramètres externes) et des arguments internes (paramètres internes), qui sont le curry mentionné ci-dessus.

En fait, quand j'ai lu cette fonction pour la première fois, j'étais un peu confus. J'avais quelques questions, comme la phrase var fn=this Quand foo appelle softBind via foo.softBind(), à qui fn pointe-t-il ? Est-ce qu'il pointe vers foo ou softBind ? Nous pouvons écrire un test de démonstration, et ensuite nous pouvons voir clairement vers quoi fn pointe :

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

On peut voir que le pointage de fn (ou ceci) suit toujours la liaison de cela Selon les règles, la fonction softBind est définie dans le prototype de Function Function.prototype, mais une fonction en JavaScript n'appartient jamais à un objet (contrairement aux classes dans d'autres langages tels que la méthode Java définie à l'intérieur), mais cette fonction est référencée en interne dans l'objet, donc lorsqu'elle est appelée des deux manières suivantes, fn (ou ceci) est implicitement lié à foo et Fonction respectivement prototype, donc 3 et 4 sont respectivement sortis. Le fn.apply() suivant est équivalent à foo.apply() .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!