一、作用域
直观的理解作用域就是函数内部通过var 及 function关键字声明的变量的作用范围，首先来看下面代码(把代码复制到控制台执行一下就可以看到结果)：
var a=22222;
(function fn(){
console.log('第一个是：',a)
var a=1;
console.log('第二个是：',a)
})()
为什么第一个打印出来的是undefined而不是22222呢？
原因呢很简单，就是因为fn函数中声明了变量a，fn的作用域在fn执行之前，准确的说是在js编译阶段就已经生成了，不过此时a的值默认就是undefined；
js代码是由上往下执行的，第一次打印的时候a并没有赋值，所以还是 undefined，在往下走a赋值了1，第二次打印的时候a就是1了.
二、闭包
函数内部定义的变量在外部是无法访问的，然而定义在内部的函数却可以访问的到;这就形成了闭包
(function test(){
var a=1;
(function innerText(){
console.log(a);
console.dir(innerText);
})()
})()
执行一下我们会看到<function scope>下面多了一个Closure;Closure是个对象，有个值为1的属性a，这个就是test函数内部定义的变量a；
当然，如果没有引用父函数的变量，那么就没有闭包了
三、经典面试题
要求用面向对象的形式封装一个选项卡
<!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style>
7 #box>div{
8 width: 200px;
9 height:200px;
10 background: deepskyblue;
11 display: none;
12 }
13 #box>div.active{
14 display: block;
15 }
16 </style>
17 </head>
18 <body>
19 <div id="box">
20 <input type="button" value="按钮1">
21 <input type="button" value="按钮2">
22 <input type="button" value="按钮3">
23 <div class="active">按钮1</div>
24 <div>按钮2</div>
25 <div>按钮3</div>
26 </div>
27 </body>
28 <script>
29 function Tab(id){
30 var oBox=document.getElementById(id);
31 this.btns=oBox.getElementsByTagName('input');
32 this.divs=oBox.getElementsByTagName('div');
33 for(var i=0;i<this.btns.length;i++){
34 this.btns[i].onclick=(function(obj,j){/////颜色
35 return function () {
36 obj.tabCl(j)
37 }
38 })(this,i)/////颜色
39 }
40 }
41 Tab.prototype.tabCl=function(j){
42 for(var i=0;i<this.divs.length;i++){
43 this.divs[i].style.display='none';
44 }
45 this.divs[j].style.display='block';
46 }
47 new Tab('box')
48 </script>
49 </html>
其中标注颜色的这一块儿代码就利用了闭包完成的，可能有很多初学者会这么写这部分代码
function () {
this.tabCl(i)
}
如果这么写的话，i是引用了Tab函数作用域下的变量，for循环完成后这个变量就成了3了，所以传递给tabCl函数的值其实是3；
另外这么写this的指向也是不对的，我们希望指向的是通过new关键字生成的对象，然而却指向了点击的这个按钮元素；
所以，我们需要把正确的this和i传递到相应的onclick函数的作用域里，当然这个地方还有个闭包，我就不多说了，相信小伙伴儿是能找到的。
注：自己的学习心得，欢迎各位批评、指导
1238
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
