闭包和回调函数
admin
2024-01-22 05:58:19
0

一、闭包

        1、作用域

                (1)全局作用域:在函数、类的外部声明的变量。具有全局作用域

                (2)局部作用域:函数内部声明的变量(包括函数的形参)

                (3)块级作用域:在语句块中声明的变量

        2、什么是闭包?

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

function fun(){let k = 0;function test(){  //test函数就是一个闭包let t = k+14}
}

        3、闭包的使用场景

                (1)用来返回值:

function fun(){let name='baga'//定义闭包return function f1(){return name}
}let ft=fun()  //因为fun函数的返回值是f1函数,ft实质是一个函数let na=ft()  //调用ft函数,实际调用的就是f1函数console.log(na);
var nAdd;
function out() {var n = 999nAdd = function () {n++console.log(n);}return function () {console.log(n);}
}
let getN = out()
getN()  //999
nAdd()  //1000
getN()  //1000

                (2)函数赋值:在函数的内部定义函数表达式

var f2
function fn() {let name = '熏悟空'f2 = function () {  //闭包,将外部函数的name变量作为闭包的返回值。f2是一个函数return name}
}
fn()  //必须先调用fn函数,否则f2就不是一个函数
console.log(f2());

                (3)把闭包作为函数的参数

function fn() {let name = '猪八盖'//定义闭包return function callback() {return name}
}
let f1 = fn()  //将fn函数的返回值callback赋给f1
function f2(temp) {console.log(temp());  //输出temp函数的返回值。实际调用l闭包callback函数
}
//调用f2函数:将f1最为实参传递给temp
f2(f1)

                (4)在立即执行函数中使用闭包

//立即执行函数
(function () {let name = '沙和尚'let f1 = function () {  //f1是闭包return name}fn2(f1)  //调用fn2函数,将闭包f1作为实参传递给fn2函数
})()
function fn2(temp) {  //temp是一个形参,接受实参f1console.log(temp());  //对temp的调用,实际调用的是闭包f1
}

                (5)在循环中使用闭包

(function fn() {for (let i = 1; i <= 10; i++) {(function (j) {setTimeout(function () {console.log(j);}, j * 1000)})(i)}
})()

                (6)将闭包封装到对象中

function fun() {let name = '唐僧'setName = function (na) {  //setName是闭包:用来设置外部函数的变量name = na}getName = function () {  //getName是闭包:用来返回外部函数的变量return name}//外部fun函数的返回值:将闭包封装到对象返回中return {setUserName: setName,getUserName: getName}
}
let obj = fun()  //将fun函数的返回值(对象)赋给obj
console.log('用户名:', obj.getUserName());
obj.setUserName('白骨精')
console.log('用户名:', obj.getUserName());

                (7)通过闭包实现迭代

var arr = ['aa', 'bb', 'cc']
function fn(temp) {  //外部函数的返回值是闭包let i = 0//定义闭包:迭代获取数组元素并返回return function () {return temp[i++] || '数组已经遍历结束'}
}
let f1 = fn(arr)
console.log(f1());
console.log(f1());
console.log(f1());
console.log(f1());

        注意:

                (1)搞清楚谁是闭包函数

                (2)闭包的返回值、外部函数的返回值

二、回调函数

        1、什么是回调函数?

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

function B(){}  //定义B函数
function A(args){}  //定义A函数
A(B)  //调用A函数,将函数B作为实参传递给A函数。将B函数称为回调函数

        2、回调函数的使用

                (1)先定义回调函数,在主调函数中传递回调函数的函数名

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

                (2)定义匿名回调函数

function add(n1, n2, callback) {let s = n1 + n2callback(s)
}
add(12, 23, function (num) {  //调用add函数时,给它传递一个匿名的函数(该函数就是回调函数)console.log(num);
})

        3、回调函数的特点

                (1)不会立即执行:在主调函数中执行中回调函数时必须带"()",若有参数则需要传递参数

                (2)回调函数是一个闭包:它可以访问主调函数中的变量

                (3)执行前的类型判断:在主调函数中执行回调函数之前,建议判断回调函数是否是函数

function print(num) {console.log(num);
}
function add(n1, n2, callback) {  //三个参数,n1和n2是普通参数,参数callback对应的是函数let s = n1 + n1;if (typeof callback === 'function') {callback(s)} else {console.log('第三个参数必须是函数');}
}
//add(12, 23, print);  //将print函数传递给形参callback。print函数就是回调函数
add(12, 23, 34)

                (4)回调函数中this指向的问题

function creatDate(callback){  //createDate是主调函数,callback是回调函数callback();
}
let obj={date:100,tool:function(){creatDate(function(){console.log(this,1111);  //this指向window对象,为什么this指向window对象?})}
}
obj.tool();  //window  1111

                (1)使用箭头函数

function creatDate(callback){  //createDate是主调函数,callback是回调函数callback();
}
let obj={date:100,tool:function(){creatDate(()=>{console.log(this,1111);  //this指向obj对象})}
}
obj.tool();  // { date: 100, tool: [Function: tool] } 1111

                (2)在回调函数之前,定义一个变量将this保存起来

function creatDate(callback){  //createDate是主调函数,callback是回调函数callback();
}
let obj={date:100,tool:function(){let self=this  //定义self将this保存起来creatDate(function(){console.log('回调函数',self);  //sekf指向obj对象})}
}
obj.tool();  // {date: 100, tool: ƒ}

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

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

三、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.npmmirror.com(npm创建淘宝镜像)

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

                                a、npm install 包名(模块名) --- 从国外的npm服务器上下载需要安装的模块

                                b、cnpm install 包名(模块名) --- 从淘宝镜像的服务器上下载需要安装的模块

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

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

                                npm install包名(模块名)

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

                                npm config get registry(查看当前仓库配置)--- 显示npm服务器的地址

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

                (1)安装:npm install yarn -g

                (2)查看版本号:yarn -v

                (3)使用yarn安装包:yarn add 包名(nodemon)

                (4)将服务器的地址重新定位到淘宝镜像

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

                (5)使用yarn卸载安装的包

                                yarn remove nondemon

相关内容

热门资讯

山东多城市消费上新,品质生活触... 海报新闻记者 李金珊 实习生 宋亚轩 孙晔 报道 上午十点,临沂兰山区的李女士送完孩子回家,指尖轻点...
“20cm”六连板,大牛股明日... 1月15日晚,志特新材(300986)、*ST铖昌(001270)两只停牌核查股同日宣布,即将复牌。...
原创 特... 特朗普政府试图将委内瑞拉的石油资源纳入美国巨头的囊中,但事与愿违。这场旨在促成巨额投资的白宫会议,最...
原创 谢... 谢尔盖·布林:科技巨擘的崛起与慈善之路 2026年1月12日,一个值得铭记的日子。这一天,在Alph...
马士基宣布恢复红海航线 航运业... 财联社1月16日讯(编辑 牛占林)丹麦航运巨头马士基(Maersk)当地时间周四表示,在该地区安全形...
贵金属价格上涨能否持续 回顾2025年大类资产表现,以黄金、白银、铂族金属为代表的贵金属板块价格一路狂飙,令全球投资者印象深...
手握金条无处安放?银行保管箱“... 本报(chinatimes.net.cn)记者付乐 见习记者 林佳茹 北京报道 “现在网点暂时没有空...
雷军直播再谈“反小字营销”!新... 1月15日晚,小米创办人、董事长兼CEO雷军在直播中再度聚焦“小字营销”问题,明确表达小米反对该行业...
重庆今年首只新股至信股份上市 ... 1月15日,重庆至信实业股份有限公司(以下简称“至信股份”)在上海证券交易所主板敲锣上市,成为今年A...
创历史新高!2025年我国外汇... 国家外汇管理局1月15日发布数据显示,2025年,我国外汇市场交易量达42.6万亿美元,企业外汇套期...
跨境电商运营:2026全球瑜伽... 今天分享的是:跨境电商运营:2026全球瑜伽服市场洞察报告 报告共计:41页 《2026全球瑜伽服市...
中文在线涨势“刹车”,上市以来... 来源:市场资讯 来源:国际金融报 1月15日,连续多日因“狂飙”行情被称为新“易中天”之一的中文在线...
原创 1... 写在文章前的声明:在本文之前的说明:本文中所列的投资信息,只是一个对基金资产净值进行排行的客观描述,...
湾财晚报| 商业用房首付比例降... 编辑 | 子衿 商业用房首付比例降至30% 今日,商办地产市场迎来重磅利好。 中国人民银行新闻发言人...
全年26亿!这些银行“喜提”罚... 过去一年,监管“长牙带刺、有棱有角”的态度一以贯之,驱动银行从根源上提升合规能力,强化内控管理。 企...
业绩拐点已现?金沃股份预计去年... 公司于今日晚间发布公告,2025年,公司在手订单情况良好,预计实现营业收入12.4-12.5亿元,同...
监管批复!郑荣波就任东亚银行珠... 2026年1月15日,根据国家金融监督管理总局消息,《关于核准郑荣波东亚银行(中国)有限公司珠海分行...
格力电器,近56亿元“大红包”... 1月15日晚,格力电器披露2025年中期权益分派实施公告。 根据方案,格力电器拟以公司现有总股本剔...
新技术助力提高IVF成功率,女... 打破生育瓶颈:新技术或助提高IVF成功率 想象一下,经历了数次试管婴儿(IVF)治疗的女性,心中满是...
卖“未来”换喘息:一品红主业失... 一品红(300723.SZ)再次向市场递交了一份亏损的成绩单。 1月14日发布的业绩预告显示,一品红...