JavaScript 基础四 函数使用、传参、返回值、作用域、匿名函数
JavaScript 基础四 函数
- 1.1 函数
- 1.2 函数使用
-
- 函数名命名规范
- 函数的调用
- 1.3 函数传参
-
- （1）声明语法
- （2）调用有参函数
- （3）形参和实参
- （4）参数默认值
- 1.4 函数返回值
-
- （1）语法
- （2）细节
- 1.5 作用域
-
- 特殊情况
- 变量的访问原则
- 案例
- 1.6 匿名函数
1.1 函数
函数 ：function，是被设计为执行特定任务的代码块。
这么做的优势是有利于精简代码方便复用。
1.2 函数使用
函数的声明语法
function 函数名() {
函数体
}
例：
function sayHi() {
document.write('hi~')
}
函数名命名规范
- 和变量命名基本一致
- 尽量小驼峰式命名法
- 前缀应该为动词
- 命名建议：常用动词约定
e.g. getName(), addSquares()
| 动词 | 含义 |
|---|---|
| can | 判断是否可执行某个动作 |
| has | 判断是否含有某个值 |
| is | 判断是否为某个值 |
| get | 获取某个值 |
| set | 设置某个值 |
| load | 加载某些数据 |
函数的调用
//函数调用，这个函数体内的代码逻辑会被运行
函数名()
function sayHi() {
document.write('hi~')
}
sayHi() // 函数调用
1.3 函数传参
若函数完成功能需要调用者传入数据，那么就需要用有参数的函数。这样可以极大提高函数的灵活性。
（1）声明语法
function 函数名(参数列表) {
函数体
}
参数列表 ① 传入数据列表 ② 声明这个函数需要传入几个数据 ③ 多个数据用逗号隔开
例子：
function getSquare(num1) {
document.write(num1 * num1)
}
function getSum(num1, num2) {
document.write(num1 + num2)
}
（2）调用有参函数
语法：函数名（传递的参数列表）
例：getSquare(8)
（3）形参和实参
- 形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）
- 实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）
- 形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值
- 开发中尽量保持形参和实参个数一致
- 我们曾经使用过的 alert(‘打印’), parseInt(‘11’), Number(‘11’) 本质上都是函数调用的传参
（4）参数默认值
形参： 可以看做变量，但是如果一个变量不给值，默认是undefined。
如果是function getSum(num1, num2) 不传参，undefined + undefined 结果是NaN。
改进：用户不输入实参，可以给 形参默认值，可以默认为 0， 这样程序更严谨。
说明：这个默认值只会在缺少实参参数传递时 才会被执行，所以有参数会优先执行传递过来的实参 ，否则默认为 undefined。
function getSum(num1 = 0, num2 = 0) {
document.write(num1 + num2)
}
getSum() // 0， 如果不给形参默认值，结果是 NAN
例，参数是数组：
给形参 （此题是数组）一个默认值 arr = []
<body>
<script>
// 1. 封装函数
// 给一个参数的默认值
function getArrSum(arr = []) {
// console.log(arr)
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
console.log(sum)
}
getArrSum([1, 2, 3, 4, 5])
getArrSum([11, 22, 33])
getArrSum() // 0
</script>
</body>
1.4 函数返回值
其实我们前面已经接触了很多的函数具备返回值：
let num1 = prompt('请输入你的年龄')
let num2 = parseInt('111')
当然有些函数，则没有返回值：
alert('我是弹框，不需要返回值')
（1）语法
当函数需要返回数据出去时，用return关键字
语法：return 数据
例：
function getSum(num1 = 0, num2 = 0) {
return num1 + num2
}
let sum = getSum(1, 2) // 3
（2）细节
细节：
① 在函数体中使用 return 关键字能将内部的执行结果交给函数外部使用
② return 后面代码不会再被执行，会立即结束当前函数，所以 return 后面的数据不要换行写
③ return函数可以没有 return，这种情况函数默认返回值为 undefined
function fn() {
}
let re = fn()
console.log(re) // undefined
④ 两个相同的函数后面的会覆盖前面的函数。
⑤ 在Javascript中 实参的个数和形参的个数可以不一致。
如果形参过多 会自动填上undefined (了解即可)；
如果实参过多 那么多余的实参会被忽略 (函数内部有一个arguments,里面装着所有的实参)
⑥ 函数一旦碰到return就不会在往下执行了 函数的结束用return
1.5 作用域
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。
作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
- 全局变量在任何区域都可以访问和修改
- 局部变量只能在当前函数内部访问和修改
特殊情况
变量有一个坑， 特殊情况：
- 如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐
- 但是有一种情况，函数内部的形参可以看做是局部变量。
变量的访问原则
变量访问原则：采取就近原则的方式来查找变量最终的值。
- 只要是代码，就至少有一个作用域
- 写在函数内部的局部作用域
- 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
- 访问原则：在能够访问到的情况下 先局部， 局部没有在找全局
案例
function f1() {
let num = 123
function f2() {
console.log( num )
}
f2()
}
let num = 456
f1()
答案是123。
f2 的 console.log( num )中没有 num，就向上找，找到了 f1 的 num
1.6 匿名函数
匿名函数 ： 没有名字的函数, 无法直接使用。
使用方式：
① 函数表达式
② 立即执行函数
① 函数表达式
将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式。
声明语法：
let fn - function () {
// 函数体
}
调用语法：
fn() //函数名（）
其中函数的形参和实参使用跟具名函数一致。
注意：
① 具名函数的调用可以写在任何位置
② 匿名函数 函数表达式，必须先写表达式，后调用
② 立即执行函数
场景介绍：避免全局变量之间的污染。
注意： 多个立即执行函数要用 ; 分号 隔开，要不然会报错
不需要调用，立即执行
语法：
//方法1
(function () { console.log(11)}) ();
//方法2
(function () {console.log(11)} ());