Explication détaillée de plusieurs méthodes d'emprunt en JavaScript (tutoriel graphique)

Jetons un coup d'œil à une introduction détaillée aux méthodes d'emprunt en JavaScript Remarque : cet article suppose que vous maîtrisez les connaissances pertinentes sur l'utilisation de call(), apply() et bind() et les différences entre elles, j'espère. this Cet article peut vous informer sur les méthodes d'emprunt en JavaScript.

Préface

Grâce aux méthodes call(), apply() et bind(), nous pouvons facilement emprunter des méthodes à d'autres objets sans en hériter.

Méthodes d'emprunt en JavaScript

En JavaScript, on peut parfois réutiliser des fonctions ou des méthodes d'autres objets, qui ne doivent pas forcément être définies sur l'objet lui-même ou sur son prototype. Grâce aux méthodes call(), apply() et bind(), nous pouvons facilement emprunter des méthodes à d’autres objets sans en hériter. Il s'agit d'une tactique courante utilisée par les développeurs JavaScript professionnels.

Méthode prototype

En JavaScript, à l'exception des types de données primitifs immuables, tels que la chaîne, le nombre et le booléen, presque toutes les données sont un objet . Array est un objet adapté au parcours et à la conversion de séquences ordonnées. Son prototype dispose de méthodes utiles telles que slice, join, push et pop.

Un exemple courant est que lorsque l'objet et le tableau sont tous deux des structures de données de type liste, l'objet peut "emprunter" des méthodes au tableau. La méthode la plus couramment utilisée est Array.prototype.slice.

function myFunc() {
 
  // error, arguments is an array like object, not a real array
  arguments.sort();
 
  // "borrow" the Array method slice from its prototype, which takes an array like object (key:value)
  // and returns a real array
  var args = Array.prototype.slice.call(arguments);
 
  // args is now a real Array, so can use the sort() method from Array
  args.sort();
 
}
 
myFunc('bananas', 'cherries', 'apples');

La raison pour laquelle les méthodes d'emprunt fonctionnent est que les méthodes d'appel et d'application permettent d'appeler des fonctions dans différents contextes, ce qui permet également de réutiliser des fonctionnalités existantes sans avoir à hériter de la bonne méthode pour les autres objets. En fait, les tableaux définissent de nombreuses méthodes courantes dans le prototype, telles que join et filter :

// takes a string "abc" and produces "a|b|c
Array.prototype.join.call('abc', '|');
 
// takes a string and removes all non vowels
Array.prototype.filter.call('abcdefghijk', function(val) {
  return ['a', 'e', 'i', 'o', 'u'].indexOf(val) !== -1;
}).join('');

On peut voir que non seulement les objets peuvent emprunter des tableaux Des méthodes et des chaînes sont également disponibles. Mais comme les méthodes génériques sont définies sur le prototype, vous devez utiliser String.prototype ou Array.prototype à chaque fois que vous souhaitez emprunter une méthode. Écrire de cette façon est verbeux et peut vite devenir ennuyeux. Un moyen plus efficace consiste à utiliser des littéraux pour atteindre le même objectif.

Utiliser la méthode d'emprunt littéral

Le littéral est une structure grammaticale qui suit les règles JavaScript. MDN l'explique de cette façon :

. En JavaScript, les valeurs peuvent être représentées à l'aide de littéraux. Ce sont des valeurs fixes, soit variables, soit données littéralement dans le script.
Les littéraux peuvent être abrégés en méthodes de prototype :

[].slice.call(arguments);
[].join.call('abc', '|');
''.toUpperCase.call(['lowercase', 'words', 'in', 'a', 'sentence']).split(',');

Cela n'a pas l'air si verbeux, mais vous devez opérer directement sur [] et "" Avec la méthode empruntée, c'est quand même un peu moche. Vous pouvez utiliser des variables pour enregistrer des références aux littéraux et aux méthodes, ce qui facilite l'écriture :

var slice = [].slice;
slice.call(arguments);
var join = [].join;
join.call('abc', '|');
 
var toUpperCase = ''.toUpperCase;
toUpperCase.call(['lowercase', 'words', 'in', 'a', 'sentence']).split(',');

Avec des références aux méthodes empruntées, nous pouvons facilement appeler en utilisant call() afin que vous puissiez réutiliser le code. Conformément au principe de réduction des redondances, voyons si on peut emprunter une méthode sans écrire call() ou apply() à chaque appel :

var slice = Function.prototype.call.bind(Array.prototype.slice);
slice(arguments);
 
var join = Function.prototype.call.bind(Array.prototype.join);
join('abc', '|');
 
var toUpperCase = Function.prototype.call.bind(String.prototype.toUpperCase);
toUpperCase(['lowercase', 'words', 'in', 'a', 'sentence']).split(',');

Comme vous pouvez le voir, vous pouvez désormais utiliser Function.prototype.call.bind pour lier statiquement des méthodes « empruntées » à différents prototypes. Mais var slice = Function.prototype.call.bind(Array.prototype.slice) comment fonctionne réellement cette phrase ?

Comprendre Function.prototype.call.bind

Function.prototype.call.bind Cela peut paraître compliqué au début, mais comprendre son fonctionnement peut être très bénéfique.

Function.prototype.call est une référence qui "appelle" une fonction et définira sa valeur "this" à utiliser dans la fonction.
Notez que "bind" renvoie une nouvelle fonction avec sa valeur "this". Par conséquent .bind(Array.prototype.slice) le "this" de la nouvelle fonction renvoyée est toujours la fonction Array.prototype.slice.

Pour résumer, la nouvelle fonction appellera la fonction "call", et son "this" est la fonction "slice". L’appel de slice() pointera vers la méthode précédemment qualifiée.

Méthodes d'objets personnalisés

L'héritage est génial, mais les développeurs souhaitent généralement réutiliser certains objets ou modules Utilisé uniquement à des fins générales fonctions. Il n'est pas nécessaire d'utiliser l'héritage uniquement pour la réutilisation du code, car les méthodes d'emprunt simples seront compliquées dans la plupart des cas.

Nous n'avons discuté auparavant que de l'emprunt de méthodes natives, mais emprunter n'importe quelle méthode est possible. Par exemple, le code suivant peut calculer le score du joueur du jeu à points :

var scoreCalculator = {
  getSum: function(results) {
    var score = 0;
    for (var i = 0, len = results.length; i < len; i++) {
      score = score + results[i];
    }
    return score;
  },
  getScore: function() {
    return scoreCalculator.getSum(this.results) / this.handicap;
  }
};
var player1 = {
  results: [69, 50, 76],
  handicap: 8
};
 
var player2 = {
  results: [23, 4, 58],
  handicap: 5
};
 
var score = Function.prototype.call.bind(scoreCalculator.getScore);
 
// Score: 24.375
console.log(&#39;Score: &#39; + score(player1));
 
// Score: 17
console.log(&#39;Score: &#39; + score(player2));

Bien que l'exemple ci-dessus soit très direct, on peut voir que c'est comme la méthode native, les méthodes définies par l'utilisateur peuvent également être facilement empruntées.

Résumé

Appeler, lier et appliquer peuvent changer la façon dont une fonction est appelée et sont souvent utilisés lors de l'emprunt de fonctions. La plupart des développeurs sont habitués à emprunter des méthodes natives, mais empruntent moins souvent des méthodes personnalisées.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Parlez en détail des propriétés et des méthodes de l'objet intégré Math en js (clair en un coup d'œil)

Méthode de chaîne utilisant JavaScript pour implémenter la correspondance de modèles

javascript cette explication détaillée (tutoriel graphique)

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!