JS闭包的基础知识,闭包的本质,闭包的作用,闭包的间谍属性和闭包的遗憾

JS闭包总结来源和扩展知识来自于:

1.简书:彻底搞懂JS闭包各种坑2.百度百科  闭包

闭包不是JS独有的特性。但本文以JS闭包来了解闭包的。

1.闭包的本质:是一个函数。

2.闭包的作用:间谍作用,延长变量生命周期。

3.闭包的构成模型:A函数,内部有一个间谍B函数,B函数能访问A函数的私有变量,并返回给A函数外部一些数据。这里的B函数,就叫做闭包。

4应用场景

  
  1、保护函数内的变量安全。以最开始的例子为例,函数a中i只有函数b才能访问,而无法通过其他途径访问到,因此保护了i的安全性。
  2、在内存中维持一个变量。依然如前例,由于闭包,函数a中i的一直存在于内存中,因此每次执行c(),都会给i自加1。
以上两点是闭包最基本的应用场景,很多经典案例都源于此。

5.回收机制

  参数和变量不会被垃圾回收机制回收
  在Javascript中,如果一个对象不再被引用(注意这里写的不是调用,调用和引用是两回事。调用是运行,引用是引用地址),那么这个对象就会被GC回收。如果两个对象互相引用,而不再被第3者所引用,那么这两个互相引用的对象也会被回收。因为函数a被b引用,b又被a外的c引用,这就是为什么函数a执行后不会被回收的原因。

function a(){
	var x=1
	return function b(){
	var y=1
	console.log(x++) //间谍闭包,拉拢了外部的变量x,使用后++,返回原值再增加
	console.log(y++) //间谍闭包,使用了内部了变量y,使用后++,返回原值再增加
	}
}

//console.log(x), 这时候会报错,外部无法直接访问x。使用闭包,就可以间接的访问x了。
//a(),直接运行a,会返回,return之后的,闭包函数代码   function b(){....}
//b(),直接使用闭包,也会报错,因为无法直接使用闭包,必须使用a才能访问b
//所以,b是一个技术很水的间谍,无法跟外部直接沟通。所以b叫做外交部长,更合适点吧。

var c=a() //创建一个全部变量C,来引用b,只有通过运行a()才能调用b函数。
//可以使用a()().这里为了方便使用c代替a()

c() //这里执行了闭包函数b,结果为1 1,这里a中的x被修改成了2。

setTimeout(c(),5000)
// 延迟5秒,再执行一次,看看如何,发现x依然在内存中,y不在内存中,结果 2 1

c() //这里再次执行了闭包函数。也就是return后面的函数。执行结果3 1   

//a和b一直存在内存中的原因:C是全局变量,生命周期很长。C引用a()的地址,所以a()执行一次,计算结果是b所以b也一直在内存中。

//x在内存,y不在内存的原因:间谍函数b的小算盘:x在b的外部,不牵制住,就会丢掉。y在b的内部,可以随时创建

  

  

6.使用注意点
(1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。
(2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

暂时先总结到这里吧。还有一些,也会在本文继续修改更新

原文地址:https://www.cnblogs.com/cn-oldboy/p/12350627.html

时间: 2024-10-08 10:04:13

JS闭包的基础知识,闭包的本质,闭包的作用,闭包的间谍属性和闭包的遗憾的相关文章

JavaScript(JS)语言的基础知识

JavaScript(JS)它是一门强大的语言,但是JavaScript(JS)不能去单独操作数据库.我们要知道它的输出语法有3中,本别是alert(""),confirm("")和prompt("").变量,var a=1000;var b=10.5;var c=d:这个写法是错误的,因为这样写"d"是未定义,计算机把它当做了变量,然后在执行中发现"d"未定义,所以报了错误,正确写法要把"d&q

vue.js基础知识篇(1):简介、数据绑定、指令、计算属性、表单控件绑定和过滤器

目录第一章:vue.js是什么? 代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章:vue.js是什么? 1.vue.js是MVVM框架 MVVM的代表框架是Angular.js,以及vue.js. MVVM的view和model是分离的,View的变化会自动更新到ViewModel上,ViewModel的变化会自动同步到View上显示.这种自动同步依赖于ViewModel的属性实现了Observer. 2.它与angular.js的区别 相同

js最基础知识回顾3(字符串拼接,数据类型,变量类型,变量作用域和闭包,运算符,流程控制,)

一.javaScript组成     1.ECMAScript:解释器.翻译 ---------------------------------------------------------几乎没有兼容性问题     2.DOM:Document Object Model --------操作HTML的能力----document--------有一些兼容性问题     3.BOM:Browser Object Model -------------浏览器---------------wind

JS原型函数相关基础知识

函数对象和普通对象 //普通对象 var oo1 = {}, oo2 = new Object(), oo3 = []; console.log(typeof oo1 + ',' + typeof oo2 + ',' + typeof oo3); //object,object,object //函数对象 function ff1() {} var ff2 = function () {} var ff3 = new Function(); console.log(typeof ff1 + ',

小胖说事37-----iOS基础知识之UIScrollview的代理和Build Active Architecture Only属性

总述:今天对UIScrollview的代理记忆有点模糊,所以查了一下文档,并记录下来:还有就是对于Xcode编译打包时候的Build Active Architecture Only属性的理解也记录下来,毕竟,好记性不如烂笔头,O(∩_∩)O哈哈哈~ 1.scrollview的代理: //只要滚动了就会触发 - (void)scrollViewDidScroll:(UIScrollView *)scrollView; { // NSLog(@" scrollViewDidScroll"

HTML+CSS+JS基础知识

目录 对HTML+CSS+JS的理解 基础知识 对HTML+CSS+JS的理解 基础知识 插入样式表的三种方式 外部样式表:<link rel="stylesheet" type="text/css" href="mystyle.css"> 内部样式表:<style type="text/css"> body {background-color: red} p {margin-left: 20px} &

转载 前端基础知识体系 一个新手的学习之路

原帖地址:  转载的原因是我学习前端和php已经4个多月了.看看自己还有那些不足.自己得努力学习,牛人太多.红色是我会的,或者学过的.希望今天把大部分飘红. 一.HTML 标签的分类 标签表示一个元素 按性质划分: Block-Level和Inline-Level 按语义划分: Headings: h1, h2, h3, h4, h5, h6 Paragraphs: p Text Formatting: em, strong, sub, del, ins, small Lists: ul, li

JSP SERVLET 基础知识

jsp(java server page)和servlet是JAVA EE规范的两个基本成员,是JAVA WEB开发的重点也是基础知识.JSP本质上也需要编译成SERVLET运行. JSP比较简单,可以理解为在HTML页面中嵌入JAVA代码,或使用各种JSP标签,再辅以各种JAVA BEAN. <!-- JSP声明 --> <%! public String info(){return "Hello jsp";} %> <div> <!-- J

js 作用域,闭包及其相关知识的总结

面试必问题,闭包是啥有啥子用,觉得自己之前回答的并不好,所以这次复习红皮书的时候总结一下. 提到闭包,相关的知识点比较多,所以先罗列一下要讲的内容. 1. 作用域链,活动对象 2. 关于this对象 3. 垃圾回收机制,内存泄漏 4. 模仿块级作用域,私有变量 涉及的内容这么多,也难怪面试官喜欢问这个问题啊,就像niko大神说的,应该是根据回答的深浅了解你的思维模式吧.废话不多说,开始步入正题. 1. 作用域链,活动对象 活动对象:活动对象就是在函数第一次调用时,创建一个对象,在函数运行期是可变