Überprüfen, ob eine Funktion existiert, bevor sie aufgerufen wird

Wenn Skripte verwendet werden, die zwischen verschiedenen Bereichen einer Website geteilt werden, kann es vorkommen, dass eine Funktion aufgerufen wird, die nicht existiert. Sie ist auf einer Seite sinnvoll (die Abhängigkeit ist vorhanden), auf einer anderen jedoch nicht. Der Unterschied ist zu gering, um die Datei in verschiedene Versionen zu gabeln. Stattdessen können Sie einfach prüfen, ob die Funktion existiert, bevor Sie sie aufrufen, um Fehler zu vermeiden.

if (typeof yourFunctionName == 'function') { 
  yourFunctionName(); 
}

Kommentare

Kent

# 31. Juli 2012

Großartiger Schnipsel! Ich behalte ihn in meiner Liste mit häufig verwendeten Funktionen und er hat mir während der Entwicklung schon tausendmal geholfen.

Ich füge gerne eine `else`-Anweisung mit einem `alert` (oder `console.log()`) hinzu, um das Fehlschlagen sichtbarer zu machen.

if (typeof yourFunctionName == 'function') { 
    yourFunctionName(); 
}else{
    alert('Check yourFunctionName!');
}

Antworten

brito

# 31. Juli 2012


// no error checking
(yourFunctionName || Function)();

// debugging, maybe on Firefox
(yourFunctionName || console.error)();

// debugging on Chrome
(yourFunctionName || function(){ console.error(arguments) })();

Antworten

Zsitro

# 31. Juli 2012

Könnte auch so sein

$.isFunction(yourFunctionName)&&yourFunctionName()

oder wenn Sie sicher sind, dass es sich um eine Funktion handelt, wenn sie existiert

yourFunctionName&&yourFunctionName()

Antworten

Binh Thanh Nguyen

Permalink zum Kommentar# 27. Januar 2015

Danke, sehr einfacher und schöner Tipp

TheRadio

# 13. August 2012

Der Vorschlag, den Typ zu überprüfen, um festzustellen, ob etwas existiert, ist fragwürdig. Wenn Sie an dem Punkt sind, an dem Sie nicht einmal wissen, ob eine Funktion existiert oder nicht, und Sie die Situation nicht bewusst gestaltet haben, dann ist etwas sehr falsch und schlecht geplant. Wenn Sie wissen, dass Sie eine Bedingung in einem Spiel oder eine Verzögerung bei der asynchronen Kommunikation haben, bei der der Benutzer den Fortschritt oder Ähnliches überprüfen darf, planen Sie dies und nutzen Sie `try-catch`. Ich ziehe es vor, eine vorsichtige Auslöserklasse zu verwenden, um dies zu handhaben, damit ich leicht ein `on`-Ereignis definieren kann, das ausgelöst wird, wenn wir auf den alternativen Code-Pfad reagieren müssen. Sie können immer `e` auf die genaue Fehlermeldung mit `e.message` überprüfen. Sie können sehen, dass, sobald die Klassen definiert sind, der eigentliche Fehlerbehandler und der Funktionsaufruf prägnant sind, während die vorsichtige Zustandsbehandlung in einer wiederverwendbaren Klasse festgelegt ist. Sehen Sie die Code-Kommentare für die Verwendung. Wenn Sie kein eigenes `onError`-Ereignis definieren, wird es als klassischer `alert` ausgelöst und bringt Ihre Seite nicht zum Absturz.


cautiousTrigger = function(){};
cautiousTrigger.prototype = {
	onError : function(e){
	alert(e);
	},
	trigger:function(o,func,args)
	{
		try
		{
			func.apply(o,args);
			return true;
		}
		catch(e) 
		{
			this.onError(e);
		}
	}
}




someClass = function(){};
someClass.prototype = {
	yourFunctionName:function(arg1,arg2){
		console.log(arg1,arg2);
	}
}

var attempt = new cautiousTrigger();
attempt.onError = function(e){
	console.log(e.message);
	doSomethingElse();
}

function doSomethingElse(){
	alert("Hey buddy! Hold your horses, we're doing something awesome.");
}

var someInstance = new someClass();  // the class instance exists, everything will be fine
attempt.trigger(someInstance,someInstance.yourFunctionName,["arg1","arg2"]);

//this trigger one will trigger the doSomethingElse function because it doesn't exist yet:
attempt.trigger(someOtherInstance,someOtherInstance.yourFunctionName,["arg1","arg2"]);

Antworten

To-mos

Permalink zum Kommentar# 5. November 2018

Wenn jemand ein bestehendes Objekt erweitern möchte, z. B. eine `clamp()`- oder `map()`-Funktion zum `Number.prototype`-Objekt hinzufügt, könnte er mit dieser Methode prüfen, ob jemand anderes dies bereits getan hat. Ich kenne viele Leute, die diese beiden Funktionen hinzufügen, da sie sehr nützlich sind (mich eingeschlossen), und es ist trivial, diese Methode zu wählen, um festzustellen, ob jemand anderes etwas Derartiges getan hat. Manche Leute sagen, man solle die Standardobjekte nicht auf diese Weise erweitern, falls sie in Zukunft aktualisiert werden, aber diese Methode würde dieses Problem ohnehin schützen.

nathaniel

# 19. September 2012

Ich richte ein Child-Theme ein ... wo platziere ich diesen Schnipsel?

Antworten

Rob Bennet

Permalink zum Kommentar# 1. Oktober 2012
Sie würden den Schnipsel um die Funktion wickeln, die Sie überprüfen möchten. Nehmen wir zum Beispiel an, Sie haben einen Slider für die Startseite, der FlexSlider oder etwas Ähnliches verwendet. Sie würden diese Funktion möglicherweise im globalen Footer oder in einer JS-Datei aufrufen, die seitenübergreifend verwendet wird. Nun, wenn Sie nicht auf der Startseite sind und kein Slider vorhanden ist, aber Sie sie in Ihrem JavaScript aufrufen, erhalten Sie einen ungefangenen `Object`-Fehler in Ihrer Konsole. Chris sagt also, prüfen Sie, ob diese Funktion irgendwo existiert. Wenn ja, lassen Sie sie durch, wenn nicht, rufen Sie sie nicht auf. Macht das Sinn? Hier ist ein Beispiel mit diesem FlexSlider-Beispiel.
```
$('.flexslider').flexslider({
          animation: "slide",
          touch: true,
          pauseOnHover: true,
          controlsContainer: ".flex-container"
    });
```
Sie rufen es also in Ihrem globalen Footer oder einer gemeinsamen `app.js`-Datei oder so etwas auf Ihrer Kontaktseite auf, laden aber die `flexslider.js`-Datei nicht auf der Kontaktseite, da kein Slider vorhanden ist. Sie würden also einen JavaScript-Fehler erhalten. Sie würden es also mit Chris' Code wie folgt umschließen:
```
if (typeof flexslider == 'function') {
    $('.flexslider').flexslider({
          animation: "slide",
          touch: true,
          pauseOnHover: true,
          controlsContainer: ".flex-container"
    });
}
```
Ich hoffe, das hilft. Nochmals, ich gebe Ihnen nur ein Beispiel mit Chris' Code. Einige der anderen Methoden in diesem Kommentar-Thread würden auch funktionieren.

Jason Barry

# 29. Januar 2013

Sollte dieser Schnipsel nicht den Operator `===` anstelle von `==` verwenden?

if (typeof yourFunctionName === ‘function’) {
yourFunctionName();
}

Antworten

Andy Mehalick

Permalink zum Kommentar# 7. März 2013

Jason, generell ist die strenge Vergleichsoperator `===` eine gute Wahl, aber in diesem Fall gibt `typeof` immer einen String zurück. In diesem Fall würden Sie nichts gewinnen, außer Konsistenz mit anderen Vergleichsoperationen in Ihrem Code. Ich stimme zu, dass es eine gute Gewohnheit ist, aber hier ist es nicht erforderlich.

Brad H.

# 31. Mai 2013

Super! Ich habe tatsächlich eine Situation, in der mehrere Benutzersteuerelemente auf einer Seite vorhanden sein können oder nicht, und ich muss sie in verschiedenen Instanzen initialisieren, daher muss ich wissen, ob die Initialisierungsfunktion existiert oder nicht, bevor ich sie aufrufe.

Danke!
Brad

Antworten

James

# 13. August 2013

Basierend auf einigen der oben genannten Optionen gefällt mir die Eleganz der Ausführung einer anonymen Funktion sehr gut, und sie scheint (in Chrome) performanter zu sein.
http://jsperf.com/optional-function-calling

Antworten

Aisha

# 28. August 2013

Danke

Antworten

Cody

# 28. August 2013

STOPPEN SIE DIE VERWENDUNG VON `typeof` FÜR JS IM BROWSER! ... Node ist in Ordnung ;)

function whatever(callback){
    return callback
        &&
        callback.constructor === Function
        &&
        callback()
        ||
        throw new Error('Toast poptarts in oven. Go ahead, toast em.');
}

Antworten

Mike

# 14. Januar 2014

DAS FUNKTIONIERT NICHT IN IE8

Antworten

Joseph Rex

# 3. Juli 2014

Beim Prüfen mit jQuery mache ich etwas wie
if($().functionName){
$(“#idselected”).functionName();
}
Ist das so in Ordnung oder ist es besser, sich trotzdem an `typeof` zu halten?

Antworten

docker

Permalink zum Kommentar# 1. Oktober 2015

Sie haben mir viel Zeit erspart. Danke!

Salvatore

# 29. August 2014

Brillant und einfach, danke an alle :-)

Antworten

Eddie Staples

# 20. November 2014

Danke! Diese Methode ist eine großartige Alternative zu `if (yourFunctionName.length) {}`, die funktioniert, aber einen Konsolenfehler protokolliert, wenn sie falsch ausgewertet wird, was man in der Produktion normalerweise vermeiden möchte.

Antworten

Jonathan Luke

# 13. Dezember 2014

Was ist, wenn ich Code habe, bei dem der Funktionsname `Question_A` ist, wobei der Unterstrich eine Zahl ist, die von einer anderen, zufälligen Variable bestimmt wird? Anders ausgedrückt, wie fügt man eine Variable in die "if-Anweisung" ein, um sie als Funktionsnamen zu verwenden?

var QuestionNumber = Math.floor((Math.random() * 100) + 1);
var FunctionName = "Question" + QuestionNumber + "A";

if (typeof ??? == 'function') { 
  ???(); 
}

Was müsste ich im obigen Beispiel tun, um den Wert der Variablen "Funktionsname" anstelle der ???s einzusetzen?

Antworten

Amazzing

# 29. Dezember 2014

Was halten Sie davon, `try-catch` zu verwenden, wenn Sie nicht sicher sind, ob ein Plugin/eine Funktion definiert ist oder nicht?

  try {
    $('.selector_name').someSpecialSlider({
      params_here
    });
  }catch(err){};

Antworten

Sandro

# 23. Februar 2016

Sie sollten `===` für die Gleichheitsprüfung verwenden!

Antworten

OgreXT

# 29. Februar 2016

Eine "string-lose" Version

if ( function () {return typeof (callBack ) === typeof (Function)} ){
callBack()
}

Antworten

OgreXt

Permalink zum Kommentar# 1. März 2016

Ok, ich glaube, es ist nicht wirklich nötig, es in eine Funktion zu verpacken. Ich habe dies als Utility-Funktion und habe zu viele Zeilen kopiert. Das wird auch funktionieren und ist einfacher

if(typeof callBack === typeof Function){callback}

eddie

# 29. November 2016

Auch

console.log(window.hasOwnProperty('Function'))

Antworten

Fyodor

# 19. Juni 2017

Ich bevorzuge normalerweise Einzeiler. Für JS

!!maybe_defined_function && maybe_defined_function();

Antworten

Jason

# 21. August 2017

Manchmal funktioniert dies nicht mit JQuery-Plugins. Ich habe festgestellt, dass das Folgende stattdessen funktionieren kann.

if ( jQuery().pluginName){ code } else { more code }

Antworten

kidstell

# 17. Oktober 2019

Wenn Sie wirklich herausfinden müssen, ob eine Funktion mit demselben Namen wie ein String existiert

fff=function (){}
f='fff'

typeof f                     // output: "string"

eval("typeof f")         // output: "string"
eval("typeof "+f)       // output: "function"

Antworten

MMK21

# 12. August 2021

Neue optionale Verkettungssyntax: maybeFunction?.("parameter wie normal")

Antworten

Kommentare

Hinterlassen Sie eine Antwort Antwort abbrechen