闭包
闭包就是能够读取其他函数内部变量的函数,在本质上是函数内部和函数外部链接的桥梁
function alipay() {
var money=1000
function tool () {
money-=20
}
return tool
}
var re=alipay()
re()
//外部是无法访问函数alipay内部的,但是我们可以在运行函数alipay后返回
//一个alipay内部的函数,这个内部函数就可以访问alipay内部,所以re就可以
//间接的访问到alipay内部
利用了函数每次调用时生成的独立调用栈
利用函数的形参保存临时变量的值
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
1.函数内部的变量 想要被外部程序使用 但是语法决定了外部不能使用,可以利用闭包解决
2.一些临时数据 比如for循环的i的值 希望延时业务中使用 可以使用闭包把临时数据保存到局部作用域中
3.防止变量污染 可以用闭包把一些业务变量放在局部作用域中
虽然闭包好用 可以解决很多问题 但是它玩不好的话就会有一些致命的问题:内存泄漏
内存管理机制:垃圾回收机制,引用计数 底层浏览器的代码实现的功能
系统会定期查看我们的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())
①尽量避开 不要使用闭包
②在可能存在泄漏的地方把标识符引用为null
function fn() {
var obj = {
age: 20
}
function tool() {
return obj.age
}
return tool
}
var re = fn()
re=null;
function jquery (url,callback) {
var res=url+"假装我执行了5秒钟产生的新数据"
callback(res)
}
callback函数就是传入的业务函数
jquery("http://www.hqyj.com",function(data){
console.log(data)
})
function fn (value) {
console.log(1111)
}
function fm (someFunction, value) {
console.log(2222)
}
fm(fn, 'hi js.');
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()