一、作用域
直观的理解作用域就是函数内部通过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函数的作用域里,当然这个地方还有个闭包,我就不多说了,相信小伙伴儿是能找到的。
注:自己的学习心得,欢迎各位批评、指导