JavaScript函数定义方式对比解析

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《JavaScript函数定义方式及箭头函数对比解析》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

JavaScript中函数分传统函数和箭头函数，核心区别在于this绑定（传统函数动态绑定，箭头函数继承外层this）、arguments、new调用及prototype等行为。

JavaScript 中定义函数主要有两种方式：传统函数（function 声明或表达式）和箭头函数（=>）。它们最核心的区别不在语法糖，而在 this 绑定、arguments、new 调用、以及词法作用域行为 上。

传统函数的定义方式

传统函数可通过函数声明、函数表达式或构造函数创建：

• 函数声明：function add(a, b) { return a + b; } —— 可被提升（hoisted）
• 函数表达式：const multiply = function(a, b) { return a * b; }; —— 不提升，需先定义后调用
• Function 构造器：const power = new Function('x', 'n', 'return Math.pow(x, n);'); —— 动态生成，不常用，且无法访问外层闭包

箭头函数的定义方式

箭头函数是 ES6 引入的简写形式，必须用表达式写法，没有声明提升：

• 无参： const sayHi = () => console.log('Hi');
• 单参： const square = x => x * x;（括号可省）
• 多参或复杂逻辑： const greet = (name, age) => { return `I'm ${name}, ${age} years old.`; };

注意：箭头函数体若为单个表达式，隐式返回；若用花括号，则需显式写 return。

this 绑定机制完全不同

这是最关键差异：

• 传统函数的 this 在调用时动态绑定，取决于谁调用它（如对象方法、事件回调、call/apply 等）
• 箭头函数没有自己的 this，它会沿作用域链向上查找，继承外层普通函数或全局作用域的 this 值

典型场景：在对象方法中使用定时器或事件监听时，箭头函数能自然捕获当前对象的 this，而传统函数容易丢失：

const obj = {
  name: 'Alice',
  regular() {
    setTimeout(function() {
      console.log(this.name); // undefined（this 指向 global 或 undefined）
    }, 100);
  },
  arrow() {
    setTimeout(() => {
      console.log(this.name); // 'Alice'（继承外层 arrow 函数的 this）
    }, 100);
  }
};

其他重要区别

• 没有 arguments 对象：箭头函数内访问 arguments 会报错，需用剩余参数 ...args
• 不能作为构造函数：调用 new myArrowFunc() 会抛出 TypeError
• 没有 prototype 属性：所以不可用于需要原型链的场景（如继承）
• 没有 super 或 new.target：在类方法中慎用箭头函数处理继承相关逻辑

基本上就这些。选哪种函数，关键看是否需要独立的 this、是否要被 new 调用、或是否在回调中需保持上下文 —— 不复杂但容易忽略细节。

好了，本文到此结束，带大家了解了《JavaScript函数定义方式对比解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！