Préface
Grâce aux méthodes Call (), appliquer () et lier (), nous pouvons facilement emprunter des méthodes à d'autres objets sans l'hériter de ces objets.
Méthodes d'emprunt en JavaScript
En JavaScript, les fonctions ou les méthodes d'autres objets peuvent parfois être réutilisées, pas nécessairement définies sur l'objet lui-même ou sur le prototype. Grâce aux méthodes Call (), appliquer () et lier (), nous pouvons facilement emprunter des méthodes à d'autres objets sans les hériter. Il s'agit d'une méthode courante utilisée par les développeurs JavaScript professionnels.
Méthode prototype
Dans JavaScript, à l'exception des types de données primitifs inchangés, tels que la chaîne, le nombre et le booléen, presque toutes les données sont des objets. Le tableau est un objet adapté à la traversée et à la conversion des séquences ordonnées. Son prototype a des méthodes faciles à utiliser telles que Slice, Join, Push et Pop.
Un exemple courant est que lorsque les objets et les tableaux sont des structures de données du type de liste, les objets peuvent "emprunter" des méthodes à des tableaux. La méthode la plus courante à emprunter est Array.prototype.slice .
fonction myfunc () {// error, les arguments sont un objet comme un tableau, pas un réel arruté arguments.sort (); // "emprunter" la méthode du tableau Slice de son prototype, qui prend un objet comme un tableau (clé: valeur) // et renvoie un réel array var args = array.prototype.slice.call (arguments); // Args est désormais un vrai tableau, il peut donc utiliser la méthode tri () de Array Args.Sort (); } myfunc («bananes», «cerises», «pommes»);Les méthodes d'emprunt fonctionnent parce que les méthodes d'appel et d'application permettent des fonctions d'appel dans différents contextes, ce qui est également un bon moyen de réutiliser les fonctions existantes sans avoir à hériter d'autres objets. En fait, les tableaux définissent de nombreuses méthodes courantes dans les prototypes, tels que la jointure et le filtre:
// Prenez une chaîne "ABC" et produit "a | b | carray.prototype.join.call ('abc', '|'); // prendre une chaîne et supprimer tous les non Vowelsarray.prototype.filter.Call ('Abcdefghijk', fonction (val) {return ['a', 'e', 'i' ',' o '. -1;}). JOIN (''); On peut voir que non seulement les objets peuvent emprunter des méthodes de tableau, mais aussi des chaînes. Mais parce que 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 comme ça est très verbeux et deviendra bientôt ennuyeux. Un moyen plus efficace consiste à utiliser des littéraux pour atteindre le même objectif.
En utilisant des méthodes d'emprunt littérales
Les littéraux sont une structure de syntaxe qui suit les règles JavaScript, MDN l'explique comme ceci:
En JavaScript, l'utilisation des littéraux peut représenter des valeurs. Ce sont des valeurs fixes, soit des variables, soit données littéralement dans le script.
Les littéraux peuvent être abrégés en tant que prototype:
[] .slice.call (arguments); []. join.call ('abc', '|'); ''. toupperase.call (['minas', 'words', 'in', 'a', 'phrase']). Split (',');Cela ne semble pas si verbeux, mais c'est encore un peu laid de devoir fonctionner directement sur [] et "" pour emprunter la méthode. 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 joinle = [] .join; join.Call ('ABC', '|'); var touppercase = '' .touppercase; touppercase.call (['minuscules', 'words', 'in', 'a', 'phrase']). Split (',');Avec des références aux méthodes d'emprunt, nous pouvons facilement l'appeler avec Call (), qui peut également réutiliser le code. Adhérant au principe de la réduction de la redondance, voyons si nous pouvons emprunter des méthodes sans avoir à écrire un appel () ou appliquer () chaque fois que nous appelons:
var slice = function.prototype.call.bind (array.prototype.slice); Slice (arguments); var joind = function.prototype.call.bind (array.prototype.join); join ('ABC', '|'); var toupperase = function.prototype.call.bind (string.prototype.touppercase); touppercase (['minuscules', 'words', 'in', 'a', 'phrase']). Split (','); Comme vous pouvez le voir, vous pouvez désormais utiliser Function.prototype.call.bind pour lier statiquement la méthode "empruntée" à différents prototypes. Mais comment la phrase var slice = Function.prototype.call.bind(Array.prototype.slice) fonctionne réellement?
Comprendre function.prototype.call.bind
Function.prototype.call.bind peut sembler un peu compliqué à première vue, mais il peut être très utile de comprendre comment cela fonctionne.
Function.prototype.call est une référence qui "appelle" une fonction et définira sa valeur "cette" utilisation dans une fonction.
Notez que "bind" renvoie une nouvelle fonction avec sa valeur "cette". Par conséquent, le "this" de la nouvelle fonction renvoyée par .bind(Array.prototype.slice) est toujours la fonction array.prototype.slice.
Pour résumer, la nouvelle fonction appelle la fonction "appel", et sa fonction "ce" est la fonction "tranche". L'appel Slice () pointera vers la méthode précédemment qualifiée.
Méthodes pour personnaliser les objets
L'héritage est excellent, mais les développeurs l'utilisent généralement lorsqu'ils souhaitent réutiliser certaines fonctionnalités communes entre les objets ou les modules. Il n'est pas nécessaire d'utiliser l'héritage uniquement pour la réutilisation du code, car des méthodes d'emprunt simples peuvent être compliquées dans la plupart des cas.
Nous avons seulement discuté d'emprunt des méthodes natives auparavant, mais l'emprunt de n'importe quelle méthode est OK. Par exemple, le code suivant peut calculer le score du joueur du jeu de points:
var scorealculator = {getSUM: function (résultats) {var score = 0; pour (var i = 0, len = result.Length; i <len; i ++) {score = score + résultats [i]; } Score de retour; }, getScore: function () {return scoreCalculator.getsum (this.results) / this.handicap; }}; var player1 = {Résultats: [69, 50, 76], handicap: 8}; var player2 = {résultats: [23, 4, 58], handicap: 5}; var score = function.prototype.call.bind (scorecalculator.getScore); // score: 24.375Console.log ('score:' + score (joueur1)); // score: 17Console.log ('score:' + score (Player2));Bien que l'exemple ci-dessus soit très franc, on peut voir que, tout comme les méthodes natives, les méthodes définies par l'utilisateur peuvent être facilement empruntées.
Résumer
L'appel, la liaison et l'application peuvent modifier la façon dont les fonctions sont appelées et sont souvent utilisées lors de l'emprunt des fonctions. La plupart des développeurs connaissent l'emprunt des méthodes natives, mais empruntent rarement des méthodes personnalisées.
Ces dernières années, la programmation fonctionnelle de JavaScript s'est bien développée. Comment utiliser function.prototype.call.bind pour emprunter la méthode plus pratique? On estime que de tels sujets deviendront de plus en plus courants.
Ce qui précède est le résumé des méthodes d'emprunt en JavaScript. J'espère qu'il sera utile pour tout le monde de comprendre les méthodes d'emprunt en JavaScript.