好吧那我接下来在重新记录下闭包吧:

其他时效优质文章,欢迎 ❤️️ Blog *

专业名词解释:

在计算机中,闭包指引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在。

局限自定义: 在 Javascript 中子函数使用了其父函数或者外层函数的变量就产生了一个闭包。这时外层变量的值能被子函数使用且外层变量在子函数未销毁之前一直被分配不会被释放。

说源头说起:

闭包的产生由于变量作用域链引起的 ( 由词法作用域导致 )。

从 JavaScript 作用域说闭包:

在 ES5 及之前的语言规范中作用域分 3 种:

  • 全局作用域
  • 局部 (函数作用域)
  • eval 作用域。 [ 注意:没有块级作用域 ]

在函数中定义的变量,就属于局部作用域,且只对函数范围内其他表达式可见。 而函数内部又可以使用父函数中的变量这就是由于作用域链,当 JavaScript 查找与变量关联的值时,会遵循一个查找链。这个链是基于作用域的层次结构。 如下代码:

var a = "global variable"; 
( function () { 
	console.log(a); 
	var fn = function () { 
		var a = "local variable" 
		console.log(a);
	}	 
	fn(); 
})()

// 输出
//global variable
//local variable

复制代码

我们在window全局对象下声明了变量a,随后调用了一个立即执行函数,其中向控制台直接打印变量 a,由于立即执行函数没有声明局部变量 a 所以导致 JavaScript 向其作用域链继续查找接着就在window对象中找到a变量并打印出它的值 "global variable"。接着这个立即执行函数声明了一个局部函数变量再调用它,在这个函数变量中首先声明了一个局部变量a然后在向控制台输出a得值。JavaScript 在执行时由于在 fn 函数作用域内部查找到了变量a就直接使用变量a的值所以打印出了 local variable。

值得注意的是:

  1. 这里其实有 2 个闭包环境一个是window对象和立即执行函数所创建的闭包; 另一个是立即执行函数和其内部声明的函数变量 fn 创建的闭包。
  2. 闭包其实就是个称呼,重要的是在这种场景下内部函数可以调用外部函数的变量,而这正是因为词法作用域链。
  3. 当闭包产生,在局部函数未被释放之前,被引用外部函数的变量就无法被释放。

清楚作用域的含义了吗???

那么我们刚刚说的“词法“作用域又是什么。 其实词法就是指代环境: 由于函数决定作用域,并且函数是一等公民可以直接用来参数传递等。那么作用域链是怎样来确定的呢: 下面的话背熟了: 作用域链是根据函数定义时候的位置确定的而不是在调用时。-- 这就是“词法”作用域

如果你还不懂闭包我 TM。。。

栗子 *:

  • [闭包的影响] 对一些 li 绑定点击事件并打印其索引,对比 2 断代码不解释:
var liListlength = 3; 
for(var i=0;i<liListlength;i++){ 
	var ele=document.querySelectorAll(".test > li")[i]; 
	ele.addEventListener("click",function(){ 
		alert("index is :" + i); 
	})		 
}

var liListlength = 3;
for(var i=0;i<liListlength;i++){
var ele=document.querySelectorAll(“.test > li”)[i];
ele.addEventListener(“click”,(function(i){
return function(){
alert(“index is :” + i);
}
})(i))
}

复制代码
  • [闭包的妙用] 模拟封装 我们可以运用闭包模拟模块的实现,即我们可以只暴露方法接口隐藏局部变量,具体如下:
var countMoudle = (function(){ 
    var _count = 0; 
<span class="hljs-keyword">var</span> plus = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ 
    _count++; 
}; 

<span class="hljs-keyword">var</span> minus = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ 
    _count--; 
}; 

<span class="hljs-keyword">var</span> print = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ 
	<span class="hljs-built_in">console</span>.log(_count); 
} 

<span class="hljs-keyword">return</span> { 
    <span class="hljs-attr">plus</span>: plus, 
    <span class="hljs-attr">minus</span>: minus, 
    <span class="hljs-attr">print</span>: print 
}; 

})();

countMoudle.print() //0
countMoudle.plus()
countMoudle.print() //1
countMoudle.minus()
countMoudle.print() //0

复制代码

此时我们只暴露出了方法名而没有暴露出变量属性,这时要对变量的修改只有通过接口方法调用。

感谢    赞同    分享    收藏    关注    反对    举报    ...