在一个前端公众号,看到这么一个号称简单的面试题:
1、以下程序输出什么?
<script type="text/javascript">
function init(){
for (var i = 0; i < 10; ++i) {
setTimeout(function () {
console.log(i);
}, 0);
} }
window.onload=init;
</script>
2、若需要输出0123456789,应该怎么修改?
结果,输出的为10101010101010101010
若要输出0123456789,则可以将代码改成
<script type="text/javascript">
function init2(){
for (var i = 0; i < 10; ++i) {
setTimeout(
(function(i){
return function(){
console.log(i)
}
})(i), 0);
}
}
window.onload=init2;
</script>
解释:
1、for循环每次注册一个延迟函数, setTimeout是异步的,传入事件队列中,在循环结束后进行处理,当循环结束时,i为10。
setTimeout中的匿名function没有将 i 作为参数传入来固定这个变量的值, 让其保留下来, 而是直接引用了外部作用域中的 i, 因此 i 变化时, 也影响到了匿名function.
2、for循环执行时,给点击事件绑定的匿名函数传递i后,立即执行返回一个内部的匿名函数,因为参数是按值传递的,
所以此时形参保存的就是当前i的值,内部的匿名函数一直保存着当前i的值。 返回的匿名函数执行弹出各自保存的 i 的引用的值。
看到解释到这里,我是一脸懵逼,关键在于闭包的参数传递,所以我自己对闭包的知识进行了一下下扩展。
0、前言:Js变量的作用域
变量的作用域包括:全局变量、局部变量
Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。
var n=999;
function f1(){
alert(n);
}
f1(); // 999
在函数外部无法读取函数内部的局部变量
function f1(){
var n=999;
}
alert(n); // error
注意:若函数内部声明变量的时候,一定要用var,否则实际上声明了全局变量,
会造成其他函数误用变量、全局对象过于庞大,影响访问速度等不良影响
function f1(){
n=999;
}
f1();
alert(n); // 999
Javascript语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立
1、闭包的解释
闭包是指有权访问另一个函数作用域变量的函数,创建闭包的通常方式,是在一个函数内部创建另一个函数。
闭包的本质是一个函数,将函数内部和外部连接起来的桥梁。
2、闭包的写法
好像,还是,有那么点抽象,那就网上找个例子:
function func1(){
var age = 22;
function func2(){
return age;
}
return func2;
}
var result = func1(); //得到的是函数func2这一整个函数
var _num = result(); //得到的是func2的执行结果也就是age的值
console.log(result); //function func2(){ return age; }
console.log(_num); //22
结果分析:
a)首先要明白一个函数名称加不加括号的区别,比如说func1和func1(),func1表示的是这个函数本身,func1()表示的是这个名叫func1的函数的执行结果也就是它的返回值。
b) 其次我们来分析闭包的原理,因为func2是函数func1的子函数,所以在func2中可以访问到变量age,并将这个值作为函数func2的返回值返回,最后将整个func2函数作为func1函数的返回值。
c)最后我们来分析一下result和_num的值,result是函数func1的执行结果,也就是func1的返回值func2函数本身,_num的值为func2的执行结果也就是变量age。
d)至此,我们实际上已经将局部变量age的值获取到了并存在变量_num中,实现了在函数外部访问局部变量的值的问题。
3、闭包的用途
a) 匿名自执行函数
创建了一个匿名的函数,并立即执行它,由于外部无法引用它内部的变量,因此在执行完后很快就会被释放,关键是这种机制不会污染全局对象。
① 匿名函数:顾名思义,就是没有方法名的函数
② 匿名函数调用方式:
使用()将匿名函数括起来,然后后面再加一对小括号(包含参数列表)
(function(a,b)
{
console.log('匿名函数加圆括号:'+(a+b));
}(,));
将匿名函数赋值给一个变量,通过变量引用进行函数调用
var noName= function(a,b){
console.log('匿名函数赋值变量:'+(a+b));
}(1,4);
b) 缓存(未整理验证)
再来看一个例子,设想我们有一个处理过程很耗时的函数对象,每次调用都会花费很长时间,
那么我们就需要将计算出来的值存储起来,当调用这个函数的时候,首先在缓存中查找,如果找不到,则进行计算,
然后更新缓存并返回值,如果找到了,直接返回查找到的值即可。闭包正是可以做到这一点,因为它不会释放外部的引用,
从而函数内部的值可以得以保留。
c)实现封装
可以先来看一个关于封装的例子,在person之外的地方无法访问其内部的变量,而通过提供闭包的形式来访问
d)面向对象编程
实例独立访问成员变量,互不影响