当前位置：首页 > 全部内容 > JavaScript匿名函数定义、调用与自执行详解

JavaScript匿名函数定义、调用与自执行详解

作者：木棉时间：2026-10-23 08:39:42浏览：194

本文深入解析JavaScript中匿名函数的多种用法。对比命名函数与匿名函数在提升机制与window对象挂载上的差异，演示函数作为返回值的使用场景，并详细列举括号、运算符等多种IIFE自执行写法，帮助开发者掌握核心技巧。

JavaScript匿名函数定义、调用与自执行详解

本文通过具体实例，详细解析JavaScript中匿名函数的多种应用方式，旨在为读者提供实用的参考与学习素材。

常规函数与匿名函数的定义对比

首先来看常规的函数定义方式：


function show1(name){
    alert(name); //打印:zhangsan
  }
show1("zhangsan");

接着是匿名函数的定义形式：


var show2 = function (name) {
    alert(name); //打印:张三
  }
show2("张三");

函数声明与表达式的执行机制差异

上述两种函数定义方式存在以下主要区别：

第一，所有通过声明方式定义的function都会自动挂载到window对象上。


  function show1(name){
    alert(name); //打印:张三
  }
  window.show1("张三");

即便在函数定义语句之前进行调用，也不会报错。


  window.show1("张三");
  function show1(name){
    alert(name); //打印:张三
  }

这是因为带有名称的函数在JavaScript引擎初始化阶段，就已经被加载到了当前作用域中。

第二，如果是通过表达式定义的匿名函数：


  window.show2("李四");
  var show2 = function (name) {
    alert(name); //打印:李四
  }

控制台将会输出错误信息：TypeError: window.show2 is not a function。

函数作为返回值的调用方式

二、如果我们需要合并上面2个函数


<script>
  function show(name) {
    return function () {
      alert(name); //内部函数是可以调用外层的变量的
    }
  }
  show("王五");
</script>

猜猜会打印什么？什么也没有，也不会报错。这是因为执行show()只是返回了一个函数本身，并没有执行这个函数。


show("王五")();

这样执行，就打印：王五

如果里面的函数也要传入变量


<script>
  function show(name) {
    return function (age) {
      alert(name); //打印:王五
      alert(age); //打印:18
    }
  }
  show("王五")(18);
</script>



<script>
  function show(name) {
    return function (name) {
      alert(name);
    }
  }
  show("王五")(18);
</script>

猜猜是打印“王五”还是“18”？只会打印“18”。

匿名函数的自执行（IIFE）模式

三、匿名函数的自执行


<script>
  (function (name) {
    alert(name);  //打印:哈哈
  })("哈哈")
</script>

以上是推荐的写法。

其他写法：


  -function (name) {
    alert(name);  //打印:哈哈
  }("哈哈")



  +function (name) {
    alert(name);  //打印:哈哈
  }("哈哈")



  !function (name) {
    alert(name);  //打印:哈哈
  }("哈哈")



  [function (name) {
    alert(name);  //打印:哈哈
  }("哈哈")]



  new function (name) {
    alert(name);  //打印:哈哈
  }("哈哈")



  ~function (name) {
    alert(name);  //打印:哈哈
  }("哈哈")



  void function (name) {
    alert(name);  //打印:哈哈
  }("哈哈")

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

作者最新文章

JS运算符优先级与结合性的区别是什么？

2026-11-05 13:22:02

JS Map怎么只遍历Key或Value

2026-11-05 13:00:36

D3.js 与 ECharts 选型对比：灵活性 vs 开发效率

2026-11-05 09:45:01

为什么JS中typeof []返回object：数组类型检测误区解析

2026-11-04 19:50:47

D3.js 新手入门：环境搭建与第一个条形图实现

2026-11-04 10:49:48

相关标签：

JavaScript匿名函数