JS关于作用域、闭包的面试题

1.创建10个a标签，点击时弹对应的序号

常见做法 ❌

var a
for (var i = 0; i < 10; i++) {
    a=document.createElement('a')
    a.innerHTML=i
    a.addEventListener('click',function(e){
        e.preventDefault()//取消默认事件
        alert(i)
    })
    document.body.appendChild(a)
}

结果：点击每个元素均弹出 10
分析：点击事件点击的时候for循环执行完毕，并且i作用域是全局作用域，i的值已经变为10，故点击10个元素均为10

正确做法✔️

let  a
for (let i = 0; i < 10; i++) {
    a = document.createElement('a')
    a.innerHTML = i
    a.addEventListener('click', function (e) {
        e.preventDefault() //取消默认事件
        alert(i)
    })
    document.body.appendChild(a)
}

结果：点击每个元素弹对应的序号
分析：let i定义在for循环块级作用域内，每次for循环执行的时候都会形成一个新的块，每个块及作用域下都生成一个i,所以每个元素弹对应的序号

2.用闭包做一个简单的catch工具

闭包中的数据，被隐藏，不被外界访问

function creatCache(){
    const data={}//闭包中的数据，被隐藏，不被外界访问
    return {
        set:function(key,val){
            data[key] = val
        },
        get:function(key){
            return data[key]
        }
    }
}
const c = creatCache()
c.set('name','lolo')
console.log(c.get('name')) //lolo