logo
GitHub

JavaScript 函数和作用域

函数基础

函数声明

最基本的函数定义方式:

function sayHello(name) {
return `Hello, ${name}!`;
}
console.log(sayHello('Alice')); // "Hello, Alice!"

函数表达式

将函数赋值给变量:

const greet = function(name) {
return `Hi, ${name}!`;
};
console.log(greet('Bob')); // "Hi, Bob!"

箭头函数(ES6)

更简洁的函数写法:

const add = (a, b) => a + b;
const square = x => x * x;
const sayHi = () => 'Hi!';
console.log(add(2, 3)); // 5
console.log(square(4)); // 16
console.log(sayHi()); // "Hi!"

函数参数

默认参数

function multiply(a, b = 1) {
return a * b;
}
console.log(multiply(5)); // 5
console.log(multiply(5, 2)); // 10

剩余参数

function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

参数解构

function printUserInfo({ name, age }) {
console.log(`${name} is ${age} years old`);
}
const user = { name: 'Alice', age: 25 };
printUserInfo(user); // "Alice is 25 years old"

作用域

全局作用域

在函数外部声明的变量:

const globalVar = 'I am global';
function testScope() {
console.log(globalVar); // 可以访问全局变量
}

函数作用域

在函数内部声明的变量:

function testLocalScope() {
const localVar = 'I am local';
console.log(localVar); // 可以访问
}
// console.log(localVar); // 错误:localVar 未定义

块级作用域

在代码块(如 if、for 等)内使用 let/const 声明的变量:

if (true) {
let blockVar = 'I am in a block';
console.log(blockVar); // 可以访问
}
// console.log(blockVar); // 错误:blockVar 未定义

闭包

函数可以访问其定义时的作用域:

function createCounter() {
let count = 0;
return function() {
return ++count;
};
}
const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

实际应用

function createGreeting(greeting) {
return function(name) {
return `${greeting}, ${name}!`;
};
}
const sayHello = createGreeting('Hello');
const sayHi = createGreeting('Hi');
console.log(sayHello('Alice')); // "Hello, Alice!"
console.log(sayHi('Bob')); // "Hi, Bob!"

this 关键字

普通函数中的 this

const person = {
name: 'Alice',
sayName: function() {
console.log(this.name);
}
};
person.sayName(); // "Alice"

箭头函数中的 this

const person = {
name: 'Alice',
sayNameDelayed: function() {
setTimeout(() => {
console.log(this.name);
}, 100);
}
};
person.sayNameDelayed(); // "Alice"

练习

  1. 创建一个计算器对象,包含加减乘除方法
  2. 实现一个函数,可以限制另一个函数的调用次数
  3. 使用闭包实现私有变量

小结

  • 掌握不同的函数定义方式
  • 理解函数参数的灵活使用
  • 深入理解作用域规则
  • 学会运用闭包解决实际问题
  • 正确处理 this 关键字