JavaScript的变量作用域和闭包操作-技术胖-胜洪宇关注web前端技术今天有朋友问我关于JavaScript关于闭

今天有朋友问我关于JavaScript关于闭包的知识，那我就专门写一篇文章，希望可以帮助更多的前端同学。

JavaScript的闭包

变量的作用域：

每个函数来定义作用域，函数内部用var来声明的，他们的作用域只在本函数内有用。函数可以用来创造函数作用域。此时的函数像一层半透明的玻璃，在函数里面可以看到外面的变量，而在函数外面无法看到函数里的变量。

我们先来看一个例子，在例子中我们定义了三个函数，分别是funa ，funb，func，在每个函数里我们都用 var 独自声明了一个变量，然后进行打印。（代码）

var funa = function(){
    var a = "sakura";
    console.log("I am "+a);
}
 
var funb =function(){
    var b = "naruto";
    console.log("I am "+b);
}
 
var func= function(){
    var c= "sasuke";
    console.log("I am "+c);
}
funa();
funb();
func();

这时我们用node 运行程序是没有问题的！但是如果我们钥匙把变量 a ，在funb 函数里打印，程序就会报错.(代码如下)

var funb =function(){
    var b = "naruto";
    console.log("I am "+b);
    console.log(a);
}

如果这个例子我们理解了，那我们再来看一个更为复杂的例子。例子里先定义了 func1 函数，然后又在 func1 函数里定义了 func2 ，然后再func1里打印func2里的一个变量，这时是找不到变量的，程序会报错。

var a = 1;
var func1= function(){
    var b=2;
    var func2 = function(){
        var c= 3;
        console.log(b);//可以找到
        console.log(a);//可以找到
    }
    func2();
    //下面的c是找不到的。
    console.log(c);
}
func1();

简单的闭包函数

var  func = function(){
    var a=1;
    return function(){
        a++;
        console.log(a);
    }
};
 
var f = func();
f();
f();
f();

通过返回一个函数，带出了上下文，让 a 变量可以对外暴露了。

我们再看下边这个代码，这时控制台打印的结果是什么那?

function Foo() {
    var i = 0;
    return function() {
        console.log(i++);
    }
}
 
var f1 = Foo(),
    f2 = Foo();
f1();
f1();
f2();

答案是：0 1 0

经典案例：在循环时需要经常的用到闭包的知识。

html代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset ="UTF-8">
        <title>VueJS</title>
        <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap.css">
        <link rel="stylesheet" href="./bower_components/bootstrap/dist/css/bootstrap-theme.css">
          
        
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <hr>
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">闭包经典实例</h3>
                        <div>
                        <div class="panel-body">
                            <ul class="list-group">
                                <li class="list-group-item">1</li>
                                <li class="list-group-item">2</li>
                                <li class="list-group-item">3</li>
                                <li class="list-group-item">4</li>
                                <li class="list-group-item">5</li>
                            </ul>
                        </div>        
                    </div>
                </div>
            </div>
        </div>
       
      <script src="./scopedemo4.js"></script>
    </body>
</html>

JS代码

var nodes = document.getElementsByTagName('li');
 
for(var i=0,len = nodes.length; i<len; i++){
 (function(i){
    nodes[i].onclick = function(){
        console.log(i);
    }; 
 })(i)
}