一、变量的作用域
变量可以分为局部变量和全局变量,Javascript中一方面函数内部可以直接读取全局变量,另一方面在函数外部不能直接读取局部变量。例如:
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var n = 999;//全局变量
f1(); //调用f1();
function f1(){
console.log(n);
}
function f2(){
var m=888;//局部变量
}
console.log(m);//在函数外读取局部变量,结果是???
</script>
</body>
</html>
运行结果:
可以看到,在函数外读取局部变量结果报错。
注意:函数内部声明变量的时候,一定要使用var命令。如果不用var声明,实际上声明了一个全局变量。
例如:
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function f1(){
n = 23;
}
f1();
console.log(n);//23
</script>
</body>
</html>
由结果知可以获取到n值,n为全局变量。
二、从外部读取局部变量
在函数的内部,定义一个函数。如下:
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function f1(){
n = 999;
function f2(){
console.log(n); //999
}
}
</script>
</body>
</html>
在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量对f1就是不可见的。这就是javascript语言特有的‘链式作用域’结构,即子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们就可以在f1外部读取它的内部变量了。如下:
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function f1(){
n = 999;
function f2(){
console.log(n);
}
return f2;
}
var result = f1(); //返回的是f2函数
result(); //999
</script>
</body>
</html>
闭包的概念
上面例子中的f2() 函数其实就是闭包。
闭包就是能够读取其他函数内部变量的函数,函数没有被释放,整条作用域链上的局部变量都将得到保留。
由于在javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成‘定义在一个函数内部的函数’。
所以,在本质上,闭包就是将函数内部和函数外部连接的一座桥梁。
使用闭包应注意:
1>由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,可能导致内存泄露。
2>闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法,把内部变量当作它的私有属性,这时一定要小心,不要随便改变父函数内部变量的值。
相关面试题
案例一:
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function fun(n,o) {
console.log(o);
return {
fun:function(m){
return fun(m,n);
}
};
}
var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//undefined,0,0,0
var b = fun(0).fun(1).fun(2).fun(3);//undefined,0,1,2
var c = fun(0).fun(1); c.fun(2); c.fun(3);//undefined,0,1,1
</script>
</body>
</html>
案例二:
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var sum=function(){
var chche;
if(arguments.length===1){
chche=arguments[0];//如果arguments对象长度为1,也就是参数只有1个时,将这个参数值赋给chche,暂存
return function(number){//返回一个函数,函数里的参数(也就是第二个括号里的参数)与之前的第一个括号里的参数相加
return chche+number
}
}else{
return arguments[0]+arguments[1];//如果arguments对象长度不为1,那么两个参数相加
}
};
console.log(sum(2,3));//5
console.log(sum(2)(3));//5
</script>
</body>
</html>
案例三
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function f1(){
function f2(){
console.log(1);
}
return f2;
}
var res=f1();//f2()
res();
var res=f1()();
</script>
</body>
</html>