0

0

js怎么判断函数是否存在

月夜之吻

月夜之吻

发布时间:2025-08-13 08:51:01

|

517人浏览过

|

来源于php中文网

原创

判断javascript函数是否存在的最稳妥方法是使用typeof操作符;2. 若函数存在且为函数类型,typeof返回'function',可安全调用,否则需提示不存在或类型错误;3. 检查对象方法时应先确认对象存在,再用typeof判断方法是否为函数,避免typeerror;4. 直接调用未定义或非函数的变量会抛出referenceerror或typeerror,导致程序中断;5. 在全局、对象、局部作用域中均可通过typeof判断函数存在性,核心逻辑一致;6. 其他方法如in操作符、hasownproperty、try-catch虽可行,但不如typeof简洁安全,不推荐作为首选。因此,typeof somevariable === 'function' 是最可靠且广泛采用的判断方式。

js怎么判断函数是否存在

在JavaScript里,要判断一个函数是否存在,最直接、最稳妥的方法就是使用

typeof
操作符。它会告诉你一个变量的类型,如果它是个函数,
typeof
就会返回字符串
'function'
。如果变量根本没被定义,或者不是一个函数,比如是
undefined
null
、字符串或者数字,
typeof
就会返回相应的值,比如
'undefined'

解决方案

判断函数是否存在,核心就是利用

typeof
操作符。这方法简单又可靠,几乎是我的首选。

比如,你想知道一个叫

myFunction
的全局函数有没有被定义,你可以这么写:

if (typeof myFunction === 'function') {
  // 函数存在,可以安全调用
  myFunction();
} else {
  // 函数不存在或不是函数
  console.log('myFunction 不存在或不是一个函数。');
}

这同样适用于对象上的方法。假设你有一个对象

myObject
,你想检查它有没有一个叫做
doSomething
的方法:

const myObject = {
  // doSomething: function() { console.log('Doing something...'); }
};

if (myObject && typeof myObject.doSomething === 'function') {
  // myObject 存在且 doSomething 是一个函数
  myObject.doSomething();
} else {
  console.log('myObject.doSomething 不存在或不是一个函数。');
}

这里我特意加了个

myObject &&
,这是个好习惯。毕竟,如果
myObject
本身就是
null
undefined
,你直接去访问它的属性会抛出
TypeError
。这种链式判断能有效避免这种情况,让代码更健壮。

为什么直接调用可能会出错?

很多时候,新手或者急于求成的开发者可能会直接尝试调用一个函数,比如:

// 假设 myUndefinedFunction 并没有被定义
myUndefinedFunction(); // 这会直接报错!

当你直接调用一个未定义的函数时,JavaScript引擎会毫不留情地抛出一个

ReferenceError
。错误信息通常是“
myUndefinedFunction is not defined
”。这直接导致程序中断,后续代码也无法执行。这在生产环境中是绝对要避免的。

更糟糕的情况是,如果一个变量存在,但它不是函数,你却尝试像函数一样调用它,比如:

const myVariable = "我不是函数";
myVariable(); // 这会抛出 TypeError!

这种情况下,你会得到一个

TypeError
,提示“
myVariable is not a function
”。这两种错误都属于运行时错误,一旦发生就会中断程序的正常流程。所以,在使用
typeof
进行检查,其实就是一种防御性编程的体现。在我看来,这是编写稳定、可靠JavaScript代码的第一步。它能帮助我们提前预判并处理潜在的问题,而不是等到运行时才发现并崩溃。

VWO
VWO

一个A/B测试工具

下载

在不同作用域下如何判断函数存在?

判断函数存在与否,其实和它在哪个作用域里关系不大,核心的

typeof
操作符原理是一样的。但理解作用域确实能帮助你更准确地定位和判断。

全局作用域:浏览器环境中,全局函数通常是

window
对象的属性。所以,
typeof window.myGlobalFunction === 'function'
typeof myGlobalFunction === 'function'
效果是一样的,因为全局变量默认就是
window
的属性。

// 定义一个全局函数
function globalFunc() {
  console.log('I am global.');
}

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

// 或者更明确地指向 window (浏览器环境)
if (typeof window.globalFunc === 'function') {
  window.globalFunc();
}

在Node.js环境中,全局作用域略有不同,但直接使用

typeof globalFunc === 'function'
通常也是可行的。

对象方法: 这是最常见的场景之一。一个函数作为对象的属性,我们称之为方法。判断它是否存在,就像前面提到的,需要先确保对象本身存在,再判断方法:

const user = {
  name: 'Alice',
  sayHello: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

// 假设 user 对象可能不存在
const anotherUser = null;

if (user && typeof user.sayHello === 'function') {
  user.sayHello(); // 正常调用
}

if (anotherUser && typeof anotherUser.sayHello === 'function') {
  // 这段代码不会执行,因为 anotherUser 是 null
  anotherUser.sayHello();
} else {
  console.log('anotherUser 不存在,或者其 sayHello 方法不存在。');
}

局部作用域/闭包: 在一个函数内部定义的函数(或者通过闭包捕获的函数),判断方式和全局或对象方法并无二致。

typeof
操作符直接作用于那个局部变量即可。

function outerFunction() {
  function innerFunction() {
    console.log('I am inner.');
  }

  if (typeof innerFunction === 'function') {
    innerFunction(); // 在局部作用域内调用
  }
}

outerFunction();
// console.log(typeof innerFunction); // 这里会是 'undefined',因为 innerFunction 在外部不可见

总的来说,无论函数藏在哪个角落,

typeof
操作符总是能准确地揭示它的类型。关键在于你能够访问到那个变量。

除了
typeof
,还有其他判断方法吗?

当然有,但说实话,大部分情况下它们不如

typeof
来得直接、安全和高效。

  1. 利用

    in
    操作符(针对对象属性):
    in
    操作符可以检查一个属性是否存在于对象或其原型链上。如果函数是一个对象的方法,你可以用它来判断。

    const myModule = {
      init: function() { console.log('Module initialized.'); }
    };
    
    if ('init' in myModule) {
      // 属性存在,但还需要进一步判断它是不是函数
      if (typeof myModule.init === 'function') {
        myModule.init();
      }
    }

    仅仅用

    in
    是不够的,因为它只判断属性是否存在,不判断类型。一个属性可以是任何值,不一定是函数。所以,通常它会和
    typeof
    结合使用,或者说,
    typeof
    本身就足够了。在我看来,
    'init' in myModule && typeof myModule.init === 'function'
    这种写法,不如直接
    typeof myModule.init === 'function'
    简洁明了。后者如果
    myModule
    不存在会报错,所以前面加个
    myModule &&
    更稳妥。

  2. hasOwnProperty
    方法(针对对象自有属性): 这个方法可以判断一个属性是否是对象的“自有”属性,而不是从原型链继承来的。

    const proto = { inheritedFunc: function() {} };
    const obj = Object.create(proto);
    obj.ownFunc = function() {};
    
    if (obj.hasOwnProperty('ownFunc') && typeof obj.ownFunc === 'function') {
      obj.ownFunc();
    }
    
    if (obj.hasOwnProperty('inheritedFunc') && typeof obj.inheritedFunc === 'function') {
      // 不会执行,因为 inheritedFunc 是继承的
    } else {
      console.log('inheritedFunc 不是 obj 的自有属性。');
    }

    这在某些特定场景下有用,比如你需要区分是对象自身的方法还是继承的方法。但对于单纯判断“是否存在且可调用”而言,

    typeof
    依然是首选。

  3. try-catch
    块: 理论上,你可以尝试调用一个函数,如果它不存在,就会抛出
    ReferenceError
    TypeError
    ,然后你可以在
    catch
    块中捕获这个错误。

    try {
      maybeNonExistentFunction(); // 尝试调用
    } catch (e) {
      if (e instanceof ReferenceError || (e instanceof TypeError && e.message.includes('is not a function'))) {
        console.log('函数不存在或不可调用。', e.message);
      } else {
        // 其他类型的错误,需要重新抛出或处理
        throw e;
      }
    }

    说实话,这种方式我个人非常不推荐用来判断函数是否存在。

    try-catch
    块的开销相对较大,而且它主要是用来处理预料之外的异常情况,而不是用来做常规的流程控制判断。用它来判断函数存在,就像是为了确认门是不是锁着,非得撞一下门才能知道,而不是轻轻拧一下门把手。这显然不是最高效、最优雅的解决方案。

所以,兜兜转转一圈,你会发现,在绝大多数情况下,

typeof someVariable === 'function'
依然是判断JavaScript函数是否存在的最简洁、最安全、最符合习惯的做法。它直观,性能好,并且能有效避免不必要的运行时错误。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

557

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

394

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

754

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

478

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

454

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

1031

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

658

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

554

2023.09.20

AO3中文版入口地址大全
AO3中文版入口地址大全

本专题整合了AO3中文版入口地址大全,阅读专题下面的的文章了解更多详细内容。

1

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
PostgreSQL 教程
PostgreSQL 教程

共48课时 | 7.5万人学习

Django 教程
Django 教程

共28课时 | 3.3万人学习

Excel 教程
Excel 教程

共162课时 | 12.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号