【九月打卡】第11天 前端工程师2022版 就业必备基础技术面试分析

课程名称：JS基础-作用域和闭包

课程章节：Javascript面试课

课程讲师： 双越

课程内容：

    学习课程之前，我们先来看一下这节会遇到哪些面试题？

        1、this的不同应用场景，如何取值？

        2、实际开发中闭包的应用场景

        3、创建10个 a 标签，点击时弹出对应序号。

        4、手写bind函数

    接下来我们一起看看知识点有哪些？

        1.作用域和自由变量

◆全局作用域

◆函数作用域

◆块级作用域(ES6新增)

if while 等用{}包裹起来的都是块级作用域，在{}外使用就会报错

自由变量

◆一个变量在当前作用域没有定义，但被使用了

◆向上级作用域，一层一层依次寻找，直至找到为止

◆如果到全局作用域都没找到，则报错x is not defined

2.闭包

◆作用域应用的特殊情况，有两种表现：

◆函数作为参数被传递

◆函数作为返回值被返回

// 所有的自由变量的查找，是在函数定义的地方，向上级作用域查找，不是在执行的地方         //100

3.this

◆作为普通函数

◆使用call apply bind

◆作为对象方法被调用

◆在class方法中调用

◆箭头函数

注：this取值在函数执行时确定，不是定义时确认

最后，我们来回顾一下面试题

1.this的不同应用场景，如何取值？

①当作普通函数被调用，直接返回 window

②使用 call apply bind  ,传入什么绑定什么

③作为对象方法调用，返回对象本身

④在 class 的方法中调用，当前实例的本身

⑤箭头函数，找上级作用域的this的值

2.手写bind函数

略

3.实际开发中闭包的应用场景，举例说明

隐藏数据，如做一个cache工具：

// 闭包隐藏数据，只提供API
function createCache() {
    const data = {}    //闭包中的数据，被隐藏，不被外界访问
    return {
        set: function (key, value) {
            data[key] = value
        },
        get: function (key) {
            return data[key]
        }
    }
}

const c = createCache()
c.set('a', 100)
console.log(c.get('a'));

4.场景题：创建10个标签，点击时弹出对应的序号

let a
for(let i = 0;i<10;i++){
    a=document.createElement('a')
    a.innerHTML = i + '<br>'
    a.addEventListener('click',function(e){
        e.preventDefault()
        alert(i)
    })
    document.body.appendChild(a)
}

手写 bind 函数没怎么看，有时间再啃