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

最新推荐文章于 2022-11-24 14:26:22 发布

原创最新推荐文章于 2022-11-24 14:26:22 发布 · 315 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

42 篇文章

订阅专栏

面试题

17 篇文章

订阅专栏

本文通过两个实例深入解析JavaScript中常见的作用域问题，包括使用不同变量声明方式导致的点击事件回调问题，以及如何利用闭包实现数据缓存。通过对比var与let声明变量的区别，说明了闭包在保护数据隐私和实现缓存工具中的应用。

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