JavaScript中的闭包以及回调函数

1、闭包1

闭包

什么是闭包

闭包就是能够读取其他函数内部变量的函数，在本质上是函数内部和函数外部链接的桥梁

案例：

function alipay() {
			 var money=1000
			 function  tool () {
			 	money-=20
			 }
			return  tool
		}
var re=alipay()
re()
//外部是无法访问函数alipay内部的，但是我们可以在运行函数alipay后返回
//一个alipay内部的函数，这个内部函数就可以访问alipay内部，所以re就可以
//间接的访问到alipay内部

2、闭包2

利用了函数每次调用时生成的独立调用栈
利用函数的形参保存临时变量的值

		var arr = []
		for (var i = 0; i < 5; i++) {
			function fn() {
				console.log(i)
			}
			arr[i] = fn
		}
		arr[2]() //5


		function tool(index) {
			arr[index] = function fn() {
				console.log(index)
			}
		}
		var arr = []
		for (var i = 0; i < 5; i++) {
			tool(i)
		}
		arr[4]() //4
		

		var arr = []
		for (var i = 0; i < 5; i++) {
			(function (index) {
				arr[index] = function fn() {
					console.log(index)
				}
			})(i)
		}
		arr[4]() //4

3、闭包的优缺点以及解决方法

3.1优点

1.函数内部的变量 想要被外部程序使用 但是语法决定了外部不能使用,可以利用闭包解决
2.一些临时数据 比如for循环的i的值 希望延时业务中使用 可以使用闭包把临时数据保存到局部作用域中
3.防止变量污染 可以用闭包把一些业务变量放在局部作用域中

3.2缺点

虽然闭包好用 可以解决很多问题 但是它玩不好的话就会有一些致命的问题:内存泄漏
内存管理机制:垃圾回收机制,引用计数 底层浏览器的代码实现的功能
系统会定期查看我们的js执行情况,观察创建的对象有没有可能会被使用,如果没有可能 就释放内存,每一个对象都有"人"引用它 如果引用的"人"数为0就释放内存
内存泄漏:浏览器运行网页 就会执行js代码,引用数据会在内存中占用内存空间
如果有一个对象创建了 而且占用了内存 缺没有什么业务使用(想用都用不了) 这种情况就是内存泄漏

// 代码演示:
		// var obj={}//引用计数为1
		// var arr=[]
		// arr[0]=obj//引用计数为2

		// function fn (a) {
		// 	//var a=obj//引用计数为3
		// 	var b=a//引用计数为4
		// }
		// fn(obj)

		//闭包会导致内存泄漏
		 function  fn () {
	 	var obj={age:20}
		 	console.log(123)
		 	console.log(123)
		 }
		 fn()//调用时 内存中有一个对象var obj={age:20}
		//调用完毕fn函数,内部的变量没有谁再能访问,对象obj释放,因此没有
		//导致内存泄漏

		 function  fn () {
		 	var obj={age:20}
		 	function  tool () {
		 		return obj.age
		 	}
		 	return tool
		 }
		  var re=fn()
		 console.log(re())

		// var re=fn()//fn()调用完毕  内部的obj对象没有释放
		// console.log(re())

3.3解决方法

①尽量避开 不要使用闭包
②在可能存在泄漏的地方把标识符引用为null

	 function fn() {
			var obj = {
			age: 20
		 	}
		 	function tool() {
		 		return obj.age
		 	}
			return tool
		}
		 var re = fn()
		 re=null;

4、回调函数

4.1直接将匿名函数作为参数传递给execute方法

	function  jquery (url,callback) {
			var res=url+"假装我执行了5秒钟产生的新数据"
			callback(res)
		}			
		callback函数就是传入的业务函数
		jquery("http://www.hqyj.com",function(data){
			console.log(data)
		})

4.2将fn方法作为参数传递给fm方法

function fn (value) {
    console.log(1111)
}
function fm (someFunction, value) {
    console.log(2222)
}
fm(fn, 'hi js.');

5、回调函数案例

	function axios(selector, url, callback) {
			console.log(this, 222)
			var res = {
				tag: selector,
				data: url
			}
			callback("200", res)
		}
		var obj = {
			el: "#app",
			mounted: function () {
				// this
				var self = this
				axios("box1", "http://www.baidu.com", function (arg1, arg2) {
					console.log(arg1, arg2, this, 111, self)
					// obj
				})
			}
		}
		obj.mounted()

结果：