Analyse comparative de l'utilisation de call, apply et bind dans les connaissances javascript_Basic

Concernant l'utilisation des trois fonctions call, apply et bind, c'est un point de connaissance insurmontable lors de l'apprentissage du langage JavaScript. Ci-dessous, je résumerai l'utilisation de chacun des trois scénarios d'application courants.

Regardons d'abord la fonction d'appel, qui peut être comprise comme « emprunter » et « demander ». Imaginez le scénario suivant : vous êtes seul et errant dehors, et vous souhaitez appeler chez vous si quelque chose d'urgent se produit, mais malheureusement, votre téléphone n'est plus payé, ou est à court de batterie, ou est tombé dans un piège. votre téléphone ne peut tout simplement pas être utilisé. Mais vous devez passer cet appel, vous pouvez donc emprunter le téléphone portable d'un ami, le téléphone portable d'un voisin ou un téléphone public. De cette façon, vous pouvez passer un appel même si vous n'avez pas de téléphone portable disponible. sur quel téléphone vous avez appelé, cela n'a pas d'importance. Quoi qu'il en soit, l'effet est le même que si vous appeliez depuis votre propre téléphone portable. L'intention initiale de la fonction d'appel est similaire à celle-ci. Ci-dessous, j'utilise du code pour simuler son scénario d'application :

Copier le code Le code est le suivant :

var grenouille = {
nom : 'grenouille',
             dites : function(){
alert(this.name);
>
>
var lapin = {
nom : 'lapin'
>
frog.say.call(rubbit) // lapin

Rubbit est un objet muet, mais il veut prononcer son nom. Il est impossible d'y parvenir avec ses propres capacités. Heureusement, il a un bon ami nommé grenouille, et il peut parler. Alors, Rubbit a demandé à Frog de réaliser ce souhait. Le premier paramètre de frog.say.call() doit être renseigné avec la personne qui fait la demande, que les avocats aiment appeler le client. Ici, Rubbit demande à la grenouille de dire son nom, alors remplissez Rubbit. De cette façon, lors de la prononciation, le nom du rubbit sera recherché à la place du nom de la grenouille. À quoi cela ressemblerait-il si je remplissais une grenouille ici ? C’est comme se demander de faire quelque chose. Se nourrir de sel est également une bonne chose. Vous pouvez l'essayer :

Copier le code Le code est le suivant :

var grenouille = {
nom : 'grenouille',
             dites : function(){
alert(this.name);
>
>
var lapin = {
nom : 'lapin'
>
grenouille.say.call(grenouille) // grenouille

En vous nourrissant d'un sac de sel, vous devez avoir prononcé votre nom. Il n'y a aucune surprise. Jetons un coup d'œil à l'utilisation classique de call :

Copier le code Le code est le suivant :

//Convertir les paramètres en objets de tableau réels
fonction grenouille(){
var arr = [].slice.call(arguments);
console.log(arguments.slice,arr.slice)
// fonction non définie slice() { [code natif] }
>
grenouille(1,2,3,4)

Après un tel appel, nous pouvons utiliser l'objet arguments comme objet tableau. Il existe de nombreuses utilisations pour l'appel. Ouvrez le code source de jquery et vous pourrez facilement trouver de nombreuses applications. Je ne les énumérerai pas tous ici, mais revenons à notre scène précédente. C'est trop simple d'emprunter un téléphone, j'ai vraiment envie de rapporter quelque chose avec moi. Après tout, je m'éloigne depuis. depuis tant d'années et je n'ai pas accordé le respect nécessaire aux personnes âgées. Ce serait certainement formidable de revenir en arrière et d'acheter des spécialités locales. Cependant, la pression de la vie à l'extérieur est si grande. En plus d'aller travailler, vous devez faire des heures supplémentaires tous les jours. Si vous demandez un congé, non seulement votre salaire sera déduit, mais vous dépenserez également beaucoup de frais de déplacement. Le montant total est probablement suffisant pour que les personnes âgées restent à la maison pendant un an. Ce n'était pas rentable d'y penser, alors j'ai pensé à appeler cette fonction et à lui demander de l'aide. C'est un choix très judicieux de la reprendre avec moi. De plus, elle ne facture pas de frais, et il n'y en a pas. limite de quantité et de poids. Vous pouvez en apporter autant que vous le souhaitez. Permettez-moi de le démontrer à nouveau avec le code :

Copier le code Le code est le suivant :

var grenouille = {
nom : 'grenouille',
Envoyer : fonction (argent, nourriture, lait, sucre){
alerte(argent nourriture lait suagate);
>
>
var lapin = {
nom : 'lapin'
>
frog.send.call(rubbit,'money','food','milk','suagate')

Si vous avez de l'argent et de la volonté, vous pouvez même renvoyer quelques iPhone6 ​​​​plus ou quelque chose comme ça. .^_^.

L'appel est presque terminé à ce stade. Je ne sais pas si le mélodrame ci-dessus vous a fait comprendre de quoi parle l'appel. Si cela a juste suscité votre mal du pays, alors je suis désolé.

call a aussi un demi-frère appelé apply. Si vous comprenez comment utiliser call, alors apply est en fait la même chose. La seule différence est qu'apply n'aime pas transmettre des choses. respectueux de l'environnement. Il fournit donc une grande boîte pour contenir les objets, et vous mettez simplement tout ce que vous souhaitez transférer dans la boîte qu'il fournit. Cette grande boîte est un tableau. L'exemple ci-dessus, s'il est utilisé, ressemblerait à ceci :

Copier le code Le code est le suivant :

var grenouille = {
nom : 'grenouille',
Envoyer : fonction (argent, nourriture, lait, sucre){
alerte(argent nourriture lait suagate);
>
>
var lapin = {
nom : 'lapin'
>
//Faites attention à la différence de paramètres
frog.send.apply(rubbit,['money','food','milk','suagate'])

Ce qui précède est la vie passée et présente de la candidature et de l'appel. Mais ils ne s'attendaient pas à ce que le père de Apply et Call ait fait fortune dans l'immobilier il y a quelques années, et il avait également un fils illégitime nommé Bind Outside. Bien qu’il ait fait ses débuts quelques années plus tard que ses deux frères, appelle et postule, ses capacités ne doivent pas être sous-estimées. Cependant, son identité n'est pas reconnue dans certains endroits. Comme IE6. Ci-dessous, j'utiliserai du code pour démontrer ses compétences :

Copier le code Le code est le suivant :

var nom = 'rubbit';
var grenouille = {
nom : 'grenouille',
           dites : function(){
             setTimeout(function(argent,lait){
alerte(this.name argent lait)
              }.bind(this,'money','milk'),1000)
>
>
grenouille.say();

Par comparaison, nous avons constaté que bind peut être utilisé directement après function(){}. Cela équivaut à omettre call et apply, et à spécifier le client et les paramètres à transmettre directement après la fonction. En termes de style de transmission des paramètres, cela ressemble plus à un appel.

Concernant le bind, regardons un usage classique :

Copier le code Le code est le suivant :

var obj = {
Nom : 'grenouille'
>
document.addEventListener('click',function(){
​​ alert(this.name); // grenouille
}.bind(obj),false);

Pour résumer, les similitudes entre ces trois frères, appliquer, appeler et lier, sont :

1. Le premier paramètre est la portée limitée, c'est-à-dire le territoire sur lequel le travail est effectué.

2. Vous pouvez transmettre des paramètres

La différence est :

apply, call a une meilleure compatibilité et bind n'est pas pris en charge par certains navigateurs de versions inférieures.

Les paramètres transmis par apply doivent être encapsulés dans un tableau, tandis que call et bind répertorient les paramètres à transmettre un par un.

Avez-vous une compréhension plus approfondie de l'utilisation des trois fonctions call, apply et bind ? J'espère que cet article pourra vous être utile ?