4.16-day3-JS进阶">4.16-day3-JS进阶

4.16-day3-JS进阶

作用域

全局作用域

目标：知道什么是全局作用域,及全局作用域的特点

全局作用域: 在javaScript中,函数外部的所有作用范围都称为全局作用域
全局变量: 在全局作用域中定义的变量,叫全局变量
全局变量特点: 在全局作用域中的全局变量可以在任何地方被访问到
```javascript //变量a是一个全局变量 let a = 123; //函数fn是一个全局变量 function fn() {} //数组ary是一个全局变量 let ary = []

//全局作用域：在全局作用域下声明的变量 //特点：全局变量在任何地方(script标签内部，函数内部) 都可以进行获取赋值； // 全局变量；全局函数 // demo1 let a = 10 //全局变量 function fn() { a = 20 } fn() console.log(a); //10？20==20


###局部作用域(函数作用域)
> 目标： 知道什么是局部作用域及局部作用域的特点
1. 局部作用域: 在函数内部形成的作用范围称为局部作用域或者函数作用域
2. 局部变量: 在局部作用域中定义的变量称为局部变量
3. 局部变量特点: 局部变量只能在当前作用域中被访问
4. 局部作用域和全局作用域之间的关系
```javascript
//练习1：
let a = 10;
        function fn() {
            let a = 20
            console.log(a);   //打印局部
        }
        fn()   //打印a，局部a！有限使用作用域声明变量：20
 console.log(a);  //当前作用下a:10-----打印全局
//练习2：
let a = 10
        function fn(a) {
            a = 20
        }
        fn()  //打印局部的20
console.log(a);  //打印全局的a:10
//练习3：
 let a = 10
        function fn(a) {
            a = 20
        }
fn(a) //函数:形参和实参 ; 实参a:10   形参a,没有任何关系
//     唯一的关系,形参局部 a=实参全局a;赋值,赋值!
 console.log(a);   //全局a:10
//综合练习4：
        let a = 10
        function fn() {
            a = 20;
            console.log(a);
        }
        fn(a)   //20   //赋值   负值
        console.log(a);   //20
//局部变量    :1.函数内部
 //           2.形参  或 let

`块级作用域`

目标：知道什么是块级作用域

块级作用域: 在javaScript中,通过let关键字定义变量且位于{}中,就会形成块级作用域
块级作用域特点: 变量只能在当前块级作用域中被访问
```javascript // 块级 :{ } for(){} // let 声明变量
```
if (true) {
    let a = 10
}
console.log(a);
```

for (let i = 0; i < 10; i++) { console.log(i); }

console.log(‘循环外部:’ + i);

// js组成部分 // 语法: ES5(var, 没有块级作用域) ES6(let模板字符串） for (var i = 0; i < 10; i++) { console.log(i); } console.log(i); // 10


<a name="38e69ba9"></a>
#### 案例-块级作用域
```html
<input type="button" value="a">
<input type="button" value="b">
<input type="button" value="c">
//1.获取DOM节点
        let btn = document.querySelectorAll("input") //伪数组
        //2.添加事件监听
        for (let i = 0; i < btn.length; i++) {
            //形成四个单独块级作用域
            // console.log(i);
            btn[i].addEventListener("click", function () {
                console.log(i);
            })
        }
        //不能形成块级作用域
        // for (var i = 0; i < btn.length; i++) {
        //     // 没有块级作用域概念,循环四次,i:4
        //     btn[i].addEventListener("click", function () {
        //         console.log(i);
        //     })
        // }

作用域链

目标：知道什么是作用域链及作用域链作用

作用域链: 在javaScript中,多个作用域嵌套形成的一个链状结构 anli
作用域链作用: 通过作用域链进行变量查找

`闭包`

目标：知道什么是闭包函数及闭包的作用是什么

//函数:
//声明:function fn(){}
//      函数表达式
//应用:自调用函数,多个功能,主动写子调用函数,防止变量污染
   (function () {
     let a=10
 })()
//***************************************************************************
//应用2:递归函数,函数内部再一次调用一次自己
 function fn() {
             console.log(1);
             fn()
         }
 fn()   //死循环 */

闭包: 闭包就是能够读取其他函数内部变量的函数
闭包本质: 闭包就是一个函数,但是不是所有的函数都是闭包
闭包作用: 可以延长变量的使用生命周期,避免变量污染
闭包总结:
1. 闭包本质上就是一个函数
2. 闭包函数就是在一个函数中访问另外一个函数中的变量
3. 闭包函数的作用延长了变量的使用生命周期

//闭包:
    //1.基本形式  函数内部A  还有其他函数B
    //2.函数B内部  使用  函数A的局部变量
//特点:
    //常规:函数内部的局部变量,如果执行完函数,发现没有其他地方用到这个变量,会被销毁!
     //闭包:函数B内部 要用到 函数局部变量A的话  此时局部变量A不会被消耗
     //     页面中出现多个闭包,内存很多空间,存储一个不能被消耗变量值
-----------------------------------------------------------------------------------
 //课堂练习：
<button id="right">正确任务</button>
<button id="wrong">错误任务</button>
 //闭包
        (function () {
            var numb = 10
            var right = document.querySelector("#right")
            right.addEventListener("click", function () {
                numb += 10
                console.log(numb);   //20
            })
            var wrong = document.querySelector("#wrong")
            wrong.addEventListener("click", function () {
                numb -= 5;
                console.log(numb);  //15
            })
        })();
//ES6  块级作用域:
if (true) {
        let num = 10
        let right = document.querySelector("#right")
        right.addEventListener("click", function () {
            num += 10
            console.log(num);  //20
        })
        let wrong = document.querySelector("#wrong")
        wrong.addEventListener("click", function () {
            num -= 5;
            console.log(num);   //15
        })
  }

const关键字

目标：能够知道什么是const关键字及作用

const关键字: 在程序中定义常量的关键字
const关键字注意事项：
1. const定义常量时候必须设置初始值
2. const定义常量后,常量的值不能被修改
3. const定义常量名不能重复
4. const可以产生块级作用域

 //const关键词
        //1.常量,初始化必须有赋值
        // const a = 10
        //2.固定的值,不能被修改
        // a = 20
        // console.log(a);
        //3.和let一样,不能重名,var
        //4.形成块级作用域
        if (true) {
            const a = 20
        }
        console.log(a);

变量,函数提升

目标： 能够理解什么是变量提升和函数提升

变量提升: 使用var关键字定义变量的时候,程序会先将变量的声明提升到当前作用域的开始,不包括赋值
函数提升: 定义函数的时候,程序会将函数的声明提升到当前作用域的开始位置,不包括函数的调用
let不存在变量提升

//变量和函数提升;
//ES6 let 使用:先声明,在使用!
        // let a=10
        // console.log(a);
//ES5  var声明:提升,为了解释看到不合理
//     var声明变量,代码执行之前,豫解析(会提升到当前作用域最顶端)
        console.log(a);
        var a = 10  //undefined
//***********小案例*******************    
var a = 10  //undefined
        function fn() {
            console.log(a);
            var a = 20;
            console.log(a);
        }
        fn()  //20
        console.log(a);  //10
//***********解析后*******************    
  var a;
// ------------------------------
        a = 10; //undefined
        function fn() {
            console.log(a);
            var a = 20
            console.log(a);
        }
        fn()  //20
        console.log(a);   //10
    </script>

函数

函数参数默认值

目标：知道函数中的参数可以设置默认值

函数中的形参可以设置默认值,函数中的形参本质就是一个变量,可以直接默认赋值
函数中的形参如果设置了默认值,在没有设置实参的情况下,就是默认值,否则就是实参的值

<script>
function fn(a,b) {
console.log(a, b);
}
fn()
function fn2(a = 1, b = 2) {
console.log(a, b);
}
fn2()
</script>

函数中arguments

目标：知道 arguments的作用

arguments是函数中用来保存实参信息的一个数组
当函数中实参个数不确定的时候,可以通过arguments获取实参信息

//需求:封装一个函数,求两个数的和
function getSum(a, b) {
    //1.形参?调用的时候是否传入实参!
    //2.返回值?调用的时候,是否需要得到结果
     return a + b
 }
console.log(getSum(10, 20));
-------------------------------------------------------------------------------
 // 需求: 封装一个函数, 求多个数字的和
        function getSum() {
            //接受一个不确定个数这些参数
            //1.函数内部内置变量,接受不确定个数实参
            //2.不需要声明,不需要写形参位置;
            // console.log(arguments);  //伪数组,可以按照for使用
            let sum = 0
            for (let i = 0; i < arguments.length; i++) {
                sum += arguments[i]
            }
            return sum;
        }
   let res = getSum(10, 20.55, 66, 77, 88)
console.log(res);

函数中剩余参数

目标：知道函数剩余参数的用法

语法: …自定义参数名
作用: 用来获取多余的实参值 (类似于arguments)
注意事项:
1. 剩余参数必须写到函数形参的最后
2. 剩余参数的名字是自定义的
3. 剩余参数保存的值是以数组形式保存的

 //ES6:函数剩余参数
    function fn(...arr) {
  //得到数组,...代表来都多少数据我全收了,给后面变量arr
       console.log(arr);
 }
fn(10, 55, 66, 89, 45)
****************************************
//求最大值,最小值
        let arr = [10, 20, 30, 99]
        //求最大值,逗号隔开
        let max = Math.max(...arr)
        let min = Math.min(...arr)
        console.log(`最大值:${max}`);   //99
        console.log(`最小值:${min}`);  //10
//区别：就是看...位置

箭头函数

目标：知道箭头函数的写法及注意事项

箭头函数语法1: () => {} 等价于 function() {}
函数的组成
1. 函数名 () =>{}
2. 参数
3. 函数体
4. 返回值

箭头函数注意事项:
1. 如果只有且只有一个参数,可以省略()
2. 如果函数体只有一行代码,可以省略{}
3. 如果函数只有一行代码,返回值return 可以省略

//箭头函数:ES6对函数简单写法!
        // let fn = () => { }
        //只有一个形参:可以省略()
        let fn = a => {
            console.log(a);
            let sum = a + a
            console.log(sum);
        }
        fn(10);
        //函数题:只有一句代码,可以省略{ }
        let fn = a => console.log(a); fn(100)   //100
        //如何函数体内部需要返回值,而且只是一句代码:return  也可以省略
        let fn2 = b => b * b
        console.log(fn2(20));   //400

Web 前端资料

4.15-day1-JS进阶