当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript函数类型及区别详解

JavaScript函数类型及区别详解

2026-01-02 20:51:48 0浏览收藏

珍惜时间，勤奋学习！今天给大家带来《JavaScript函数有哪些类型？区别是什么？》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

JavaScript函数按定义和行为分为四类：函数声明（完全提升、有名字）、函数表达式（仅变量名提升、可匿名）、箭头函数（无this/arguments/new.target）、生成器函数（function* + yield）。

javascript函数有哪些类型_它们之间有什么区别？

JavaScript 函数不是一种“类型”，而是一种可调用的对象（Function 类型）；但按定义方式、行为特征和运行时表现，确实存在几类常见函数形态——它们的区别直接影响 this 绑定、提升行为、作用域、是否可构造等关键行为。

函数声明 vs 函数表达式：提升（hoisting）是最大分水岭

函数声明会被完整提升到当前作用域顶部，可在定义前安全调用；函数表达式只提升变量名（var 声明），赋值本身不提升，提前调用会报 TypeError: xxx is not a function。

console.log(add(2, 3)); // ✅ 输出 5  
function add(a, b) { return a + b; }
<p>console.log(sub(2, 3)); // ❌ TypeError: sub is not a function<br>
const sub = function(a, b) { return a - b; };</p>

函数声明必须有名字，且不能出现在条件块、循环体等非顶层语句中（严格模式下会报语法错误）
函数表达式可匿名，也可命名（命名仅在函数体内可用，用于调试或递归）
函数表达式更灵活：能作为参数传入、返回值、立即执行（IIFE）、赋给对象属性

箭头函数：没有自己的 `this`，也没有 `arguments` 和 `new.target`

箭头函数不绑定 this，而是继承外层普通函数作用域的 this；它不能用作构造函数（调用 new 会抛 TypeError），也不支持 arguments 对象（需用剩余参数 ...args 替代）。

const obj = {
  name: 'Alice',
  regular() { console.log(this.name); }, // ✅ 'Alice'
  arrow: () => { console.log(this.name); } // ❌ undefined（this 指向全局或 module 上下文）
};
<p>obj.regular(); // 'Alice'<br>
obj.arrow();   // undefined（浏览器中 this 是 window）</p>

适合写简短回调（如 array.map(x => x * 2)），避免手动 .bind(this)
不适合需要动态 this 的场景（如事件处理器、Vue/React 方法、原型方法）
不能用 yield，所以不能是生成器函数

生成器函数：`function*` 返回迭代器，支持暂停与恢复

生成器函数用 function* 声明，内部用 yield 暂停执行并产出值；调用后不立即运行，而是返回一个迭代器对象，需用 .next() 手动推进。

function* countdown(n) {
  while (n > 0) {
    yield n;
    n--;
  }
}
<p>const it = countdown(3);
console.log(it.next().value); // 3<br>
console.log(it.next().value); // 2<br>
console.log(it.next().value); // 1</p>

常用于实现惰性求值、自定义遍历逻辑、异步流程控制（配合 async/await 模拟）
不能被 new 调用，也不是普通函数的子类型
不兼容 IE，且 V8 引擎对生成器的优化弱于普通函数，高频调用注意性能

构造函数与普通函数：只差一个 `new`，行为天壤之别

构造函数本质仍是函数，但约定以大写字母开头，并预期通过 new 调用；此时会自动创建新对象、绑定 this、隐式返回该对象（除非显式返回非空对象）。

function Person(name) {
  this.name = name;
}
<p>const p = new Person('Bob'); // ✅ this 指向新对象<br>
const q = Person('Charlie'); // ❌ this 指向全局（非严格模式）或 undefined（严格模式）</p>