JavaScript函数核心知识详解

JavaScript中的函数不仅仅是用来封装代码的，它们在语言中有着特殊的地位。理解函数的工作原理，是学好JavaScript的关键。

函数的定义方式

JavaScript提供了几种不同的函数定义方法：

第一种是函数声明：

function sayHello(name) {
  return `你好，${name}`;
}

这种方式的特点是存在提升效果，你可以在函数声明之前调用它。

第二种是函数表达式：

const sayHello = function(name) {
  return `你好，${name}`;
};

这种方式不会提升，必须在赋值之后才能使用。

第三种是箭头函数：

const sayHello = (name) => `你好，${name}`;

箭头函数写法简洁，没有自己的this值，也不能用作构造函数。

在实际开发中，函数声明适合用在模块的顶层，函数表达式和箭头函数适合在需要的时候直接使用。

函数参数的处理

JavaScript函数对参数个数要求很宽松，传入的参数可以和定义的参数个数不同。

function showInfo(name, age) {
  console.log(`${name}，${age}岁`);
}

showInfo("张三");           // "张三，undefined岁"
showInfo("李四", 25, "额外参数"); // "李四，25岁"

如果参数不够，缺少的参数就是undefined。如果参数多了，多出来的会被忽略。

要处理不确定数量的参数，有两种方法：

传统的方式是使用arguments：

function addNumbers() {
  let sum = 0;
  for (let i = 0; i < arguments.length; i++) {
    sum += arguments[i];
  }
  return sum;
}

现在更推荐使用rest参数：

function addNumbers(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}

rest参数会得到一个真正的数组，而且必须放在参数列表的最后。

作用域规则

作用域决定了变量在哪里可以被访问。

全局变量在任何地方都可以访问，局部变量只能在函数内部访问：

let globalVar = "全局变量";

function testScope() {
  let localVar = "局部变量";
  console.log(globalVar); // 可以访问
  console.log(localVar);  // 可以访问
}

testScope();
// console.log(localVar); // 这里会报错

关于块级作用域，var和let的表现不同：

if (true) {
  var a = 1;
  let b = 2;
}
console.log(a); // 1，var声明的变量会提升
// console.log(b); // 报错，let声明的变量只在块内有效

现在建议使用let和const来代替var，这样可以避免很多意想不到的问题。

闭包的理解和使用

闭包是指函数能够记住并访问它定义时的作用域，即使函数在其他地方执行。

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2

count变量被内部函数引用，所以不会被清除，形成了私有状态。

闭包在实际开发中很有用，比如用来封装数据：

function createBankAccount(initialBalance) {
  let balance = initialBalance;
  return {
    deposit(amount) {
      balance += amount;
    },
    withdraw(amount) {
      if (amount <= balance) balance -= amount;
    },
    getBalance() {
      return balance;
    }
  };
}

const account = createBankAccount(1000);
account.deposit(500);
console.log(account.getBalance()); // 1500

外部代码无法直接修改balance，保证了数据安全。

this的关键知识点

this的值取决于函数如何被调用，而不是在哪里定义。

const obj = {
  name: "示例对象",
  normalMethod() {
    console.log(this.name);
  },
  arrowMethod: () => {
    console.log(this.name);
  }
};

obj.normalMethod(); // "示例对象"
obj.arrowMethod();   // undefined

普通函数的this指向调用它的对象，箭头函数的this继承自外层作用域。因此，对象的方法应该使用普通函数。

立即执行函数

立即执行函数可以创建独立的作用域，避免污染全局环境。

(function() {
  const privateVar = "私有变量";
  console.log("立即执行");
})();

(() => {
  console.log("箭头函数立即执行");
})();

在模块化规范普及之前，这是组织代码的常用方法。

高阶函数

函数可以作为参数传递，也可以作为返回值，这是函数作为"一等公民"的特性。

function processArray(arr, processor) {
  const result = [];
  for (const item of arr) {
    result.push(processor(item));
  }
  return result;
}

const numbers = [1, 2, 3];
const doubled = processArray(numbers, x => x * 2);
console.log(doubled); // [2, 4, 6]

数组的map、filter、reduce等方法都是基于这个原理。

实际应用：事件系统

结合闭包和高阶函数，我们可以实现一个简单的事件系统：

function createEventSystem() {
  const eventListeners = {};

  return {
    on(eventName, callback) {
      if (!eventListeners[eventName]) {
        eventListeners[eventName] = [];
      }
      eventListeners[eventName].push(callback);
    },
    emit(eventName, data) {
      if (eventListeners[eventName]) {
        eventListeners[eventName].forEach(callback => callback(data));
      }
    },
    off(eventName, callback) {
      if (eventListeners[eventName]) {
        eventListeners[eventName] = eventListeners[eventName]
          .filter(cb => cb !== callback);
      }
    }
  };
}

const eventBus = createEventSystem();
eventBus.on("message", data => console.log("收到：", data));
eventBus.emit("message", "你好世界");

常见问题和解决方法

循环中的闭包是个常见陷阱：

错误写法：

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 输出 3, 3, 3
}

正确写法：

// 使用let
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // 输出 0, 1, 2
}

// 或者使用立即执行函数
for (var i = 0; i < 3; i++) {
  ((j) => setTimeout(() => console.log(j), 100))(i);
}

开发建议

优先使用const，避免意外修改变量
简单的函数逻辑可以使用箭头函数
对象的方法使用普通函数来确保this正确
合理使用闭包，注意避免内存泄漏
一个函数只做一件事，保持函数简洁
给函数起有意义的名称
控制函数的参数数量，太多参数可以考虑使用对象

学习要点总结

概念	重点内容
函数定义	声明会提升，表达式不会，箭头函数没有this
参数处理	参数个数灵活，推荐使用rest参数
作用域	let/const有块级作用域，var没有
闭包	函数可以记住定义时的作用域
this指向	普通函数动态绑定，箭头函数静态继承
高阶函数	函数可以作为参数或返回值

理解这些核心概念，能够帮助你写出更好的JavaScript代码。函数是JavaScript中最重要的一部分，花时间深入学习是值得的。在实际项目中多练习这些知识点，你会逐渐掌握它们的精髓。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13026