乐趣区

关于javascript:你离高质量代码封装只差一个闭包快来get吧

jiezi

海阔凭鱼跃，天高任鸟飞。Hey 你好！我是猫力 Molly

闭包曾经是一个陈词滥调的问题了，不同的人对闭包有不同的了解。明天我来浅谈一下闭包，大家一起来就“闭包”这个话题，展开讨论，心愿能擦出一些不一样的火花。

了解闭包之前，咱们得先理解“上下文 ”和“ 作用域”两个知识点

上下文

浏览器引擎在解析 js 代码的时候，大抵会通过两个阶段。解析阶段 和执行阶段

解析阶段 ：一段代码说白了只是一段有规定的代码文本而已，所以js 引擎会拿到代码时会当时解析代码，初始化过程中会将变量，参数，函数，表达式，运算符等等提取并存起来，并且将变量默认赋值为 undefined，函数默认为函数块， 确定上下文关系 等一系列筹备工作

执行阶段：由上往下逐行执行代码，遇到对应的变量或函数，则去仓库外面匹配执行

console.log(str);
console.log(fun);
var str = "molly";
let str1;
console.log(str1);
function fun(a, b) {return a + b;}

定义： 上下文可分为 全局上下文 和部分上下文 ，上下文决定了变量或函数他们能够拜访哪些数据，以及他们的行为（在初始化阶段就曾经确定好），每一个上下文都有一个 变量对象（环境记录），这个上下文中定义的所有变量和函数都会 存储在这个变量对象当中，咱们无奈间接通过代码拜访到这个变量对象，然而咱们能够通过打断点的形式查看到。

全局上下文会在程序退出前（例如敞开网页或退出浏览器）被销毁，部分上下文会在其代码执行结束后被销毁

那么这个 变量对象 长啥样呢？不焦急，咱们接着往下看

上下文执行栈

定义： 每个函数调用都有本人的上下文，当函数执行时，函数的上下文会被推入到一个上下文执行栈上，在函数执行结束后，上下文执行栈会弹出该函数的上下文，将控制权返还给之前的执行上下文。

// 一个简略的例子，断点调试调用栈和上下文变量对象
let a_name = "猫力";
var a_sex = "男";
var a = "111";
function a_molly(age) {
    let a_like = "爱学习";
    var a_like2 = "爱静止";
    a_say(a_like);
    var a = "222";
    console.log(a);
    let test = "来啦？";
}
function a_say(a_like) {
    let code = "敲代码";
    console.log(a_like);
}
a_molly();

执行如上示例代码，咱们在控制台打上断点，来察看 执行栈（call stack） 的过程

留神察看右边的 call stack（执行栈） 和左边的 scope（环境记录） 还有断点地位

通过观察断点调试后果，咱们能够失去以下论断：

  • 当脚本程序初始化时，会往所有的上下文执行栈底部推入一个全局上下文，也就是 Global 属性
  • 每当执行到函数时，会往执行栈外面追加一个 “函数上下文”
  • 当函数执行结束之后，会革除对应的 “函数上下文”
  • 每个上下文外部，确定了能够拜访的数据

作用域和作用域链

上下文中的代码在执行的时候，会创立变量对象的一个作用域链。这个作用域链决定了各级上下文中的代码在拜访变量和函数时的程序。作用域是蕴含关系，全局蕴含部分。

总结：

上下文关联了变量对象决定了函数能够拜访哪些数据，而作用域则是决定了数据拜访的规定。

简略来说，作用域的拜访规定能够总结为：由外向外查找拜访，外部能够拜访内部而内部无法访问外部，这样的拜访形式能够称之为作用域链

函数参数被认为是以后上下文中的变量，因而也跟上下文中的其余变量遵循雷同的拜访规定。

闭包

当初咱们曾经简略理解了“上下文 ”和“ 作用域 ”两个知识点，再来谈 闭包 就非常敌对了

闭包的定义

红宝书： 闭包指的是那些援用了另一个函数作用域中变量的函数

MDN： 一个函数和对其四周状态（lexica environment，词法环境）的援用捆绑在一起（或者说函数被援用突围），这样的组合就是闭包（closure）。也就是说，闭包让你能够在一个内层函数中拜访到其外层函数的作用域。在 JavaScript 中，每当创立一个函数，闭包就会在函数创立的同时被创立进去。

阮一峰： 闭包就是可能读取其余函数外部变量的函数。只有函数外部的子函数能力读取局部变量，因而能够把闭包简略了解成 ” 定义在一个函数外部的函数 ”。

总结一下： 函数的执行，能够触发另一个函数的定义（函数申明，函数表达式），并且反对援用另一个函数作用域中的变量。那么这个函数就是一个闭包

为什么会有闭包？

综上实践咱们能够得悉，部分作用域能够拜访全局作用域，而全局无法访问到部分，两个不相干的部分也无奈互相拜访，那么，只有思维不滑坡，方法总比艰难多，要解决此类问题，咱们须要变通一下，论断就是：“闭包”。

闭包就如同是一座桥梁，把多个不相干的作用域串联起来，实现互通。

闭包的原理正是利用了变量环境和作用域链拜访规定

闭包的用处

闭包最大的用处有两个

  1. 能够读取函数体的外部变量
  2. 让闭包的变量始终保持在内存中

闭包的模式：

把函数视为一等公民，视为一个一般变量

1：返回一个函数

function fun(){
    var aaa = 111
    return function(b){return aaa+b}
}
fun()()
经典场景：防抖节流

2：返回一个函数变量

function fun(a){let fn =  function(b){return a+b}
    return fn;
}
fun()()

3：作为全局的闭包函数

var call;
function fun(a){call =  function(b){return a+b}
}
fun()
call()

4：作为函数参数传递

function fun1(fn){fn() // 这个 fn 函数就是闭包
}
function fun2(){
    let str = 'molly'
    function fun3(){console.log(str)
    }
    fun1(fun3)
}
fun2()

5：回调函数


function ajax(data){console.log(data)
}
function sync(){const obj = {name:'molly',a:a}
    ajax(obj)
}

6：IIFE 立刻执行函数

;!(function(){...});

经典场景：for(var i = 1;i <= 5;i++){(function(j){setTimeout(function timer(){console.log(j)
    }, 0)
  })(i)
}
jquery 自定义封装插件也是从立刻执行函数开始的

闭包的劣势：

  1. 能够拜访到两个不相干的作用域变量
  2. 作为一个沙箱，存储变量
  3. 代码封装，工具函数
  4. 函数作为值，进行入参和返回

闭包的劣势：

  1. 内存泄露

如何躲避内存泄露呢？

  1. 将函数指针指向null，纳入垃圾回收范畴
  2. 将闭包执行结束
function fun(a){return function(b){return a+b}
}
let a = fun()
a=null

再或者将闭包也执行结束

a()

这里简略提一嘴为什么闭包会导致内存泄露，js 的垃圾回收机制大抵分为 “标记清理” 和 “计数援用” 两种。当闭包内的变量在另一个函数中有应用时，这个变量则不会被辨认为垃圾，而是常驻内存当中不会被清理。导致额定内存耗费

发问？

你晓得有哪些巧用闭包的场景或代码么？欢送评论区留言探讨！

感激

欢送关注我的集体公众号前端有猫腻每天给你推送陈腐的优质好文。回复“福利”即可取得我精心筹备的前端常识大礼包。愿你一路前行，眼里有光！

感兴趣的小伙伴还能够加我微信：猫力 molly 或前端交换群和泛滥优良的前端攻城狮一起交换技术，一起游玩！

退出移动版