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

前言

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

真题举例:

this有哪些不同的运用场景,如何取值?

  1. 普通函数中调用,this是window
  2. call,apply,bind会改变this指向,绑定谁,this就指向谁
  3. 作为对象方法调用,this就是当前对象
  4. class里的this是,class实例本身
  5. 箭头函数 => ,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,本篇文章就到此结束了,有问题可以在评论区讨论哦,如果对你有帮助,可以点赞关注支持一下呀~后续我会继续带来前端相关的内容

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Beiyux

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值