Eine Beschreibung der Funktionsüberladung in JavaScript

Dieser Artikel stellt hauptsächlich die Anweisungen zur Funktionsüberladung in JavaScript vor, die einen gewissen Referenzwert haben. Jetzt können Freunde in Not darauf zurückgreifen.

Es gibt Keine echte Funktionsüberladung in JavaScript.

Funktionsüberladung

Der Funktionsname ist derselbe, aber die Parameterliste der Funktion ist unterschiedlich (einschließlich der Anzahl der Parameter und Parametertypen), und je nach Unterschied werden unterschiedliche Vorgänge ausgeführt Parameter.

Nehmen wir ein Beispiel

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

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

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


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

Wenn in JavaScript zwei Funktionen mit demselben Namen im selben Bereich erscheinen, überschreibt die letztere die vorherige, sodass eine Überlappung keine wirkliche Bedeutung hat in JavaScript laden.

Aber es gibt verschiedene Möglichkeiten, den Effekt einer Überladung in JavaScript zu simulieren.

Schauen wir uns zunächst die erste Methode an, die über das Argumentobjekt implementiert wird.

Das Argumentobjekt ist ein Array-ähnliches Objekt innerhalb der Funktion. Es speichert alle an die Funktion übergebenen Parameter wenn die Funktion aufgerufen wird.

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

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

Dieses Beispiel ist sehr einfach. Es ermittelt die Anzahl der Parameter, indem es die Längeneigenschaft des Argumentobjekts beurteilt, und führt dann die Operation aus.

Aber wenn es wenige Parameter gibt, ist es in Ordnung, wenn es mehr Parameter gibt, müssen viele Urteile geschrieben werden, was mühsam ist.

Schauen wir uns also noch einmal ein klassisches Beispiel an

Bevor wir uns dieses Beispiel ansehen, schauen wir uns zunächst eine Anforderung an. Wir haben ein Benutzerobjekt und einige Namen werden im Werteattribut des gespeichert Benutzer widersprechen.

Ein Name besteht aus zwei Teilen, der Teil auf der linken Seite des Feldes ist der Vorname und der Teil auf der rechten Seite des Feldes ist der Nachname, wie unten.

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

Wir müssen eine Suchmethode im Benutzerobjekt hinzufügen

Wenn keine Parameter übergeben werden, wird der gesamte

zurückgegeben. Das Element, dessen Name mit diesem Parameter übereinstimmt, wird zurückgegeben;

Wenn zwei Parameter übergeben werden, werden der Vor- und Nachname zurückgegeben, die mit beiden übereinstimmen. users .values
In dieser Anforderung muss die Suchmethode je nach Anzahl der Parameter unterschiedliche Vorgänge ausführen. Als Nächstes verwenden wir eine addMethod-Funktion, um die Suchmethode zum Benutzerobjekt hinzuzufügen.

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

addMethod-Funktion, die 3 Parameter empfängt –

Der erste: das Objekt, an das die Methode gebunden werden soll,

Der zweite: der Name der gebundenen Methode,

Die dritte: erforderliche Bindungsmethode

Wenn die Funktion addMethod die Anzahl der Parameter bestimmt, verwendet sie zusätzlich zum Argumentobjekt auch das Längenattribut der Funktion.

Das Längenattribut der Funktion gibt die Anzahl der formalen Parameter zurück, als die Funktion definiert wurde.

Einfach ausgedrückt ist die Länge einer Funktion, wie viele Parameter die Funktion benötigt, und

ist, wie viele Parameter beim Aufruf der Funktion tatsächlich an die Funktion übergeben werden

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

Lass uns Verwenden Sie diese addMethod-Funktion. Die arguments.length

// 不传参数时，返回整个values数组
function find0 () {
  return this.values;
}
// 传一个参数时，返回firstName匹配的数组元素
function find1 (firstName) {
  var ret = [];
  for (var i = 0; i addMethod-Funktion nutzt die Eigenschaften von Abschlüssen und verbindet jede Funktion über die Variable old, sodass alle Funktionen im Speicher bleiben. <p></p>Jedes Mal, wenn die Funktion addMethod aufgerufen wird, wird ein Old generiert, der einen Abschluss bildet. <p>Wir können </p> verwenden, um die Suchmethode auf der Konsole auszudrucken, um sie anzuzeigen. <p><br><code>console.dir(users.find)</code></p><p>Das obige Beispiel wurde von John Resig, dem Vater von jQuery, in seinem Blog und in der ersten Ausgabe seines Buches „Secrets of the JavaScript Ninja“ geschrieben. Wie bereits erwähnt, Das Überladen von Funktionen wird auch in Kapitel 4 des Buches erläutert. Die Funktion addMethod ist Beispiel 4.15 im Buch. <img src="https://img.php.cn//upload/image/139/643/301/1531471079834608.jpg" title="1531471079834608.jpg" alt="Eine Beschreibung der Funktionsüberladung in JavaScript"></p>Der Kern der obigen Beispiele besteht darin, die Anzahl der Parameter zu bestimmen und verschiedene Operationen basierend auf unterschiedlichen Zahlen durchzuführen. Das folgende Beispiel besteht darin, verschiedene Operationen durch Bestimmung der Art der Parameter durchzuführen. <p></p>Werfen wir einen Blick auf die CSS( )-Methode in jQuery. Die <p></p>css( )-Methode gibt ein oder mehrere Stilattribute des übereinstimmenden Elements zurück oder legt es fest. <h3></h3><blockquote> </blockquote><p><code>css(name|pro|[,val|fn])</code></p><p>Wir können sehen, dass die Methode css() 5 Parametersituationen hat, von denen 3 ein Parameter und die anderen beiden sind Zwei Parameter. <img src="https://img.php.cn//upload/image/776/481/734/1531471070297469.png" title="1531471070297469.png" alt="Eine Beschreibung der Funktionsüberladung in JavaScript">Im Fall von nur einem Parameter wird der Attributwert abgerufen, wenn der Parametertyp eine Zeichenfolge oder ein Array ist, und wenn der Parameter ein Objekt ist, wird der Attributwert festgelegt. </p><p>Die css()-Methode von jQuery bestimmt, welche Operation ausgeführt werden soll, indem sie den Typ des Parameters beurteilt. <br></p>Werfen wir einen Blick auf den Quellcode in jQuery 3.3.1<p></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 );
}

css()-Methode hängt von drei Methoden ab:

1. Dies Die Methode kann einen oder mehrere Attributwerte abrufen oder festlegen

jQuery.access()-Methode Es gibt einen solchen 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 ) {
    ......
}

Dies ist die Methode, die der css()-Methode dabei hilft Bestimmen Sie zunächst, ob jeder Parameter eine Zeichenfolge oder ein Objekt ist.

2. jQuery.style()-Methode: Stilattribute auf DOM-Knoten lesen oder festlegen

Wenn in der css()-Methode der zweite Parameter übergeben wird, bedeutet dies, dass Attribute festgelegt werden müssen , wird die Methode jQuery.style() aufgerufen, um den Stil festzulegen

3: Lesen Sie den DOM-Stilwert für das DOM-Element

Hier jQuery.css( ) ist eine durch jQuery.extend( ) hinzugefügte Methode, und die eingangs erwähnte CSS( )-Methode ist eine durch jQuery.fn.extend( ) hinzugefügte Methode. Sie sind nicht dieselbe Methode.

Der Unterschied zwischen jQuery.extend() und jQuery.fn.extend()

jQuery.extend() besteht darin, eine Klassenmethode (statische Methode) hinzuzufügen Die jQuery-Klasse muss über die jQuery-Klasse aufgerufen werden (direkt mit $.xxx).

jQuery.fn.extend() dient zum Hinzufügen von Mitgliedern (Instanzmethoden) zur jQuery-Klasse, und alle jQuery-Instanzen können dies tun direkt aufgerufen (es muss der Aufruf $() .xxx verwendet werden).

Vorteile der Überladung

Überladung bedeutet eigentlich, mehrere Funktionen mit ähnlichen Funktionen in einer Funktion zusammenzuführen und den Funktionsnamen wiederzuverwenden.
Wenn die css()-Methode in jQuery keine Überladung verwendet, gibt es 5 verschiedene Funktionen, um die Funktion zu vervollständigen. Dann müssen wir uns 5 verschiedene Funktionsnamen und die Parameter merken, die jeder Funktion entsprechen offensichtlich problematischer.

Zusammenfassung

Obwohl es in JavaScript keine Überladung im eigentlichen Sinne gibt, ist der Effekt der Überladung in JavaScript sehr häufig. In der splice()-Methode eines Arrays kann dies beispielsweise der Fall sein gelöscht werden, und zwei Parameter können gelöscht werden. Ein Teil eines Parameters kann gelöscht werden, und drei Parameter können gelöscht werden, bevor neue Elemente hinzugefügt werden.
Ein weiteres Beispiel ist die parseInt()-Methode. Wenn ein Parameter übergeben wird, wird beurteilt, ob eine hexadezimale Analyse oder eine dezimale Analyse verwendet werden soll. Wenn zwei Parameter übergeben werden, wird der zweite Parameter als Basis verwendet Nummer.

Die im Artikel erwähnten Methoden zur Erzielung von Überlastungseffekten basieren im Wesentlichen auf der Beurteilung der Parameteranzahl oder der Parameterart, die Operation wird anhand der verschiedenen Parameter entschieden.

Obwohl Überladung uns viel Komfort bringen kann, sollte sie nicht missbraucht werden. Kombinieren Sie nicht einige nicht verwandte Funktionen in einer Funktion.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Analyse der Ereignisblase und Ereigniserfassung in js

Informationen zur domänenübergreifenden Einführung durch Ajax Probleme besuchen

Das obige ist der detaillierte Inhalt vonEine Beschreibung der Funktionsüberladung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!