前言
上篇文章讲了作用域,闭包还有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,本篇文章就到此结束了,有问题可以在评论区讨论哦,如果对你有帮助,可以点赞关注支持一下呀~后续我会继续带来前端相关的内容