• 闭包、回调函数

    一.闭包

    1.作用域

    （1）全局作用域：在函数、类的外部声明的变量，具有全局作用域

    （2）局部作用域：函数内部声明的变量（包括函数的形参）

    （3）块级作用域：在语句块中声明的变量

    2.什么是闭包？

    闭包是在一个函数内部创建另一个函数。把内嵌的函数称为闭包，它可以访问外部函数的局部变量

            function fun(){

                    let k = 0

                    function test(){//test就是一个闭包

                            let k=k+14

                    }

            }

    3.闭包的使用场景

    （1）用来返回值:

    1.         function fun(){
    2.             let name = 'cc'
    3.             // 定义闭包
    4.             return function f1(){
    5.                 return name
    6.             }
    7.         }
    8.         let ft = fun()//因为fun函数的返回值是f1函数，ft实质是一个函数
    9.         let na = ft()//调用ft函数，实际调用的就是f1函数
    10.         console.log(na)
    1.         var n;
    2.         function out(){
    3.             var m = 999
    4.             n = function(){
    5.                 m++
    6.                 console.log(m)
    7.             }
    8.             return function(){
    9.                 console.log(m)
    10.             }
    11.         }
    12.         let getM = out()
    13.         getM()//999
    14.         n()//1000
    15.         getM()//1000

    （2）函数赋值：在函数内部定义函数表达式

    1.         var fn2 
    2.         function fn(){
    3.             let name = '西西'
    4.             fn2 = function (){//闭包，将外部函数的name变量作为闭包的返回值。f2是一个函数
    5.                 return name
    6.             }
    7.         }
    8.         fn()//必须先调用fn函数，否则f2就不是一个函数
    9.         console.log(fn2())

    （3）把闭包作为函数的参数

    1.         function fun(){
    2.             let name = '小绵羊'
    3.             // 定义闭包
    4.             return function callback(){
    5.                 return name
    6.             }
    7.         }
    8.         let f1 = fun()//将fun函数的返回值callback赋给f1
    9.         function f2(temp){
    10.             console.log(temp())//输出temp函数的返回值,实际调用了闭包callback
    11.         }
    12.         // 调用f2函数：将f1作为实参传递给temp
    13.         f2(f1)

    （4）在立即执行函数中使用闭包

    1.         // 立即执行函数
    2.         (function(){
    3.             let name = '小绵羊'
    4.             let f1 = function(){//f1是闭包
    5.                 return name
    6.             }
    7.             fn2(f1)//调用fn2函数，将闭包f1作为实参传递给fn2函数
    8.         })()
    9.         function fn2(temp){//temp是一个形参，接收实参f1
    10.             console.log(temp())//对temp的调用，实际调用的是闭包f1
    11.         }

    （5）在循环中使用闭包

    1.        for (let i = 1; i <= 10; i++) {
    2.             (
    3.                 function (j){
    4.                     setTimeout(function(){
    5.                         console.log(j)
    6.                     },j*1000)
    7.                 }
    8.             )(i)
    9.         }

    （6）将闭包封装到对象中(getter和setter)

    1.         function fun(){
    2.             let name = '西西'
    3.             setName = function(na){//setName是闭包：用来设置外部函数的变量值
    4.                 name = na
    5.             }
    6.             getName = function(){//getName是闭包：用来返回外部函数的变量值
    7.                 return name
    8.             }
    9.             // 外部fun函数的返回值:将闭包封装到对象中返回 
    10.             return {
    11.                 setUserName:setName,
    12.                 getUserName:getName
    13.             }
    14.         }
    15.         let obj = fun()//将fun函数的返回值（对象）赋给obj
    16.         console.log('用户名：',obj.getUserName())
    17.         obj.setUserName('懒羊羊')
    18.         console.log('用户名：',obj.getUserName())

    （7）通过闭包实现迭代

    1.         var arr = ['aa','bb','cc']
    2.         function fn(temp){//外部函数的返回值是闭包
    3.             let i = 0
    4.             // 定义闭包：迭代获取数组元素并返回
    5.             return function(){
    6.                 return temp[i++] || '数组已经遍历结束'
    7.             }
    8.         }
    9.         let f1 = fn(arr)
    10.         console.log(f1())//aa
    11.         console.log(f1())//bb
    12.         console.log(f1())//cc
    13.         console.log(f1())//数组已经遍历结束
    14.         console.log(f1())//数组已经遍历结束

    （8）首次区分（相同的函数，函数不会重复执行）

    1.         var fn = (function(){
    2.             var arr = []//用来缓存数组
    3.             return function(val){
    4.                 if (arr.indexOf(val)==-1) {//缓存中没有则表示需要执行
    5.                     arr.push(val)//将参数push到缓存数组中
    6.                     console.log('函数被执行了',arr)//这里写想要执行的函数
    7.                 }else{
    8.                     console.log('此次函数不执行')
    9.                 }
    10.                 console.log('函数调用完打印一下，方便查看已缓存的数组：',arr)
    11.             }
    12.         })()
    13.         fn(11)
    14.         fn(12)
    15.         fn(11)
    16.         fn(45)
    17.         fn(45)

    注意：（1）搞清楚谁是闭包函数

               （2）闭包的返回值、外部函数的返回值

    二.回调函数

    1.什么是回调函数？

    将函数B作为实参传递给函数A，那么把函数B称为回调函数，也成为高阶函数。表示某个定义完成后并不会立即执行，而是在完成某些操作之后再来调用该函数。     

    1.         function B(){}//定义B函数
    2.  
    3.         function A(args){}//定义A函数
    4.  
    5.         A(B)//调用A函数，将函数B作为实参传递给A函数，将B函数称为回调函数

    2.回调函数的使用

    （1）先定义回调函数，在主调函数中传递回调函数的函数名

    1.         function print(num){
    2.             console.log(num)
    3.         }
    4.         function add(n1,n2,callback){//三个参数，n1和n2是普通参数，参数callback对应的是函数
    5.             let s = n1+n2
    6.             callback(s)
    7.         }
    8.         add(12,23,print)//将print函数传递给形参callback。print函数就是回调函数

    （2）定义匿名回调函数

    1.         function add(n1,n2,callback){
    2.             let s= n1+n2
    3.             callback(s)
    4.         }
    5.         add(12,12,function(num){//调用add函数时，给它传递一个匿名的函数（该匿名函数就是回调函数）
    6.             console.log(num)
    7.         })

    3.回调函数的特点

    （1）不会立即执行：在主调函数中执行回调函数时必须带'()'，若有参数则需要传递参数

    （2）回调函数就是一个闭包：它可以访问主调函数中的变量

    （3）执行前的类型判断：在主调函数中执行回调函数之前，建议判断回调函数是否是函数

    1.         function print(num){
    2.             console.log(num)
    3.         }
    4.         function add(n1,n2,callback){
    5.             let s = n1+n2
    6.             if (typeof callback === 'function') {
    7.                 callback(s)
    8.             }else{
    9.                 console.log('第三个参数必须是函数')
    10.             }
    11.             
    12.         }
    13.         add(12,23,print)//35
    14.         add(12,23,34)//第三个参数必须是函数

    4.回到函数中this指向的问题

    1.         function createData(callback){//createData是主调函数，callback是回调函数
    2.             callback()
    3.         }
    4.         let obj = {
    5.             data:100,
    6.             tool:function(){
    7.                 createData(function(){
    8.                     console.log(this,1111)//this指向window对象
    9.                 })
    10.             }
    11.         }
    12.         obj.tool()//Window 1111

    （1）使用箭头函数

    1.         function createData(callback){//createData是主调函数，callback是回调函数
    2.             callback()
    3.         }
    4.         let obj = {
    5.             data:100,
    6.             tool:function(){
    7.                 createData(()=>{
    8.                     console.log(this,1111)//this指向obj对象
    9.                 })
    10.             }
    11.         }
    12.         obj.tool()//O{data: 100, tool: ƒ} 1111

    （2）在调用回调函数之前，定义一个变量将this保存起来

    1.         function createData(callback){//createData是主调函数，callback是回调函数
    2.             callback()
    3.         }
    4.         let obj = {
    5.             data:100,
    6.             tool:function(){
    7.                 let self = this//定义self将this保存起来
    8.                 createData(function(){
    9.                     console.log('回调函数：',self)//self指向obj对象
    10.                 })
    11.             }
    12.         }
    13.         obj.tool()//回调函数： {data: 100, tool: ƒ}

    5.JavaScript中使用回调函数的原因

    JavaScript是一个事件驱动型的语言。在程序的执行过程中不会因为某一次的响应没有完成而停止程序，而是继续监听后续的事件，如果后续的某个事件被触发，则程序继续执行

    1.         function first(){
    2.             console.log(1)
    3.         }
    4.         function second(){
    5.             console.log(2)
    6.         }
    7.         first()
    8.         second()
    9.         // 按顺序依次执行1、2
    1.         function first(){
    2.             //模拟异步代码延迟
    3.             setTimeout(function(){
    4.                 console.log(1)
    5.             },1000)
    6.         }
    7.         function second(){
    8.             console.log(2)
    9.         }
    10.         first()
    11.         second()
    12.         // 先打印2，1秒后打印1

    三.Node的包管理器

    1.npm:Node Package Manager,是Node.js的默认的包管理器。在开发node程序时，管理第三方的模块

    （1）常用指令：

    npm -v :查看版本号

    npm i -g npm to update :更新npm到最新版本。(参数i:install;参数g:global;)

    npm install -g npm@版本号 :更新npm到指定版本

    npm install 包名 -g :表示全局安装指定的包

    npm install 包名 :表示局部安装指定的包

    npm uninstall 包名 :卸载指定的包

    （2）设置淘宝镜像的方式：

    第一种：npm install -g cnpm --registry=https://registry.npm.taobao.org

    在项目中安装包（第三方功能模块）的方式有两种

    ●npm install 包名（模块名）--从国外的npm服务器上下载要安装的模块

    ●cnpm install 包名（模块名）--从淘宝镜像的服务器上下载要安装的模块

    第二种：npm set registry https://registry.npmmirror.com ---将npm的服务器地址重定向到淘宝镜像

    在项目中安装包（第三方功能模块）的方式只有一种

    ●npm install 包名（模块名）--从国外的npm服务器上下载要安装的模块

    npm config delete registry(恢复原地址) --- 将npm服务器地址恢复成默认地址

    npm config get registry --- 显示npm服务器的地址

    查看当前仓库配置npm config get registry

    2.yarn包管理器：快速、安全、可靠的依赖包管理工具

    （1）安装：npm install yarn -g

    （2）使用yarn安装包

    yarn add 包名

    （3）将服务器的地址重新定位到淘宝镜像

    yarn config set registry https://registry.npmmirror.com

    （4）使用yarn卸载安装的包

    yarn remove 包名

  • 相关阅读:
    网络直播是如何实现的——流媒体协议简介
    【云原生 | Kubernetes 系列】---altermanager消息配置和pushgateway
    从入门到精通：深入了解CSS中的Grid网格布局技巧和应用！
    【ARFoundation学习笔记】点云与参考点
    算法通关村第16关【白银】| 滑动窗口经典问题
    python--类与面向对象-3
    网工内推 | 应届、大专可投，IE认证优先，有年终奖、带薪年假
    C/C++数据结构——关键活动（拓扑排序、AOE网、前向星）
    Linux系统之部署h5ai目录列表程序
    Ubuntu-22.04安装MegaCLI并查看MegaRAID的配置
  • 原文地址：https://blog.csdn.net/weixin_44892365/article/details/127863925