Une description de la surcharge de fonctions en JavaScript

Cet article présente principalement les instructions sur la surcharge de fonctions en JavaScript, qui ont une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Instructions

Il y a. pas de véritable surcharge de fonctions en JavaScript.

Surcharge de fonctions

Le nom de la fonction est le même, mais la liste des paramètres de la fonction est différente (y compris le nombre de paramètres et les types de paramètres), et différentes opérations sont effectuées en fonction des différents paramètres.

Prenons un exemple

function overload(a){
    console.log('一个参数')
}

function overload(a,b){
    console.log('两个参数')
}

// 在支持重载的编程语言中，比如 java
overload(1);         //一个参数
overload(1,2);    //两个参数


// 在 JavaScript 中
overload(1);         //两个参数
overload(1,2);    //两个参数

En JavaScript, si deux fonctions portant le même nom apparaissent dans la même portée, cette dernière écrasera la précédente, donc JavaScript n'a pas de réel sens .de surcharge.

Mais il existe différentes manières de simuler l'effet de la surcharge en JavaScript.

Examinons d'abord la première méthode, qui est implémentée via l'objet arguments

L'objet arguments est un objet de type tableau à l'intérieur de la fonction. lorsque la fonction est appelée.

function overload () {
  if (arguments.length === 1) {
    console.log('一个参数')
  }
  if (arguments.length === 2) {
    console.log('两个参数')
  }
}

overload(1);      //一个参数
overload(1, 2);  //两个参数

Cet exemple est très simple. Il détermine le nombre de paramètres en jugeant la propriété length de l'objet arguments, puis effectue quelle opération.

Mais quand il y a peu de paramètres, ce n'est pas grave. S'il y a plus de paramètres, il faut écrire beaucoup de jugements, ce qui est gênant.

Alors, regardons à nouveau un exemple classique
Avant de regarder cet exemple, regardons d'abord une exigence Nous avons un objet utilisateurs, et certains noms sont stockés dans l'attribut valeurs du. les utilisateurs s’y opposent.
Un nom se compose de deux parties, celle du côté gauche de l'espace est le prénom et celle du côté droit de l'espace est le nom de famille, comme ci-dessous.

var users = {
  values: ["Dean Edwards", "Alex Russell", "Dean Tom"]
};

Nous devons ajouter une méthode find à l'objet utilisateurs

Lorsqu'aucun paramètre n'est passé, le users .values entier est renvoyé
Lorsqu'un paramètre est passé, l'élément dont le prénom correspond à ce paramètre est renvoyé
Lorsque deux paramètres sont passés, les éléments qui correspondent à la fois au prénom et au nom sont renvoyés ;

Dans cette exigence, la méthode find doit effectuer différentes opérations en fonction du nombre de paramètres. Ensuite, nous utilisons une fonction addMethod pour ajouter la méthode find à l'objet utilisateur.

function addMethod (object, name, fn) {
  // 先把原来的object[name] 方法，保存在old中
  var old = object[name];

  // 重新定义 object[name] 方法
  object[name] = function () {
    // 如果函数需要的参数 和 实际传入的参数 的个数相同，就直接调用fn
    if (fn.length === arguments.length) {
      return fn.apply(this, arguments);

      // 如果不相同,判断old 是不是函数，
      // 如果是就调用old，也就是刚才保存的 object[name] 方法
    } else if (typeof old === "function") {
      return old.apply(this, arguments);
    }
  }
}

Fonction addMethod, qui reçoit 3 paramètres -
Le premier : l'objet auquel la méthode doit être liée,
Le second : le nom de la méthode liée,
le troisième : Méthodes qui doivent être liées

Lorsque la fonction addMethod détermine le nombre de paramètres, en plus d'utiliser l'objet arguments, elle utilise également l'attribut length de la fonction.

L'attribut length de la fonction renvoie le nombre de paramètres formels lorsque la fonction a été définie.

En termes simples, la longueur d'une fonction correspond au nombre de paramètres requis par la fonction, et arguments.length correspond au moment où la fonction est appelée, au nombre de paramètres réellement donnés à la fonction

function fn (a, b) {
  console.log(arguments.length)
}
console.log(fn.length);  // 2
fn('a');    // 1

Utilisons cette fonction addMethod

// 不传参数时，返回整个values数组
function find0 () {
  return this.values;
}
// 传一个参数时，返回firstName匹配的数组元素
function find1 (firstName) {
  var ret = [];
  for (var i = 0; i <p> La fonction addMethod profite des caractéristiques des fermetures et connecte chaque fonction via la variable old, permettant à toutes les fonctions de rester en mémoire. </p><p>Chaque fois que la fonction addMethod est appelée, un old sera généré, formant une fermeture. <br>Nous pouvons utiliser <code>console.dir(users.find)</code> pour imprimer la méthode de recherche sur la console pour voir. </p><p><img src="https://img.php.cn//upload/image/139/643/301/1531471079834608.jpg" title="1531471079834608.jpg" alt="Une description de la surcharge de fonctions en JavaScript"></p><p>L'exemple ci-dessus a été écrit par John Resig, le père de jQuery, sur son blog et dans la première édition de son livre "Secrets of the JavaScript ninja" Comme mentionné précédemment , La surcharge de fonctions est également expliquée dans le chapitre 4 du livre. La fonction addMethod dans l'article est l'exemple 4.15 du livre. Les amis intéressés peuvent y jeter un œil. </p><p>L'essence des exemples ci-dessus est de déterminer le nombre de paramètres et d'effectuer différentes opérations basées sur différents nombres. L'exemple ci-dessous consiste à effectuer différentes opérations en déterminant le type de paramètres. </p><h3>Jetons un coup d'œil à la méthode css( ) dans jQuery. La méthode </h3><blockquote>css() renvoie ou définit un ou plusieurs attributs de style de l'élément correspondant. </blockquote><p><code>css(name|pro|[,val|fn])</code> </p><p><img src="https://img.php.cn//upload/image/776/481/734/1531471070297469.png" title="1531471070297469.png" alt="Une description de la surcharge de fonctions en JavaScript"></p><p>On peut voir que la méthode css() a 5 situations de paramètres, dont 3 sont un paramètre, et les deux autres sont Deux paramètres. <br>Dans le cas d'un seul paramètre, si le type du paramètre est une chaîne ou un tableau, la valeur de l'attribut est obtenue, et si le paramètre est un objet, la valeur de l'attribut est définie. </p><p>La méthode css() de jQuery détermine quelle opération effectuer en jugeant le type du paramètre. </p><p>Jetons un coup d'œil au code source dans jQuery 3.3.1</p><pre class="brush:php;toolbar:false">// name 表示属性名
// value 表示属性值
css: function( name, value ) {
    return access( this, function( elem, name, value ) {
        var styles, len,
            map = {},
            i = 0;

        // 判断属性名是不是数组
        // 是数组就遍历，调用jQuery.css 方法传入每个属性名，获取样式
        if ( Array.isArray( name ) ) {
            styles = getStyles( elem );
            len = name.length;

            for ( ; i  1 );
}

La méthode css() dépend de trois méthodes :

1. méthode, cette méthode peut obtenir ou définir une ou plusieurs valeurs d'attribut ​​​​

jQuery.access( ) la méthode a un tel code

// 设置多个属性值
// 如果属性名（key）的类型是 object，就遍历这个对象
// 遍历一次就调用一次 access()方法，并传入这次的属性名和属性值
if ( jQuery.type( key ) === "object" ) {
    chainable = true;
    for ( i in key ) {
        jQuery.access( elems, fn, i, key[i], true, emptyGet, raw );
    }

// 设置一个值
} else if ( value !== undefined ) {
    ......
}

C'est la méthode qui aide css( ) La méthode détermine si le premier paramètre est une chaîne ou un objet.

2. Méthode jQuery.style() : lire ou définir les attributs de style sur les nœuds DOM

Dans la méthode css(), si le deuxième paramètre est passé, cela signifie qu'il y a des attributs à définir. , la méthode jQuery.style() sera appelée pour définir le style

3 jQuery.css() : Lisez la valeur du style DOM sur l'élément DOM

Ici jQuery.css() est une méthode ajoutée via jQuery.extend( ), et la méthode css() que nous avons mentionnée au début est une méthode ajoutée via jQuery.fn.extend( ). Ce ne sont pas la même méthode.

La différence entre jQuery.extend() et jQuery.fn.extend()

jQuery.extend() est d'ajouter une méthode de classe (méthode statique) à la classe jQuery, elle doit être appelée via la classe jQuery (directement en utilisant $.xxx) ;

jQuery.fn.extend() consiste à ajouter des membres (méthodes d'instance) à la classe jQuery, et toutes les instances jQuery peuvent être appelé directement (besoin d'utiliser l'appel $() .xxx).

Avantages de la surcharge

La surcharge consiste en fait à fusionner plusieurs fonctions avec des fonctions similaires en une seule fonction et à réutiliser le nom de la fonction.
Si la méthode css() dans jQuery n'utilise pas la surcharge, alors il y aura 5 fonctions différentes pour compléter la fonction. Ensuite, nous devons mémoriser 5 noms de fonctions différents et les paramètres correspondant à chaque fonction. évidemment plus gênant.

Résumé

Bien que JavaScript n'ait pas de surcharge au sens propre du terme, l'effet de surcharge est très courant en JavaScript. Par exemple, dans la méthode splice() d'un tableau, un paramètre peut. être supprimé, et deux paramètres peuvent être supprimés. Une partie d'un paramètre peut être supprimée et trois paramètres peuvent être supprimés avant d'ajouter de nouveaux éléments.
Un autre exemple est la méthode parseInt(). Lorsqu'un paramètre est transmis, il sera jugé s'il faut utiliser l'analyse hexadécimale ou l'analyse décimale. Si deux paramètres sont transmis, le deuxième paramètre sera utilisé comme base du. numéro.

Les méthodes mentionnées dans l'article pour obtenir des effets de surcharge sont essentiellement basées sur le jugement des paramètres. Qu'il s'agisse de juger du nombre de paramètres ou de juger du type de paramètres, l'opération est décidée en fonction des différents paramètres.

Bien que la surcharge puisse nous apporter beaucoup de commodité, il ne faut pas en abuser. Ne combinez pas certaines fonctions non liées en une seule fonction.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Analyse du bouillonnement d'événements et de la capture d'événements dans js

À propos de la façon dont Ajax implémente l'introduction inter-domaines pour visiter les problèmes

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!