javascript 里面的 function 关键字,作用就是用来定义函数,函数本质就是把一段可以重复调用的代码封装起来,需要的时候直接调用,不用重复写相同代码,它是 JS 最基础核心语法,不管写网页交互 表单校验 动画逻辑都离不开 function,很多初学者容易混淆函数声明 函数表达式 箭头函数这几种写法,function 属于传统标准声明方式,支持函数提升,和后面两种写法执行机制有差别,理解 function 的语法结构 参数 返回值 调用方式还有提升特性之后,就可以在 JS 代码里面正确创建和调用函数,避免变量提升 this 指向这类常见坑。
基础信息表
| 项目 | 详细内容 |
|---|---|
| 关键字 | function |
| 作用 | 声明定义函数 |
| 所属语言 | JavaScript |
| 核心特性 | 函数提升 |
| 关键字后面可跟 | 函数名 参数列表 函数体 |
| 返回关键字 | return |
function 基础语法结构
function 函数名 (参数 1, 参数 2){
// 函数体,需要执行的代码
return 返回值
}
语法拆解说明
function 固定关键字,不能省略
函数名 自定义命名,命名规则和变量一致
括号里面是形参,可以写多个,也可以为空
大括号包裹代码块,也就是函数内部执行代码
return 用来把结果返回给调用处,如果不写 return,函数默认返回 undefined
三种 function 相关写法对比
| 写法 | 名称 | 是否支持函数提升 | 特点 |
|---|---|---|---|
| function fn(){} | 函数声明 | 支持 | 最经典写法,可提前调用 |
| const fn = function(){} | 函数表达式 | 不支持 | 匿名函数赋值给变量 |
| ()=>{} | 箭头函数 | 不支持 | ES6 新增,没有自己的 this |
基础调用操作步骤
第一步 使用 function 声明一个函数
第二步 写好参数和内部逻辑,按需添加 return
第三步 函数名后面加括号,传入实参完成调用
第四步 接收 return 返回的结果,进行后续代码处理
示例
function add (a,b){
return a + b
}
let res = add (3,5)
console.log (res)
深度知识点
函数提升,使用 function 声明的函数,会在代码执行之前被提升到作用域顶部,所以可以在声明代码之前就调用这个函数,这个是 function 声明独有的特性,函数表达式就没有这个特性,提前调用会报未定义错误
参数特点,JS 的 function 参数是动态的,调用的时候传的实参数量和形参数量可以不一致,多传的参数会存放在 arguments 类数组对象里面,少传的参数值就是 undefined
this 指向,传统 function 里面的 this,不是在定义的时候固定,是由调用方式决定,这个是 JS 重点难点,全局调用 对象调用 事件绑定 this 指向都不一样
常见错误清单
函数写完忘记加括号调用,代码不会执行
函数名重复定义,后面的 function 会覆盖前面同名函数
误以为 function 定义之后自动执行,必须手动调用
混淆 function 声明和箭头函数,错误认为箭头函数也有函数提升
return 写在代码后面,后面代码永远不会执行
综合来看 javascript 中的 function 就是用来封装可复用代码块的关键字,传统函数声明支持函数提升,掌握语法结构 参数 return this 指向,区分它和函数表达式箭头函数的差异,就可以熟练使用 function 编写 JS 逻辑。
【常见问题】
问题 1 javascript 中 function 一定要写函数名吗
回答 1 javascript 中 function,标准函数声明必须写函数名,javascript 中 function,如果是函数表达式可以写成匿名 function,把匿名函数赋值给变量
问题 2 javascript 中 function 不写 return 返回什么
回答 1 javascript 中 function,如果函数内部没有写 return,javascript 中 function 执行结束默认返回 undefined
问题 3 javascript 中 function 为什么可以提前调用
回答 1 javascript 中 function,传统 function 声明存在函数提升机制,javascript 中 function 会在代码运行前提升到作用域顶部,所以声明前也能调用
问题 4 javascript 中 function this 指向固定吗
回答 1 javascript 中 function,传统 function 的 this 不是固定写死,javascript 中 function 的 this 由调用方式决定,和箭头函数 this 规则不一样
【免责申明】
本内容为 JavaScript 基础语法教学讲解,不同 ES 版本语法特性存在差异,代码运行结果受浏览器和 Node 环境影响,本内容仅作为前端入门学习参考。


