作用域与闭包

怎样用js建立10个button标签，点击每一个按钮时打印按钮对应的序号？

看到上述问题，假如你能看出来这个问题实质上是考对作用域的明白，那末祝贺你，这篇文章你能够不必看了，申明你对作用域已明白的很透辟了，然则假如你看不出来这是一道考作用域的问题，那末请看下文…

事情形式

在一切的语言中，作用域平常有两种重要的事情形式：词法作用域和动态作用域。词法作用域就是定义在词法阶段的作用域，是由写代码时将变量和块作用域写在哪里来决议的，不会转变。而动态作用域并不体贴函数和作用域是怎样声明以及在任那边声明的，只体贴它们从那边挪用。javascript是词法作用域事情形式。 看下面的例子体味一下：

function static () {
    var foo=1
    alert(foo)         
}      
!function () {
    var foo=2
    static(); // 假如是词法作用域会打印1，假如是动态作用域则打印2   
}();

作用域

在es6之前javascript的作用域只要全局作用域和部分作用域（函数作用域），是没有块级作用域的。在es6中供应了let，能够简朴的定义一个块级作用域变量。运用let能够将变量绑定在地点的恣意作用域中（一般是{…}内部），也就是说let为其声明的变量隐式的挟制了地点的块级作用域。
为了轻易明白作用域，须要晓得下面几个观点：

• 自在变量：当前作用域没有的变量就称为自在变量
• 作用域链：当前作用域没定义的变量（自在变量），会逐级向父级作用域寻觅
• 父级作用域： 哪一个作用域定义了当前作用域，那就是当前作用域的父级作用域

var a = 1
function foo () {
    alert(a) // 在foo函数作用域中a就是自在变量，因为在foo中没有定义a，便向父级作用域（此为全局作用域）查找
}

作用域提拔

关于作用域提拔与js引擎线程运转原理有关，js引擎运转时会实行三步操纵，第一步是先搜检你的js代码有无初级的语法毛病，第二步是预编译，第三步是依据代码递次诠释一句实行一句。

第一步和第三步都很好明白，重点诠释一下第二步预编译，所谓预编译就是在实行代码会把一切的变量声明和函数声明预先处置惩罚。当你写了一句var a = 1时，javascript会当做两个操纵：var a;和a = 1;第一个是在预编译中实行的，此时只是声清楚明了a这个变量，没有赋值操纵，所以此阶段a的值为undefined。
恰是因为预编译存在，所以javascript会存在作用域变量提拔。看下面的例子能够更好的明白：

console.log(a) // undefined
var a = 1

//上述代码能够如许明白
var a // 此时a的值为undefined
console.log(a)
a = 1

变量提拔有两点须要记着：

• 只要声明才会被提拔

foo()
foo =  function() { // 这里只是赋值表达式，不会被提拔
    console.log(1)
}
function foo() { // 以function开首定义的函数才是声明，会被提拔
    console.log(2)
}

// 能够如许明白

function foo() {
    console.log(2)
}
foo() // 2
foo =  function() {
    console.log(1)
}

• 每一个作用域都邑提拔，提拔到当前作用域

foo()
function foo () {
    console.log(a) // undefinded
    var a = 1
}

//能够如许明白

function foo () {
    var a // undefined
    console.log(a)
    a = 1
}
foo()

闭包

关于闭包的定义，种种说法都有，在KYLE SIMPSON著的《你不晓得的javascript》中是如许定义的：当函数能够记着并接见地点的词法作用域时，就产生了闭包，纵然函数是在当前此法作用域以外实行。

另有收集上差别版本的定义，另有的说在函数中定义函数，并返回函数，就是闭包。实在都差不多，各个版本都有肯定的原理，但也不肯定全对，因为现在还没有一个圆满的、获得普遍承认的公认的定义。所以这里我们对闭包的定义也不方便做更多的诠释。假如你以为有一个观点定义会对你明白闭包有协助，我比较引荐《你不晓得的javascript》中对闭包的定义。

从下面一个小例子先来认识一下闭包：

function foo () {
    var a = 1
    function fn() {
        console.log(a)
    }
    return fn()
}
var bar = foo()
bar() // 1

上述就是一个简朴的闭包的例子，fn函数能够被实行，并且是在fn函数被定义的词法作用域的表面实行。

一般因为js引擎的渣滓接纳机制，一个一般的函数在实行以后内部作用域以及内部变量会被烧毁，渣滓机制用来接纳开释不再运用内存空间。

一般来讲，当foo实行以后，foo函数内部作用域会被烧毁，然则闭包就会阻挠渣滓接纳，事实上内部作用域还存在，因为fn函数还在运用运用foo函数的内部作用域。

到现在为止应当对闭包有个开端的认识了，下面就来回过甚去看看最最先预留的问题：怎样用js建立10个button标签，点击每一个按钮时打印按钮对应的序号？

先看一个毛病的示例：

var i = 1
for (i=1;i<=10;i++){
    var btn = document.createElement("BUTTON")
    btn.innerHTML = i
    btn.addEventListener('click',function(event){
        alert(i)
    })
    document.getElementById("div").appendChild(btn)
}

人人能够把上面的代码测试一下，你会发明屏幕上涌现了10个按钮，序号从0到9，然则当你点击每一个按钮的时刻发明都是弹出11，这是因为当你点击按钮的时刻for轮回早已实行终了，这时候i的值已变成11，当点击实行到alert(i)的时刻，发明当前作用域没有i，便去父作用域寻觅i，这时候i的值为11，所以会打印出11。

那末应当怎样才能到达我们想要的结果呢，我们晓得IIFE函数实在也是一般函数，既然是函数就能够能够有本身的作用域，无妨应用IIFE函数来尝尝：

var i = 1
for (i=1;i<=10;i++){
    (function(num){
        var btn = document.createElement("BUTTON")
        btn.innerHTML = num
        btn.addEventListener('click',function(event){
            alert(num)
        })
        document.getElementById("div").appendChild(btn)
    })(i)    
}

每次轮回建立一个IIFE函数，每一个IIFE函数都有本身的部分作用域，这里经由过程向IIFE函数传值的体式格局在IIFE函数中建立部分变量num，每一个IIFE函数都有本身的num变量，如许在点击实行alert(num)的时刻就会在当前作用域找到num。