JavaScript基础课程七、JavaScript 函数基础与作用域

JavaScript 函数基础与作用域

本课是JavaScript从基础语法走向模块化编程的核心课程，聚焦函数基础与作用域两大关键内容，搭建起代码复用与逻辑拆分的核心框架。学习者需吃透函数两种创建方式、参数传递、返回值用法，掌握全局与函数作用域的边界规则，理解变量就近查找的作用域链逻辑。课程摒弃纯理论，结合英语单词检测、成绩计算等场景，把抽象语法落地为实战功能，帮助养成模块化编码习惯，减少代码冗余。本课内容承接前序循环、数组知识，后启对象、DOM、工程化学习，是写出高效、规范、可维护代码的关键基石，彻底告别冗余代码，实现逻辑清晰化。

一、课程学习目的

理解函数的核心定义与编程价值，掌握函数声明、表达式两种创建方式，熟练完成函数调用与参数传递；
吃透全局作用域、函数作用域、块级作用域的边界规则，理清变量查找逻辑，规避变量污染与访问异常；
掌握函数参数、返回值的用法，理解形参与实参的对应关系，实现代码模块化与复用，减少冗余代码；
结合儿童英语单词检测、成绩计算等场景落地函数应用，养成模块化编程思维，提升代码可读性与可维护性。

二、核心知识点深度讲解

1. 函数基础认知

函数是封装特定功能的代码块，实现一次编写、多次调用，是JavaScript模块化编程的核心，主要用于拆分复杂逻辑、复用代码、简化维护。函数包含三要素：函数名（调用标识）、参数（接收外部数据）、返回值（输出执行结果）。

函数创建方式

函数声明式 ：语法固定，存在函数提升，可先调用后声明，格式：function 函数名(形参){ 执行代码 }
函数表达式 ：将函数赋值给变量，无函数提升，必须先声明后调用，格式：let 变量名 = function(形参){ 执行代码 }

函数参数与返回值

形参：函数定义时的占位符，用于接收外部传入数据，可设置多个，用逗号分隔；
实参：函数调用时传入的具体数据，个数与顺序需和形参对应；
return：用于返回函数执行结果，终止函数执行，无return则默认返回undefined。

2. 作用域核心规则

全局作用域：代码最外层定义的变量/函数，全局可访问，页面关闭才销毁，易造成全局污染；
函数作用域：函数内部定义的变量/函数，仅函数内部可访问，外部无法调用，函数执行完毕销毁；
作用域链：变量查找遵循"就近原则"，先在当前作用域查找，找不到则向上级作用域查找，直至全局作用域。

3. 函数调用与注意事项

函数调用格式：函数名(实参)，调用后才会执行函数内部代码；
函数遵循单一职责原则，一个函数只实现一个功能，避免逻辑混杂；
禁止在函数内部重复声明同名变量，防止作用域冲突导致结果异常。

三、示例程序

示例1：函数声明式与调用-英语单词检测

javascript 复制代码

// 函数声明式：封装英语单词正误检测功能
// word：形参，接收用户输入的单词
// rightWord：形参，接收正确单词
function checkWord(word, rightWord) {
    // 判断输入单词与正确单词是否严格相等
    if (word === rightWord) {
        // 返回正确提示
        return "恭喜，单词拼写正确！";
    } else {
        // 返回错误提示
        return "拼写错误，请重新尝试！";
    }
}

// 函数调用：传入实参，接收返回值
let result = checkWord("apple", "apple");
// 打印检测结果
console.log(result);

示例说明：本示例采用函数声明式，封装儿童英语单词拼写检测功能，通过两个形参接收输入值与正确值，内部做条件判断后用return返回结果。调用时传入实参，可重复调用检测不同单词，实现代码复用。清晰展示函数声明、参数传递、返回值、调用的完整流程，帮助初学者理解函数基础用法，贴合实战场景。

示例2：函数表达式与无参函数

javascript 复制代码

// 函数表达式：封装打印学习提示功能，无参数
let printTip = function() {
    // 函数内部执行代码，无返回值则默认返回undefined
    console.log("每日英语单词学习：坚持积累，提升词汇量！");
    console.log("提示：单词拼写需区分大小写");
};

// 调用无参函数
printTip();
// 重复调用，验证代码复用性
printTip();

示例说明：本示例用函数表达式创建无参函数，封装固定提示语打印功能，无需接收外部数据，调用即可执行。对比函数声明式，体现无函数提升、先声明后调用的规则，同时展示无参函数的适用场景。通过重复调用，直观体现函数复用优势，帮助区分两种函数创建方式的差异，夯实基础。

示例3：作用域与变量访问-全局+函数作用域

javascript 复制代码

// 全局变量：全局作用域，所有位置可访问
let globalWord = "banana";

// 定义函数，创建函数作用域
function testScope() {
    // 局部变量：仅函数内部可访问
    let localWord = "orange";
    // 内部访问全局变量+局部变量
    console.log("函数内部访问全局变量：", globalWord);
    console.log("函数内部访问局部变量：", localWord);
}

// 调用函数
testScope();
// 外部访问全局变量，正常执行
console.log("外部访问全局变量：", globalWord);
// 外部访问局部变量，报错：localWord is not defined
// console.log("外部访问局部变量：", localWord);

示例说明：本示例清晰演示全局作用域与函数作用域的变量访问规则，全局变量内外均可访问，局部变量仅函数内部可访问，外部调用会报错。通过报错注释，直观体现作用域边界，帮助理解作用域链与变量查找规则，从根源规避变量访问异常、全局污染等入门常见问题。

示例4：带返回值的计算函数-成绩求和

javascript 复制代码

// 封装函数：计算两个成绩的总和
// score1、score2：形参，接收两个分数
function sumScore(score1, score2) {
    // 计算总分
    let total = score1 + score2;
    // 返回总分结果
    return total;
}

// 调用函数，传入实参，接收返回值
let chineseScore = 90;
let mathScore = 95;
let totalScore = sumScore(chineseScore, mathScore);
// 打印最终结果
console.log("两门科目总分：", totalScore);

示例说明：本示例创建带参数与返回值的计算函数，实现成绩求和功能，参数接收外部分数，内部计算后通过return返回结果，调用后可存储结果做后续处理。完整展示参数传递、逻辑运算、返回值接收的流程，体现函数在数据计算中的应用，帮助掌握return的核心用法，适配各类数据处理场景。

四、掌握技巧与方法

函数命名规范：用英文动词+名词组合，见名知意，禁止中文、特殊符号，区分大小写；
参数使用技巧：实参与形参个数、顺序保持一致，必要时设置参数默认值；
作用域避坑：优先使用局部变量，减少全局变量，防止变量污染与冲突；
代码复用技巧：重复执行的逻辑优先封装成函数，遵循单一职责，提升维护效率；
调试技巧：函数执行异常时，检查参数传递、return语句、作用域访问是否合规。

五、课后作业

基础必做作业

分别用函数声明式、函数表达式创建两个函数，实现打印个人学习计划的功能，调用并验证结果；
创建一个带参数函数，接收一个英语单词，打印该单词+中文释义，调用3次传入不同单词；
定义全局变量与局部变量各一个，验证不同位置的访问权限，标注可访问与不可访问场景。

进阶必做作业

创建函数，接收两个数字参数，返回两数的差值，调用后打印结果；
封装函数，判断一个数字是奇数还是偶数，返回判断结果，实现代码复用。

实战场景作业

封装儿童英语单词检测小程序：创建函数接收用户输入单词与正确单词，忽略大小写判断是否正确，返回对应提示语，多次调用检测不同单词，全程做好参数传递与结果返回。

作业验收标准

代码格式规范、缩进整齐、注释完整，函数调用无报错，功能正常实现，作用域访问无异常，实战作业贴合场景需求。