调用函数前检查函数是否存在

Kent

# 2012年7月31日

很棒的代码片段！我一直将它保存在我的常用函数列表中，它在开发过程中帮我解决了无数次问题。

我喜欢添加一个“else”语句，并使用alert（或console.log（））来使错误更易于发现。

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

brito

# 2012年7月31日


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

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

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

Zsitro

# 2012年7月31日

也可以是

$.isFunction(yourFunctionName)&&yourFunctionName()

或者如果您确定它存在，那么它就是一个函数

yourFunctionName&&yourFunctionName()

Binh Thanh Nguyen

评论永久链接# 2015年1月27日

谢谢，非常简单实用的技巧

TheRadio

# 2012年8月13日

检查类型以确定是否存在的方法值得怀疑。如果您处于甚至不知道函数是否存在且没有故意设计这种情况的阶段，那么肯定存在一些非常错误且计划不周的地方。如果您知道在游戏中或异步通信延迟中存在条件，用户可以在其中检查进度或其他内容，则您需要为此做好计划并使用try-catch。我更喜欢使用谨慎的触发器类来处理此问题，这样我就可以轻松定义一个事件，以便在我们需要响应备用代码路径时触发。您可以始终使用e.message检查e以获取确切的错误。您可以看到，一旦定义了类，实际的错误处理程序和函数调用就会变得简洁，而谨慎的状态处理则设置在可重用的类中。请参阅代码注释以了解用法。如果您未定义自己的onError事件，它将作为经典的alert触发，而不会导致页面崩溃。


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"]);

To-mos

评论永久链接# 2018年11月5日

如果有人希望扩展现有的对象，例如向Number.prototype对象添加clamp（）或map（）函数，他们可以使用此方法查看是否有人已执行此操作。我知道许多人喜欢添加这两个函数，因为它们非常有用（包括我），并且选择此方法来确定是否有人已执行此操作非常简单。人们说不要这样扩展默认对象，以防它们将来更新，但此方法无论如何都可以防止此问题。

nathaniel

# 2012年9月19日

我正在设置一个子主题……那么我应该把这段代码放在哪里呢？

Rob Bennet

评论永久链接# 2012年10月1日
您需要将代码片段包装在要检查的函数周围。例如，假设您有一个使用flexslider或类似工具的主页滑块。您可能会在全局页脚或跨页面共享的JS文件中调用该函数。那么，如果您不在主页上并且没有滑块，但您在javascript中调用了它，则控制台会显示未捕获的对象错误。因此，Chris的意思是，检查该函数是否在某个地方存在，如果存在，则允许它通过，否则，不要调用它。明白了吗？这是一个使用flexslider示例的例子
```
$('.flexslider').flexslider({
          animation: "slide",
          touch: true,
          pauseOnHover: true,
          controlsContainer: ".flex-container"
    });
```
因此，您在例如全局页脚或共享的app.js文件中或联系页面上调用它，但您没有在联系页面上加载flexslider.js文件，因为那里没有滑块，因此您会得到一个javascript错误。因此，您需要像这样将其包装在Chris的代码中
```
if (typeof flexslider == 'function') {
    $('.flexslider').flexslider({
          animation: "slide",
          touch: true,
          pauseOnHover: true,
          controlsContainer: ".flex-container"
    });
}
```
希望这有帮助。再说一次，我只是给您一个使用Chris代码的示例。此评论线程中的其他一些方法也可以使用。

Jason Barry

# 2013年1月29日

这段代码不应该使用“===”运算符而不是“==”吗？

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

Andy Mehalick

评论永久链接# 2013年3月7日

Jason，通常使用严格比较运算符“===”是一个不错的选择，但在这种情况下，**typeof** 始终返回一个字符串；鉴于此，除了与代码中的其他比较操作保持一致之外，您不会获得任何好处。我同意这是一个好习惯，但在这里不需要。

Brad H.

# 2013年5月31日

太棒了！我确实遇到了一个情况，页面上可能存在也可能不存在多个用户控件，需要在各种情况下初始化它们，因此需要在调用初始化函数之前知道它是否存在。

谢谢！
Brad

James

# 2013年8月13日

基于上面阅读的一些选项 - 我非常喜欢运行匿名函数的优雅性，而且它在（Chrome）中似乎性能更高。
http://jsperf.com/optional-function-calling

Aisha

# 2013年8月28日

谢谢

Cody

# 2013年8月28日

停止在浏览器中使用typeof来检查JS！...Node是可以的；)

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

Mike

# 2014年1月14日

这在IE8中不起作用

Joseph Rex

# 2014年7月3日

在使用jQuery检查时，我会执行以下操作
if($().functionName){
$(“#idselected”).functionName();
}
这样可以吗？还是坚持使用typeof更好？

docker

评论永久链接# 2015年10月1日

你帮我节省了很多时间。谢谢！

Salvatore

# 2014年8月29日

很棒且简单，感谢大家 :-)

Eddie Staples

# 2014年11月20日

谢谢！此方法是if (yourFunctionName.length) {}的一个很好的替代方案，该方法有效，但在计算结果为false时会记录控制台错误，这通常是在生产环境中需要避免的。

Jonathan Luke

# 2014年12月13日

如果我的代码中函数名称为Question_A，其中下划线后面的数字由另一个随机变量确定，该怎么办？换句话说，如何将变量插入“if语句”中用作函数名称？

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

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

在上面的示例中，为了将变量“函数名称”的值替换为???，我该怎么做？

Amazzing

# 2014年12月29日

如果您不确定插件/函数是否已定义，您认为使用“try-catch”怎么样？

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

Sandro

# 2016年2月23日

您应该使用===进行相等性检查！

OgreXT

# 2016年2月29日

一个“无字符串”版本

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

OgreXt

评论永久链接# 2016年3月1日

好的，所以我想将它包装在函数中实际上并没有必要。我将其作为实用程序函数，并且复制了太多行。这也可以工作，而且更简单

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

eddie

# 2016年11月29日

还有

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

Fyodor

# 2017年6月19日

我通常喜欢单行代码。对于JS

!!maybe_defined_function && maybe_defined_function();

Jason

# 2017年8月21日

有时这在JQuery插件中不起作用。我发现以下内容可以替代。

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

kidstell

# 2019年10月17日

当你真的需要找出是否存在与字符串同名的函数时

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

typeof f                     // output: "string"

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

MMK21

# 2021年8月12日

新的可选链语法：maybeFunction?.("params as normal")

评论

发表评论 取消回复

发表评论取消回复