• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

前端高频手撕代码整理

开发技术 开发技术 2周前 (04-29) 5次浏览

1. 手写闭包

首先,看一个简单的案例:

1 for (var i = 0; i < 4; i++) {
2     setTimeout(() => {
3         console.log(i);
4     }, i * 1000);
5 }
6 //  每隔一秒打印 4 4 4 4
因为var 没有块级作用域,循环变量变成全局变量。如何解决?----> 闭包
1 for (var i = 0; i < 4; i++) {
2     (function(j) {
3         setTimeout(() => {
4             console.log(j);
5         }, j * 1000);
6     })(i)
7 }
8 // 每隔一秒打印 0 1 2 3 

补:还可以通过let解决。

2. 手写实现call、apply、bind

(1)call

test.call(a)

call首先将test的this指向a,然后执行函数test。

我们可以将函数test挂载到a上面,让函数test变成a的一个方法,通过a.test来调用

 1 Function.prototype.myCall = function(context) {
 2     context = context || window; //没传入this 默认绑定window对象
 3     context.fn = this; // 将myCall函数的调用者test挂载到context的属性上,可以通过context.fn调用test函数.这里的context就是a
 4     const args = [...arguments].slice(1); // 将第一个参数去掉,即去掉test.myCall中的a,然后args=[1,2]
 5     const results = context.fn(...args); // 去调用test(1,2)
 6     delete context.fn
 7     return results
 8 }
 9 
10 function test(arg1, arg2) {
11     console.log(arg1, arg2);
12     console.log(this.name, this.offer);
13 }
14 const a = {
15     name: 'coder',
16     offer: 100
17 }
18 test.myCall(a, 1, 2)

1 2
coder 100

 


程序员灯塔
转载请注明原文链接:前端高频手撕代码整理
喜欢 (0)