首页 > 文章 > 前端

JavaScript函数声明方式及类型详解

时间：2026-04-08 12:37:15 294浏览收藏

JavaScript函数虽看似简单，实则暗藏玄机：函数声明、函数表达式、箭头函数和对象方法简写四大类型各具特性——是否提升、this如何绑定、能否作为构造函数、是否支持arguments等关键差异，直接决定代码健壮性与可维护性；理解这些本质区别，不仅能避开常见陷阱（如this丢失、提升误用、构造报错），更能根据实际场景精准选型，让函数真正成为可控、可靠、可读的开发利器。

javascript中函数如何声明_它们有哪些类型

JavaScript 中函数声明方式灵活，主要分 函数声明、函数表达式、箭头函数 和 方法简写 四类，每种适用场景不同，理解区别能避免常见坑。

函数声明（Function Declaration）

用 function 关键字 + 函数名 + 参数列表 + 函数体定义，会被**提升（hoisted）**，即调用可写在声明之前。

例如：

function sayHello(name) {
return 'Hello, ' + name;
}

✅ 优点：可提前调用，语义清晰；
❌ 注意：不能在 if 或 for 等块级结构中声明（ES5 严格模式会报错，ES6+ 行为不一致，建议避免）。

函数表达式（Function Expression）

把函数赋值给变量（或对象属性），不被提升，必须先定义再调用。匿名或具名均可。

例如：

const add = function(a, b) {
return a + b;
};

// 具名函数表达式（利于调试栈追踪）
const multiply = function mult(x, y) {
return x * y;
};

✅ 适合回调、立即执行（IIFE）、动态赋值；
❌ 不能提前调用，否则报 ReferenceError。

箭头函数（Arrow Function）

ES6 引入，语法简洁：(参数) => { 函数体 }，没有自己的 this、arguments、super 或 new.target，继承自外层作用域。

例如：

const square = x => x * x;
const greet = (name, time) => `Good ${time}, ${name}!`;
const log = () => { console.log('hi'); };

✅ 适合简短逻辑、避免 this 绑定问题（如事件回调、数组方法）；
❌ 不能用作构造函数（无 prototype），不能使用 arguments 对象（改用剩余参数 ...args）。

对象中的方法简写（Method Shorthand）

ES6 允许在对象字面量中省略 function 关键字和冒号，更简洁，且有自己绑定的 this（非箭头函数）。

例如：

const user = {
  name: 'Alice',
  sayHi() {
    return `Hi, I'm ${this.name}`;
  },
  // 箭头函数写法 ❌ this 不绑定到对象
  // sayBye: () => `Bye, ${this.name}` // this 指向外层，通常不是 user
};

✅ 语义明确，this 指向调用对象；
❌ 箭头函数不能用于对象方法简写（会丢失预期的 this）。

基本上就这些。选哪种，看你要不要提升、要不要独立 this、是否需要构造实例、代码是否追求极简——没绝对好坏，但用错容易引发隐性 bug。

以上就是《JavaScript函数声明方式及类型详解》的详细内容，更多关于的资料请关注golang学习网公众号！

资料下载

编程学习资料下载

精选编程（Golang、Python、Java、C++、JavaScript等）教程、电子书与示例源码，一键打包本地下载学习。

立即下载