博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
【JS 函数】JS闭包深入了解
阅读量:4093 次
发布时间:2019-05-25

本文共 2126 字,大约阅读时间需要 7 分钟。

定义

闭包是指有权访问另一个 函数作用域中的变量的函数。

创建方法

创建闭包的常见方式,就是在一个函数内部创建另一个函数。

function createComparisonFunction(propertyName) {
return function(object1, object2){
var value1 = object1[propertyName]; var value2 = object2[propertyName]; if (value1 < value2){
return -1; } else if (value1 > value2){
return 1; } else {
return 0; } };}

上例中,value1 与 value2 是内部函数中的代码,但它访问了外部函数的 propertyName 变量。如果要彻底理解其中的细节,那么必须从理解函数被调用的时候 都会发生什么入手。

作用域链

当某个函数被调用时,会创建一个执行环境(execution context)及相应的作用域链。

使用 arguments 和其他命名参数的值来初始化函数的活动对象(activation object)。但在作用域 链中,外部函数的活动对象始终处于第二位,外部函数的外部函数的活动对象处于第三位,…直至作为作用域链终点的全局执行环境。

后台的每个执行环境都有一个表示变量的对象——变量对象。

在函数执行过程中,为读取和写入变量的值,就需要在作用域链中查找变量,变量寻找的顺序为:局部环境 > 外部环境 > 全局环境。而局部环境的变量对象,则只在函数执行的过程中存在。

作用域链本质上是一个指向变量对象的指针列表,它只 引用但不实际包含变量对象。

function compare(value1, value2){
if (value1 < value2){
return -1; } else if (value1 > value2){
return 1; } else {
return 0; }}var result = compare(5, 10);

在这里插入图片描述

无论什么时候在函数中访问一个变量时,就会从作用域链中搜索具有相应名字的变量。一般来讲, 当函数执行完毕后,局部活动对象就会被销毁,内存中仅保存全局作用域(全局执行环境的变量对象)。

由于闭包会携带包含它的函数的作用域,因此会比其他函数占用更多的内存。过 度使用闭包可能会导致内存占用过多,我们建议读者只在绝对必要时再考虑使用闭 包。虽然像 V8 等优化后的 JavaScript 引擎会尝试回收被闭包占用的内存,但请大家 还是要慎重使用闭包。

闭包与变量

作用域链有一个副作用,即闭包只能取得包含函数中任何变量的最后一个值。闭包所保存的是整个变量对象,而不是某个特殊的变量。 所以,

function createFunctions(){
var result = new Array(); for (var i=0; i < 10; i++){
result[i] = function(){
return i; }; } return result;}

因为每个函数的作用域链中 都保存着 createFunctions()函数的活动对象,所以它们引用的都是同一个变量 i。当 createFunctions()函数返回后,变量 i 的值是 10,此时每个函数都引用着保存变量 i 的同一个变量 对象,所以在每个函数内部 i 的值都是 10。但是,我们可以通过创建另一个匿名函数强制让闭包的行为 9 符合预期,如下所示。

function createFunctions(){
var result = new Array(); for (var i=0; i < 10; i++){
result[i] = function(num){
return function(){
return num; }(i); } return result;}

这样每个函数就会返回各自不同的索引值了,在这个版 本中,我们没有直接把闭包赋值给数组,而是定义了一个匿名函数,并将立即执行该匿名函数的结果赋 给数组。这里的匿名函数有一个参数 num,也就是最终的函数要返回的值。在调用每个匿名函数时,我 们传入了变量 i。由于函数参数是按值传递的,所以就会将变量 i 的当前值复制给参数 num。而在这个 匿名函数内部,又创建并返回了一个访问 num 的闭包。这样一来,result 数组中的每个函数都有自己 num 变量的一个副本,因此就可以返回各自不同的数值了。

转载地址:http://jxvii.baihongyu.com/

你可能感兴趣的文章
我觉得刷题是有必要的,不然小心实际被问的时候懵逼,我觉得你需要刷个50份面试题。跟考研数学疯狂刷卷子一样!
查看>>
我觉得嵌入式面试三要素:基础吃透+项目+大量刷题,缺一不可。不刷题是不行的。而且得是大量刷,刷出感觉套路,别人做题都做得是固定题型套路条件反射了,你还在那慢慢理解慢慢推是不行的,也是考研的教训。
查看>>
React Native之原理浅析
查看>>
Git操作清单
查看>>
基础算法
查看>>
前端面试
查看>>
React Hooks 完全指南
查看>>
nvm 和 nrm 的安装与使用
查看>>
Flutter Boost的router管理
查看>>
Android Flutter混合编译
查看>>
微信小程序 Audio API
查看>>
[React Native]react-native-scrollable-tab-view(进阶篇)
查看>>
Vue全家桶+Mint-Ui打造高仿QQMusic,搭配详细说明
查看>>
React Native应用部署/热更新-CodePush最新集成总结(新)
查看>>
react-native-wechat
查看>>
基于云信的react-native聊天系统
查看>>
网易云音乐移动客户端Vue.js
查看>>
ES7 await/async
查看>>
ES7的Async/Await
查看>>
React Native WebView组件实现的BarCode(条形码)、(QRCode)二维码
查看>>