请选择 进入手机版 | 继续访问电脑版

HTML5星空

3分钟了解闭包

[复制链接]
发表于 2020-6-28 22:40:11 | 显示全部楼层 |阅读模式


闭包是一个老生常谈的题目,面试中会遇到,实际工作中也会遇到。

也许之前,你已经见过它千百回,但不敢保证你是“懂”它的那个人。



闭包,通常的理解,是指 可以访问其他函数作用域内变量的函数


在MDN中对闭包的定义如下:

closure is the combination of a function and the lexical environment within which that function was declared. 

即:闭包是函数和声明该函数的词法环境的组合


接下来,我们简单的为闭包举个“栗子”

function f() {  
 let name = 'andrew'  let getName = () => {    
   return name  }
 return getName
}

如上,利用匿名函数 getName,我们就可以访问到 函数 f 的内部变量 name。

let g = f()
g() // "andrew"


我们再来看一个MDN中更加生动的例子(计时器):

查看原文:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Closures

var makeCounter = function() {
 var privateCounter = 0;  
 function changeBy(val) {    privateCounter += val;  }
 return {    increment: function() {      changeBy(1);    },    decrement: function() {      changeBy(-1);    },    value: function() {
     return privateCounter;    }  }
}

测试:

var Counter1 = makeCounter();
var Counter2 = makeCounter();

console.log(Counter1.value()); // 0
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); // 2
Counter1.decrement();
console.log(Counter1.value()); // 1

console.log(Counter2.value()); // 0

Counter1 和 Counter2 各自独立地引用这自己词法作用域内的 privateCounter 变量,不会影响到另外一个闭包中的变量。


另外,关于闭包补充两个需要注意的点(直接上代码):


一是运行时的词法作用域环境

function f() {
  console.log('f is invoked.')
 return {    f() {      console.log('inner f is invoked.')      console.log('which will be the next?')
     return f()    }  }
}

测试:

let fn = f()
fn.f()


二是参数与闭包的关系

function func(x) {
 return function(y) {    console.log(x + y)  }
}

测试:

let add = func(1)
add(2)


上面两段代码没有给出运行结果,但相信大家心里清楚




回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

更多资源及Java+大数据个人原创视频,
可关注本站官方公众号观看:
快讯

     京ICP备14042305号

html5star team © 2012-2013 html5星空 Comsenz Inc.

GMT+8, 2020-7-10 08:01 , Processed in 0.219393 second(s), 36 queries .

快速回复 返回顶部 返回列表