前言函数是 JavaScript 的核心基石也是代码复用、逻辑封装的核心手段。很多前端初学者刚接触 JS 时分不清函数声明 / 函数表达式、形参与实参、局部 / 全局作用域写代码时经常出现变量冲突、调用报错、返回值丢失等问题。本文结合经典《JavaScript jQuery 交互式 Web 前端开发》教材案例从零拆解 JS 函数全套知识点包含可运行示例、核心概念对比、实战使用场景看完彻底吃透基础函数适配新手入门与面试复习。一、什么是函数基础示例看懂函数作用函数本质是封装一组可重复执行代码的代码块把完成特定任务的语句打包需要时直接调用避免重复抄写代码。实战完整案例页面修改 DOM 文本HTML 代码basic-function.htmlhtml预览!DOCTYPE html html head titleBasic Function/title link relstylesheet hrefcss/c03.css / /head body h1TravelWorthy/h1 div idmessageWelcome to our site!/div !-- 引入外部JS文件 -- script srcjs/basic-function.js/script /body /htmlJS 代码basic-function.jsjavascript运行// 全局消息变量 var msg Sign up to receive our newsletter for 10% off!; // 函数声明封装修改页面文本逻辑 function updateMessage() { // 获取id为message的DOM元素 var el document.getElementById(message); // 修改元素文本内容 el.textContent msg; } // 调用函数执行内部代码 updateMessage();运行结果说明页面原本显示Welcome to our site!JS 文件加载后调用updateMessage()函数自动替换 div 内文本为优惠提示文案。函数内代码只有调用时才会执行不调用则内部逻辑永远不会运行同一函数可在代码任意位置多次调用复用 DOM 修改逻辑。二、函数的两种基础操作声明函数 调用函数2.1 function 关键字声明函数命名函数语法规则function 函数名() { 代码块 }拆解语法组成functionJS 内置关键字代表声明函数函数名自定义标识符用于后续调用()括号可存放参数无参数留空{}函数体存放需要执行的所有业务代码。示例无参基础函数javascript运行// 函数声明 function sayHello() { document.write(Hello!); }2.2 调用函数执行函数内部代码声明函数后函数不会自动执行必须通过函数名()格式调用javascript运行// 调用函数执行{}内所有代码 sayHello();调用特性同一个函数可调用无数次每次调用都会重新执行内部代码JS 存在函数提升function 声明的函数可以写在调用语句之后解释器会提前扫描全局函数定义不会报错。示例调用写在函数声明前合法javascript运行sayHello(); function sayHello() { document.write(Hello!); }三、带参数的函数形参、实参完整区分很多场景下函数执行需要外部传入数据比如计算面积需要长宽此时就要用到参数分为形参和实参两个核心概念。3.1 形参函数声明时定义的占位变量写在函数括号内的变量名就是形参仅在函数内部生效行为等同于局部变量。javascript运行// width、height 是形参 function getArea(width, height) { return width * height; }3.2 实参调用函数时传入的真实数据调用函数括号内传递的真实值 / 变量叫做实参会一一对应赋值给形参。 两种传参方式直接传入字面量数值javascript运行// 3对应width5对应height3、5是实参 getArea(3, 5);传入已定义变量javascript运行var wallWidth 3; var wallHeight 5; // 变量作为实参传递 getArea(wallWidth, wallHeight);3.3 形参 VS 实参核心区别对照表表格维度形参实参出现位置函数声明function fn(形参1,形参2)函数调用fn(实参1,实参2)本质函数内部的占位变量真实的数据 / 变量作用域仅函数内部可用全局 / 当前作用域任意数据四、函数返回值return 获取函数执行结果函数执行计算、处理逻辑后经常需要把结果交给外部代码使用依靠return关键字实现返回值。4.1 返回单个数值语法return 数据;执行 return 后函数会立刻终止return 后的代码不会运行。javascript运行function calculateArea(width, height) { var area width * height; // 返回计算结果 return area; // 下面代码永远不会执行 console.log(这段代码不会运行); } // 接收函数返回值存入变量 var wallOne calculateArea(3, 5); // wallOne 15 var wallTwo calculateArea(8, 5); // wallTwo 404.2 返回多个值借助数组JS 中return只能返回一个数据如需同时返回多个结果可将数据存入数组 / 对象后统一返回javascript运行// 计算矩形面积立方体体积返回两个结果 function getSize(width, height, depth) { var area width * height; var volume width * height * depth; // 数组打包多个值返回 var sizes [area, volume]; return sizes; } // 通过数组下标分别取出返回值 var areaOne getSize(3, 2, 3)[0]; // 面积 6 var volumeOne getSize(3, 2, 3)[1]; // 体积 18五、两种函数定义方式函数声明 VS 函数表达式JS 定义函数分为两大体系function函数声明、函数表达式匿名函数二者核心区别是函数提升。5.1 函数声明前文已用javascript运行function area(width, height) { return width * height; } // 可在声明前调用存在提升 var size area(3, 4);5.2 函数表达式匿名函数将匿名函数赋值给变量变量名作为调用标识不存在提升必须先定义再调用。javascript运行// 匿名函数赋值给变量area var area function(width, height) { return width * height; }; // 必须写在表达式定义之后写前面会报错 var size area(3, 4);核心差异总结函数声明有函数名、存在提升、可先调用后定义函数表达式大多为匿名函数、无提升、必须先定义后调用适用场景封装通用逻辑用函数声明回调、事件、一次性逻辑用函数表达式。六、IIFE 立即调用函数表达式匿名函数一次性执行IIFE 全称 Immediately Invoked Function Expression读作 “iffy”是函数表达式的特殊用法定义完成立刻执行仅运行一次。标准 IIFE 写法javascript运行var area (function() { var width 3; var height 2; // 函数执行完直接返回结果存入area变量 return width * height; })(); console.log(area); // 6语法拆解(function(){})括号将匿名函数转为表达式末尾()代表立刻执行这个函数IIFE 核心使用场景仅需运行一次的初始化代码隔离变量避免全局命名冲突配合作用域事件回调、函数传参、第三方库封装jQuery 底层大量使用。七、变量作用域局部变量 全局变量避坑重点函数内部 / 外部定义的变量访问范围完全不同这个访问范围叫做作用域也是新手最容易踩坑的知识点。7.1 局部变量函数作用域在函数内部使用var声明的变量仅当前函数内部能访问函数执行完毕后变量销毁不占用长期内存。javascript运行function getArea(width, height) { // area是局部变量函数外无法访问 var area width * height; return area; } console.log(area); // 报错area未定义局部变量优势不同函数可使用同名变量不会冲突函数执行完自动销毁节省浏览器内存。7.2 全局变量函数外部、script 顶层定义的变量整个页面所有 JS 代码、所有函数都能访问生命周期和页面一致页面关闭才销毁。javascript运行// wallSize是全局变量 var wallSize 10; function getArea() { // 函数内可直接读取全局变量 console.log(wallSize); }全局变量缺点长期驻留内存页面加载全程占用资源多 JS 文件协同开发时极易出现命名冲突代码耦合度高维护困难。补充不写 var 的隐形全局变量函数内部定义变量时省略var关键字变量会自动变成全局变量属于不良编码习惯开发中禁止使用javascript运行function test() { // 无varwidth自动升级为全局变量 width 10; } test(); console.log(width); // 10外部可访问作用域内存原理全局变量页面载入时创建页面关闭才销毁长期占用内存局部变量函数调用时创建函数执行结束立刻销毁内存开销更小开发规范优先使用局部变量尽量少定义全局变量。八、完整知识点思维导图复习速记plaintextJS函数 ├─ 定义方式 │ ├─ 函数声明 function fn(){} 【有提升可先调用】 │ └─ 函数表达式 var fn function(){} 【无提升匿名】 │ └─ IIFE 立即执行函数 (function(){})() 一次性执行、隔离变量 ├─ 参数体系 │ ├─ 形参声明时括号内占位变量 │ └─ 实参调用时传入真实数据/变量 ├─ 返回值 return │ ├─ 返回单个数据 return 123; │ └─ 返回多个数据 return [a,b];数组承载 ├─ 调用规则 fn() │ └─ 不写()仅代表函数本身加()才会执行 └─ 变量作用域 ├─ 局部变量函数内var定义仅内部访问执行后销毁 └─ 全局变量顶层定义全页面访问长期占用内存九、新手高频踩坑总结函数表达式写在调用之后报is not a function错误 解决函数表达式必须先定义再调用function 声明无限制。return 后仍写代码逻辑不执行 解决return 会终止函数后续代码全部失效。函数内变量外部读取不到 解决函数内 var 变量是局部变量外部无法访问需要 return 导出。多文件变量重名值被莫名覆盖 解决减少全局变量使用 IIFE、局部变量隔离命名空间。省略 var 定义变量意外污染全局 解决所有变量声明强制添加 var/let/const。结语函数是 JS 模块化、代码复用的根基本文覆盖教材全部核心案例从基础定义到作用域、IIFE 完整覆盖。掌握本文内容后可以轻松看懂回调函数、对象方法、闭包等进阶知识点后续会持续更新 JS 函数进阶闭包、箭头函数、this 指向系列文章。
前言函数是 JavaScript 的核心基石也是代码复用、逻辑封装的核心手段。很多前端初学者刚接触 JS 时分不清函数声明 / 函数表达式、形参与实参、局部 / 全局作用域写代码时经常出现变量冲突、调用报错、返回值丢失等问题。本文结合经典《JavaScript jQuery 交互式 Web 前端开发》教材案例从零拆解 JS 函数全套知识点包含可运行示例、核心概念对比、实战使用场景看完彻底吃透基础函数适配新手入门与面试复习。一、什么是函数基础示例看懂函数作用函数本质是封装一组可重复执行代码的代码块把完成特定任务的语句打包需要时直接调用避免重复抄写代码。实战完整案例页面修改 DOM 文本HTML 代码basic-function.htmlhtml预览!DOCTYPE html html head titleBasic Function/title link relstylesheet hrefcss/c03.css / /head body h1TravelWorthy/h1 div idmessageWelcome to our site!/div !-- 引入外部JS文件 -- script srcjs/basic-function.js/script /body /htmlJS 代码basic-function.jsjavascript运行// 全局消息变量 var msg Sign up to receive our newsletter for 10% off!; // 函数声明封装修改页面文本逻辑 function updateMessage() { // 获取id为message的DOM元素 var el document.getElementById(message); // 修改元素文本内容 el.textContent msg; } // 调用函数执行内部代码 updateMessage();运行结果说明页面原本显示Welcome to our site!JS 文件加载后调用updateMessage()函数自动替换 div 内文本为优惠提示文案。函数内代码只有调用时才会执行不调用则内部逻辑永远不会运行同一函数可在代码任意位置多次调用复用 DOM 修改逻辑。二、函数的两种基础操作声明函数 调用函数2.1 function 关键字声明函数命名函数语法规则function 函数名() { 代码块 }拆解语法组成functionJS 内置关键字代表声明函数函数名自定义标识符用于后续调用()括号可存放参数无参数留空{}函数体存放需要执行的所有业务代码。示例无参基础函数javascript运行// 函数声明 function sayHello() { document.write(Hello!); }2.2 调用函数执行函数内部代码声明函数后函数不会自动执行必须通过函数名()格式调用javascript运行// 调用函数执行{}内所有代码 sayHello();调用特性同一个函数可调用无数次每次调用都会重新执行内部代码JS 存在函数提升function 声明的函数可以写在调用语句之后解释器会提前扫描全局函数定义不会报错。示例调用写在函数声明前合法javascript运行sayHello(); function sayHello() { document.write(Hello!); }三、带参数的函数形参、实参完整区分很多场景下函数执行需要外部传入数据比如计算面积需要长宽此时就要用到参数分为形参和实参两个核心概念。3.1 形参函数声明时定义的占位变量写在函数括号内的变量名就是形参仅在函数内部生效行为等同于局部变量。javascript运行// width、height 是形参 function getArea(width, height) { return width * height; }3.2 实参调用函数时传入的真实数据调用函数括号内传递的真实值 / 变量叫做实参会一一对应赋值给形参。 两种传参方式直接传入字面量数值javascript运行// 3对应width5对应height3、5是实参 getArea(3, 5);传入已定义变量javascript运行var wallWidth 3; var wallHeight 5; // 变量作为实参传递 getArea(wallWidth, wallHeight);3.3 形参 VS 实参核心区别对照表表格维度形参实参出现位置函数声明function fn(形参1,形参2)函数调用fn(实参1,实参2)本质函数内部的占位变量真实的数据 / 变量作用域仅函数内部可用全局 / 当前作用域任意数据四、函数返回值return 获取函数执行结果函数执行计算、处理逻辑后经常需要把结果交给外部代码使用依靠return关键字实现返回值。4.1 返回单个数值语法return 数据;执行 return 后函数会立刻终止return 后的代码不会运行。javascript运行function calculateArea(width, height) { var area width * height; // 返回计算结果 return area; // 下面代码永远不会执行 console.log(这段代码不会运行); } // 接收函数返回值存入变量 var wallOne calculateArea(3, 5); // wallOne 15 var wallTwo calculateArea(8, 5); // wallTwo 404.2 返回多个值借助数组JS 中return只能返回一个数据如需同时返回多个结果可将数据存入数组 / 对象后统一返回javascript运行// 计算矩形面积立方体体积返回两个结果 function getSize(width, height, depth) { var area width * height; var volume width * height * depth; // 数组打包多个值返回 var sizes [area, volume]; return sizes; } // 通过数组下标分别取出返回值 var areaOne getSize(3, 2, 3)[0]; // 面积 6 var volumeOne getSize(3, 2, 3)[1]; // 体积 18五、两种函数定义方式函数声明 VS 函数表达式JS 定义函数分为两大体系function函数声明、函数表达式匿名函数二者核心区别是函数提升。5.1 函数声明前文已用javascript运行function area(width, height) { return width * height; } // 可在声明前调用存在提升 var size area(3, 4);5.2 函数表达式匿名函数将匿名函数赋值给变量变量名作为调用标识不存在提升必须先定义再调用。javascript运行// 匿名函数赋值给变量area var area function(width, height) { return width * height; }; // 必须写在表达式定义之后写前面会报错 var size area(3, 4);核心差异总结函数声明有函数名、存在提升、可先调用后定义函数表达式大多为匿名函数、无提升、必须先定义后调用适用场景封装通用逻辑用函数声明回调、事件、一次性逻辑用函数表达式。六、IIFE 立即调用函数表达式匿名函数一次性执行IIFE 全称 Immediately Invoked Function Expression读作 “iffy”是函数表达式的特殊用法定义完成立刻执行仅运行一次。标准 IIFE 写法javascript运行var area (function() { var width 3; var height 2; // 函数执行完直接返回结果存入area变量 return width * height; })(); console.log(area); // 6语法拆解(function(){})括号将匿名函数转为表达式末尾()代表立刻执行这个函数IIFE 核心使用场景仅需运行一次的初始化代码隔离变量避免全局命名冲突配合作用域事件回调、函数传参、第三方库封装jQuery 底层大量使用。七、变量作用域局部变量 全局变量避坑重点函数内部 / 外部定义的变量访问范围完全不同这个访问范围叫做作用域也是新手最容易踩坑的知识点。7.1 局部变量函数作用域在函数内部使用var声明的变量仅当前函数内部能访问函数执行完毕后变量销毁不占用长期内存。javascript运行function getArea(width, height) { // area是局部变量函数外无法访问 var area width * height; return area; } console.log(area); // 报错area未定义局部变量优势不同函数可使用同名变量不会冲突函数执行完自动销毁节省浏览器内存。7.2 全局变量函数外部、script 顶层定义的变量整个页面所有 JS 代码、所有函数都能访问生命周期和页面一致页面关闭才销毁。javascript运行// wallSize是全局变量 var wallSize 10; function getArea() { // 函数内可直接读取全局变量 console.log(wallSize); }全局变量缺点长期驻留内存页面加载全程占用资源多 JS 文件协同开发时极易出现命名冲突代码耦合度高维护困难。补充不写 var 的隐形全局变量函数内部定义变量时省略var关键字变量会自动变成全局变量属于不良编码习惯开发中禁止使用javascript运行function test() { // 无varwidth自动升级为全局变量 width 10; } test(); console.log(width); // 10外部可访问作用域内存原理全局变量页面载入时创建页面关闭才销毁长期占用内存局部变量函数调用时创建函数执行结束立刻销毁内存开销更小开发规范优先使用局部变量尽量少定义全局变量。八、完整知识点思维导图复习速记plaintextJS函数 ├─ 定义方式 │ ├─ 函数声明 function fn(){} 【有提升可先调用】 │ └─ 函数表达式 var fn function(){} 【无提升匿名】 │ └─ IIFE 立即执行函数 (function(){})() 一次性执行、隔离变量 ├─ 参数体系 │ ├─ 形参声明时括号内占位变量 │ └─ 实参调用时传入真实数据/变量 ├─ 返回值 return │ ├─ 返回单个数据 return 123; │ └─ 返回多个数据 return [a,b];数组承载 ├─ 调用规则 fn() │ └─ 不写()仅代表函数本身加()才会执行 └─ 变量作用域 ├─ 局部变量函数内var定义仅内部访问执行后销毁 └─ 全局变量顶层定义全页面访问长期占用内存九、新手高频踩坑总结函数表达式写在调用之后报is not a function错误 解决函数表达式必须先定义再调用function 声明无限制。return 后仍写代码逻辑不执行 解决return 会终止函数后续代码全部失效。函数内变量外部读取不到 解决函数内 var 变量是局部变量外部无法访问需要 return 导出。多文件变量重名值被莫名覆盖 解决减少全局变量使用 IIFE、局部变量隔离命名空间。省略 var 定义变量意外污染全局 解决所有变量声明强制添加 var/let/const。结语函数是 JS 模块化、代码复用的根基本文覆盖教材全部核心案例从基础定义到作用域、IIFE 完整覆盖。掌握本文内容后可以轻松看懂回调函数、对象方法、闭包等进阶知识点后续会持续更新 JS 函数进阶闭包、箭头函数、this 指向系列文章。
