Skip to content

JS 中 六 种函数

命名函数(Named Functions):具有明确名称的函数,可在声明前或后调用(函数提升)

匿名函数(Anonymous Functions):没有名称的函数,通常作为参数传递或赋值给变量。

箭头函数(Arrow Functions):ES6 新增的简洁语法,没有自己的 this、arguments,不能用作构造函数。

构造函数(Constructor Functions):用于创建对象实例,通常首字母大写,需配合 new 使用。

立即执行函数(IIFE,Immediately Invoked Function Expressions):声明后立即执行,用于创建独立作用域。

生成器函数(Generator Functions):ES6 新增,可暂停 / 恢复执行,返回迭代器,函数名前加 *。

箭头函数

shell
# 特点
语法简洁

# 缺点
 arguments
 自己的this(当前箭头函数所在函数)
 constructor、prototype、super,不能作为构造函数
无法通过 call apply bind 改变 this

# 注意
 ES6 class 中可以使用 箭头函数,this指向没问题,永远指向类实例

创建函数的两种写法

shell
# 其一:函数声明式创建,使用 function 函数专属声明
特点:函数提升只要创建函数,那么在整个页面中任意位置都可调用,包括函数的上方调用依然生效

# 其二:函数表达式创建,匿名函数赋值给一个变量
必须先声明后调用,在函数之上调用会报错

立即执行函数

js
立即执行函数 IIFE定义函数立刻自动执行定义完不用手动调用
IIFE 特点自动执行独立作用域变量私有执行完即销毁可以传参不污染命名空间
主要用途隔离变量一次性初始化老式循环闭包模拟模块

// 写法1 函数表达式
(function() {
  console.log('立即执行')
})();

// 写法2 箭头函数
(() => {
  console.log('立即执行')
})();

// 传参
(function(a, b){
  console.log(a + b);
})(10, 20);

// 使用场景
隔离作用域防止全局变量污染老式无模块化时代所有代码塞一个 JS 文件 IIFE 把业务逻辑包起来内部变量不暴露到 window
初始化只执行一次的逻辑页面初始化配置初始化挂载全局常量只跑一次即可
循环中解决 var 变量绑定问题(经典老场景)
for(var i = 0; i < 3; i++){
  (function(j){
    setTimeout(() => console.log(j), 1000)
  })(i)
}

// 现在还有必要用吗?
ES6 之后有 let/const、块级作用域、ES Module,IIFE 用得大幅减少;