js作用域、闭包
2017-08-23 本文已影响0人
清心挽风
一、作用域
作用域：变量生效（可以被访问）的范围，用来控制变量的可见性和生命周期。
全局作用域：不单独属于某一个函数的变量就是一个全局变量，在任何位置（普通函数、构造函数、字面量对象中）都可以访问到这个变量。
局部作用域：在函数中使用var定义的变量是局部变量。
注意：在js中块级（也就是大括号）的概念并不像其他语言那样完善（ECMA6中完善了），在其他语言中，一对大括号中的变量就是一个局部变量，但是在js中只有在一个函数中定义的变量才是一个局部变量。
作用域链：在多级作用域嵌套时，如果当前作用域内找不到所需要的变量，则向父级作用域寻找，一直找到全局作用域，但不会向下寻找。
变量提升：
var a = 12;
function fun1() {
alert("1"+a); // 未定义，内部定义了a，变量提升，并未赋值，所以a是未定义
var a = 23;//由于这行代码导致变量提升了
alert("2"+a);
a = 14;
}
fun1();
alert("3"+a);
面试题：
var a = 1;
for (var i = 0; i < 5; i++) {
var a = i;
}
// a = 4
function fn1() {
alert(a); // undefine
var a = 2;
alert(a); // 2
}
alert(fn1()); //undefine
alert(a); // 4
alert(abc(2)); // 报错
二、匿名函数
匿名函数：没有函数名字，只有函数体的函数叫匿名函数。
区分：具名函数，有函数名的函数。
var fn=function (){
alert('hello');
}
匿名函数使用场景：
1、通过DOM0级给标签添加事件函数，这些函数全是匿名函数。
事件函数：通过用户事件触发执行的函数，比如某个按钮的click事件。
2、把匿名函数当做另一个函数的参数传递，比如：定时器。
3、使用匿名函数模拟块级作用域。
(function(){
for(var i=0;i<4;i++){
}
})();
4、匿名函数充当闭包
三、闭包
闭包：在函数执行完毕后，向外返回另一个函数。在返回的函数中，使用到一个局部变量，因为承接这个返回函数的变量是全局的，为了保证全局变量正常访问，所以全局变量中所引用的局部变量生命周期也被无限的延长。
闭包能够读取其他函数内部变量。
function fn1(){
var i=12;
function fn2(){
console.log(i);
return i+3
}
return fn2;
}
var result=fn1(); //得到fn2函数
console.log(result());//得到15
//fn1是fn2的⽗函数，⽽fn2被赋给了⼀个全局变量，这导致fn2始终在内存中，
//⽽fn2的存在依赖于fn1，因此fn1也始终在内存中，不会在调⽤结束后，被垃
//圾回收机制（garbage collection）回收。
闭包的用途：
1、可以在全局作用域读取函数内部的变量。
2、让这些局部变量的值始终保持在内存中。
3、利用闭包解决使用循环添加事件的BUG。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
var btnArr=document.querySelectorAll('.btn');
for(var i=0;i<btnArr.length;i++){
(function(num){
//num变量是函数的形参,函数在每次执行时都会重新开辟内存空间来存放这个形参
//所以给标签添加的点击事件中使用到的num变量都是独一无二的，num变量中的
//值是当前遍历标签时的下标值
btnArr[num].onclick=function(){
//匿名函数在执行时，给事件绑定了这个函数，函数中操作了一个局部变量。该
//函数执行时一定是在全局变量作用域中执行的，所以为了保证在全局作用域中
//正常触发该函数，num变量也就变成了全局变量。
alert(num+1);
}
})(i);
}
}
</script>
</head>
<body>
<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
</body>
</html>
4、闭包解决下拉选择框的BUG
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul{
width: 500px;
margin: auto;
margin-top: 20px;
}
li{
float: left;
list-style: none;
width: 100px;
height: 21px;
background: pink;
text-align: center;
cursor: pointer;
}
div{
display: none;
background: greenyellow;
}
.active{
background: indianred;
}
</style>
<script type="text/javascript">
window.onload=function(){
var lis=document.querySelectorAll('li');
var divs=document.querySelectorAll('div');
for(var i=0;i<lis.length;i++){
(function(indexs){
lis[indexs].onmouseover=function(){
lis[indexs].className='active';
divs[indexs].style.display='block';
}
})(i);
(function(indexs){
lis[indexs].onmouseout=function(){
divs[indexs].style.display='none';
lis[indexs].className='';
}
})(i);
}
}
</script>
</head>
<body>
<ul>
<li>
<span>
菜单一
</span>
<div>
<p>菜单一内容</p>
<p>菜单一内容</p>
<p>菜单一内容</p>
<p>菜单一内容</p>
</div>
</li>
<li>
<span>
菜单二
</span>
<div>
<p>菜单二内容</p>
<p>菜单二内容</p>
<p>菜单二内容</p>
<p>菜单二内容</p>
</div>
</li>
<li>
<span>
菜单三
</span>
<div>
<p>菜单三内容</p>
<p>菜单三内容</p>
<p>菜单三内容</p>
<p>菜单三内容</p>
</div>
</li>
<li>
<span>
菜单四
</span>
<div>
<p>菜单四内容</p>
<p>菜单四内容</p>
<p>菜单四内容</p>
<p>菜单四内容</p>
</div>
</li>
<li>
<span>
菜单五
</span>
<div>
<p>菜单五内容</p>
<p>菜单五内容</p>
<p>菜单五内容</p>
<p>菜单五内容</p>
</div>
</li>
</ul>
</body>
</html>
