javascript 闭包详解
时间:2022-05-08
本文章向大家介绍javascript 闭包详解,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、什么是匿名函数
创建一个函数并将它赋值给变量functionName,这种情况下创建的函数,即匿名函数。(函数表达式就是匿名函数)
二、闭包
1.什么是闭包?
闭包就是能够读取其他函数内部变量的函数。
只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。
我们只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!
function f1 () {
var num = 1;
function f2() {
console.log(num)
}
return f2;
}
var result = f1();
console.log(result()); //1
2、闭包的用途
闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
function f1 () {
var num = 1;
function f2() {
console.log(++num)
}
return f2;
}
var result = f1();
console.log(result()); //2
console.log(result()); //3
原因就在于f1是f2的父函数,而f2的作用域绑上了f1函数的活动对象和全局变量对象(全家对象只有在网页关闭时才会销毁),这导致f2始终在内存中,而f2的存在依赖于f1,因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制回收。
3.使用闭包的注意点
1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()()); //The Window 匿名函数的执行环境具有全局性,因此其this对象通常指向window。
4.闭包的应用场景
1.使用闭包代替全局变量
//全局变量,test1是全局变量
var test1=111;
function outer(){
console.log(test1);
}
outer(); //111
console.log(test1); //111
//闭包,test2是局部变量,这是闭包的目的
//我们经常在小范围使用全局变量,这个时候就可以使用闭包来代替。
(function(){
var test2=222;
function test(){
console.log("测试闭包:"+test2);
}
test(); //测试闭包:222
}
)();
console.log(test2); //未定义,这里就访问不到test2
再如:
(function(){
var now = new Date();
if(now.getMonth() == 0 && now.getDate() == 1){
console.log("Happy new year!")
}
})();
2.函数外或在其他函数中访问某一函数内部的参数
function test () {
var num = 1;
function other() {
console.log(++num)
}
return other;
}
var result = test();
console.log(result()); //2
console.log(result()); //3
3.利用闭包模仿块级作用域
(function(){
for(var i =0;i<5;i++){
console.log(i)
}
console.log(i); //5 //本身只是到4,但这个地方还是访问到了,所有输出了5
})();
console.log(i); //undefined //利用闭包后,便形成了块级作用域,让外面访问不到了。
- ActionScript3.0(AS3)中的泛型数组Vector
- 人民网评:“算法推荐”不能成为传播低俗信息的助推器
- 代码实现WordPress自动关键词keywords与描述description
- 基于Spring的简易SSO设计
- MS 的IOC容器(ObjectBuilder)?
- 自动驾驶五问
- 开放的即时通信协议Jabber
- AI技术五年内必将颠覆现有医疗领域?
- 初探ReactJS.NET 开发
- 详解使用hadoop2.6.0搭建5个节点的分布式集群(附代码)
- Net Framework 2.0 事务处理
- Mono 4.0 Mac上运行asp.net mvc 5.2.3
- 电脑、打印机不归,牵出“无人车第一案”
- VS 2005 文本编码小技巧
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一日一技:FastAPI如何关闭接口文档?
- 什么叫做类比,为什么有些 Python 入门教程结构不合理?
- 贼好用的 Java 工具类库,墙裂推荐!
- 万字长文,Thread 类源码解析!
- lintCode 31 题解
- JDK1.8HashMap源码学习-put操作以及扩容(二)
- Python 中的数字到底是什么?
- 详解 Python 的二元算术运算,为什么说减法只是语法糖?
- 详解增强算术赋值:“-=”操作是怎么实现的?
- Hyperledger Explorer 环境搭建详解
- [译]在Solidity中创建无限制列表
- java安全编码指南之:声明和初始化
- java安全编码指南之:表达式规则
- java安全编码指南之:Number操作
- 如何提高代码质量