您的位置:首页 > Web前端 > JavaScript

[Javascript] 闭包 closure

2015-12-01 16:54 633 查看
闭包是十分的重要

校招面试的几家公司都要问到闭包的问题

最经典的是问到

闭包是什么 有什么作用

闭包循环和累加的应用

更改闭包的作用域

(1) 概念

全局下 取不到局部的变量的值

<script type="text/javascript">
function a(){
var name1="jessica";
console.log(name1);
}
console.log(name1);
//Uncaught ReferenceError: name1 is not defined
</script>


闭包是一个 有权访问另一个函数作用域的变量的函数。且始终放在内存当中

<script type="text/javascript">
function a(){
var name="jessica";
return function(){//匿名函数 闭包的使用
return name;
}
}
console.log(a()());
//jessica
</script>


(2) 闭包+变量

问题:闭包只能取到任何变量的最后一个值

块级作用域

(function(){

//块级作用域

})();

(3) 闭包经典案例 - 累加

<script type="text/javascript">
function a(){
var i=100;
return function(){
i++;
return i;
}
}
var b=a();//获取函数
console.log(b());
console.log(b());
console.log(b());
console.log(b());
console.log(b());
</script>




(4) 闭包经典案例 - 循环

问题:

<script type="text/javascript">
function a(){
var array=[];
for (var i = 0; i < 5; i++) {
array[i]=function(){
return i;
}
}
return array;
}
var b=a();
for (var i = 0; i < b.length; i++) {
console.log(b[i]());//五个5 不是01234
//b[i]调用的是匿名函数,匿名函数并没有自我执行
//等调用的时候, a()已经执行完毕了
};
</script>




解决:

<script type="text/javascript">
function a(){
var array=[];

for (var i = 0; i < 5; i++) {
array[i]=(function(i){
return i;
})(i);//匿名函数自我执行
}

return array;
}
var b=a();
for (var i = 0; i < b.length; i++) {
console.log(b[i]);
};
</script>




(4) this对象

<script type="text/javascript">
var name="jessica";
var obj={
name:"krystal",
a:function(){
return function(){
return this.name;
}
/*取到的值为什么是jessica?
因为在闭包中, this指的是window
*/
}
}

var b=obj.a();
console.log(b());//jessica
</script>




解决:

(1) that =this

<script type="text/javascript">
var name="jessica";
var obj={
name:"krystal",
a:function(){
var that=this;
return function(){
return that.name;
}
}
}

var b=obj.a();
console.log(b());//krystal
</script>




(2) call

<script type="text/javascript">
var name="jessica";
var obj={
name:"krystal",
a:function(){
return function(){
return this.name;
}
}
}

console.log(obj.a().call(obj));
//用obj来冒充, 改变作用域来执行a()
</script>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息