JavaScript 基础第四天 — 函数 作用域 作用域链

1. 函数 function

  1. function 执行特定任务的代码块
  2. 可实现代码复用, 提高开发效率
  3. 函数和循环区别: 随时调用, 随时执行, 可重复调用
  4. 函数可把相同逻辑代码包裹起来, 通过函数调用执行包裹的代码, 有利精简代码方便复用
  5. 和变量命名基本一致, 使用小驼峰命名法, 前缀应为动词
1. 函数声明语法
1
2
3
function 函数名 {
    函数体
}
2. 函数调用与使用
  1. 函数不调用 自己不执行, 使用()调用函数
  2. 曾使用的alert()、parseInt()后面跟小括号的本质都是函数的调用
    1
    2
    3
    // 函数一次声明可多次调用 每一次调用函数 代码都会重新执行一次
    say()
    say()
  3. 循环代码写完即执行，不能方便控制执行位置
  4. 函数体是函数的构成部分, 它负责把代码包裹起来, 直到函数调用时函数体代码才会执行
1
2
3
4
function say() { // say是函数名
    console.log('你好') // 函数体
}
say() // 调用函数
3. 99乘法表封装到函数里, 调用1次
1
2
3
4
5
6
7
8
9
function say() {
    for (let num1 = 1; num1 <= 9; num1++) {
        for (let num2 = 1; num2 <= num1; num2++) {
            document.write(`${num2} x ${num1} = ${num1 * num2}`)
        }
        document.write(`<br>`)
    }
}
say()
4. 封装一个函数, 计算1~100之间的和
1
2
3
4
5
6
7
8
function say() {
    let num1 = 0
    for (let num2 = 1; num2 <= 100; num2++) {
        num1 += num2
    }
    document.write(num1)
}
say()

2. 函数传参

  1. 若函数完成功能需调用者传入数据, 就需用函数传参
  2. 调用函数时, 传几个数据就写几个, 用逗号隔开
  3. 提高函数灵活性, 函数分为形参和实参
1
2
3
4
function say(num1, num2) { // () 参数列表
    document.write(num1 + num2)
}
say(1, 100) // () 传递的参数列表 , 隔开

1. 形参和实参

  1. 形参: 声明函数时写在函数名右括号叫形参 (形式上参数)
  2. 实参: 调用函数时写在函数名右括号叫实参 (实际上参数)
  3. 形参可理解为函数内声明变量，实参可理解为变量赋值
  4. 开发中需保持形参和实参个数一致
  5. 曾使用过alert, parseInt, number本质上都是函数调用传参
2. 函数封装求和
1
2
3
4
5
6
7
8
// 利用逻辑中断 形参不赋值, 则是undefined
function say(num1, num2) {
    num1 = num1 || 0
    num2 = num2 || 0
    document.write(num1 + num2)
}
// say(1, 2)
// say()
3. 函数封装求学生总分
1
2
3
4
5
6
7
8
9
function say(num1) {
    let num2 = 0
    for (let num3 = 0; num3 < num1.length; num3++) {
        num2 += num2[num3]
    }
    document.write(num2)
}
say([11, 22, 33])
say([10, 20, 30])

3. 函数返回值

  1. 函数缺点: 把计算结果处理写死了, 内部处理了
  2. 当调用函数, 函数会返回结果, 这就是有返回值的函数
  3. 函数执行后得到结果，结果是调用者要拿到的
  4. 很多函数具备返回值(prompt, parseInt)
  5. 这些函数是JS底层内置的, 直接可使用, 有的函数, 没有返回值, 根据需求, 来设定返回值

1. return返回数据:

  1. 函数需返回数据时, 用return 来返回值
  2. return会立即结束当前函数, 将内部结果交给函数外使用
  3. 函数内只能1次return, 并且return后面代码不会被执行, 所以return后面数据不要换行写
  4. 函数可以没有return, 这种情况函数默认返回值为undefined
1
2
3
4
5
6
function say() {
  // return 10 相当于 say() = 10
    return 10
}
say()
document.write(say())
  1. 求任意数组中最大值 并返回最大值
1
2
3
4
5
6
7
8
9
10
11
function say(num1) {
    let num2 = num1[0]
    for (let num3 = 0; num3 < num1.length; num3++) {
        if (num2 < num1[num3]) {
            num2 = num1[num3]
        }
    }
return num2
}
let re = say([11, 22, 33])
document.write(re)
  1. 求任意2个数的最大值 并返回
1
2
3
4
5
6
7
8
function say(num1, num2) {
    if (num11 > num2) {
        return num1
    } else {
        return num2
    }
}
document.write(say(11, 22))

4. 作用域

  1. 作用域的使用提高逻辑局部性, 增强程序可靠性，减少名字冲突
  2. 代码中用到的名字并不总有效可用, 而限定名字可用性代码范围叫作用域
  • 全局作用域: 函数外部或整个Script 有效
  • 局部作用域: 函数内部有效, 也叫函数作用域
  • 块级作用域: { }内有效, if和for里的{ } 等…

1. 变量作用域

  1. 全局变量: 函数外部let的变量–任何区域都可访问修改
  2. 局部变量: 函数内部let的变量–局部变量只能在当前函数内部访问修改
  3. 块级变量: {}内部let变量–只能在块作用域访问, 不能跨块、跨函数访问
2. 变量作用域两个坑, 特殊情况
  1. 函数内部或块作用域内部, 变量没声明直接赋值, 也当全局变量看, 不推荐
  2. 函数内部形参可看做局部变量

5. 作用域链

  1. 作用域链：采取就近原则方式来查找变量最终值

  2. 只要是代码, 至少有一个作用域

  3. 函数中还有函数, 那这个作用域又可诞生一个作用域

  4. 根据内部函数可访问外部函数变量机制, 用链式查找决定数据能被内部函数访问叫 作用域链

  5. 下面最终结果是几？

1
2
3
4
5
6
7
8
9
function fn() {
    let num1 = 123
    function f2() {
        console.log(num1)
    }
    f2()
}
let num1 = 456
fn()
  1. 下面最终结果是几？
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let a = 1
function fn1() {
    let a = 1
    let b = '22'
    fn2()
    function fn2() {
        let a = 2
        fn3()
        function fn3() {
            let a = 3
            console.log(a) //a的值 ?
            console.log(b) //b的值 ?
        }
    }
}
fn1()

6. 匿名函数

  1. 将函数赋值给变量, 并通过变量名调用叫函数表达式
  2. 匿名函数形参和实参使用跟具名函数一样
  3. 函数分为: 具名函数, 匿名函数
1
2
3
4
let num = function () {
    document.write(1)
}
num()

7. 立即执行函数

  1. 避免全局变量之间的污染
  2. 无需调用, 立即执行, 本质已调用了
  3. 多个立即执行函数要用 ; 隔开，不然报错
1
2
3
4
5
6
7
8
9
// 第一种写法
(function () {
    document.write(1)
})()
 
// 第二种写法
(function () {
    document.write(2)
}())
  1. 用户输入时间后 转换时间
1
2
3
4
5
6
7
8
9
10
11
12
let num1 = +prompt('请输入总秒数')
function fn(num1) {
    let h = parseInt(num1 / 60 / 60 % 24)
    let m = parseInt(num1 / 60 % 60)
    let s = parseInt(num1 % 60)
    h = h < 10 ? '0' + h : h
    m = m < 10 ? '0' + m : m
    s = s < 10 ? '0' + s : s
    return `您输入了${num1}秒,计算后的时间是${h}小时${m}分${s}秒`
}
let re = fn(num1)
document.write(re)

本节单词:

  1. function
  2. return
  3. arguments
  4. parseInt
  5. say、get、can、has、is、set、load