搞懂JS中作用域和闭包的使用（下）（讲讲面试题）

前言

上篇文章讲了作用域，闭包还有this使用的一些基础知识，不太清楚的朋友可以点下面链接查看：
搞懂JS中作用域和闭包的使用（上）（基本定义）
本篇文章就继续围绕这些知识点，来讲讲面试真题，帮助大家更好的去理解

真题举例：

this有哪些不同的运用场景，如何取值？

普通函数中调用，this是window
call，apply，bind会改变this指向，绑定谁，this就指向谁
作为对象方法调用，this就是当前对象
class里的this是，class实例本身
箭头函数 => ，this是上一级作用域的值

手写bind函数

主要看注释，我直接标注了对应位置

Function.prototype.bind1 = function(){
    
    
    // 参数转化为数组
    const args = Array.prototype.slice.call(argument);
    // 获取this（取出数组的第一项，剩余的就是传递的参数）
    const t = args.shift();
    // 获取绑定mybind的function
    const self = this;
    // 返回一个函数
    return function(){
    
    
    // 执行原函数，并返回结果
        return self.apply(t, args);
    }
}

实际开发中闭包的应用

隐藏数据只提供API进行修改数据

在这里插入图片描述

创建10个< a>,点击弹出序号

在循环外部定义a，在for循环里定义i，此时i为for循环中的块作用域，每次执行的时候都会形成一个块，所以i的值就不一样，能够显示出对应的序号i的值

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)
}

总结

首先this的指向，使用场景这块内容给大家进行了总结，需要好好理解。手写bind函数这块，大家可以自己动手去实现实现，只要搞懂了，例如手写call之类的题目也不在话下。对于闭包在实际中的应用，只要能理解上图的代码基本没问题。对之前基础知识不太牢固的可以去看看上篇文章，链接在文开头。

OK，本篇文章就到此结束了，有问题可以在评论区讨论哦，如果对你有帮助，可以点赞关注支持一下呀~后续我会继续带来前端相关的内容