2024京东最新Web前端面试真题解析,JS基础防抖节流,泪目

本文详细介绍了JavaScript的bind方法原理、new关键字的实现、防抖和节流的概念、TCP协议的基础知识以及浏览器缓存、安全机制(如XSS和CSRF)、事件处理优化(防抖、节流)和图片懒加载等内容。
摘要由CSDN通过智能技术生成

//给context添加一个临时函数

context.fn = this;

if (!arr) {

context.fn()

} else {

//接收参数处理 arguments

var args = [];

for (var i = 0; i < arr.length; i++) {

// [“arguments[0]”, “arguments[1]”, “arguments[2]”]

args.push(‘arr[’+i+‘]’)

// args.push(arguments[i])

}

//传参执行context.fn()函数

eval(‘context.fn(’ + args + ‘)’)

}

//删除临时函数

delete context.fn

}

bind实现原理

var obj = {

init: 1,

add: function(a, b) {

return a + b + this.init;

}

}

obj.add(1, 2); // 4

var plus = obj.add;

plus(3, 4); // NaN,因为 this.init 不存在,这里的 this 指向 window/global

plus.call(obj, 3, 4) // 8

plus.apply(obj, [3, 4]); // 8, apply 和 call 的区别就是第二个参数为数组

plus.bind(obj, 3, 4); // 返回一个函数,这里就是 bind 和 call/apply 的区别之一,bind 的时候不会立即执行

总结
就是简单的使用 bind 来改变 this 指向,和 call/apply 的区别,有一个延迟执行的作用

二、new的实现原理


new的特点

new 一个构造函数,会自动reutrn一个实例化对象

new完的实例化对象____proto___自动指向构造函数的prototype

new构造函数传参自动赋值给当前实例化对象

三、防抖和节流


防抖概念
在固定的时间内没有触发事件,会在固定时间结束后触发,如果固定时间内触发事件了,会在延长固定时间再触发

防抖主要利用定时器实现

//用定时器实现防抖

function debounce(func,wait) {

var timer=null;

return function() {

//保存当前调用的dom对象

var _this=this;

//保存事件对象

var args=arguments;

clearTimeout(timer)

timer=setTimeout(function() {

func.apply(_this,args)

},wait)

}

}

节流概念:
无论在固定时间内是否有事件触发,都会按照固定时间规律触发

具体实现有两种方法

自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。

深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
img
img
img
img
img
img

既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

由于文件比较大,这里只是将部分目录大纲截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且后续会持续更新

如果你觉得这些内容对你有帮助,可以添加V获取:vip1024c (备注前端)
img

TCP协议

  • TCP 和 UDP 的区别?
  • TCP 三次握手的过程?
  • 为什么是三次而不是两次、四次?
  • 三次握手过程中可以携带数据么?
  • 说说 TCP 四次挥手的过程
  • 为什么是四次挥手而不是三次?
  • 半连接队列和 SYN Flood 攻击的关系
  • 如何应对 SYN Flood 攻击?
  • 介绍一下 TCP 报文头部的字段
  • TCP 快速打开的原理(TFO)
  • 说说TCP报文中时间戳的作用?
  • TCP 的超时重传时间是如何计算的?
  • TCP 的流量控制
  • TCP 的拥塞控制
  • 说说 Nagle 算法和延迟确认?
  • 如何理解 TCP 的 keep-alive?

浏览器篇
  • 浏览器缓存?
  • 说一说浏览器的本地存储?各自优劣如何?
  • 说一说从输入URL到页面呈现发生了什么?
  • 谈谈你对重绘和回流的理解
  • XSS攻击
  • CSRF攻击
  • HTTPS为什么让数据传输更安全?
  • 实现事件的防抖和节流?
  • 实现图片懒加载?

一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
img

  • CSRF攻击
  • HTTPS为什么让数据传输更安全?
  • 实现事件的防抖和节流?
  • 实现图片懒加载?

[外链图片转存中…(img-fGXrh9N9-1712397691471)]

一个人可以走的很快,但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎扫码加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!
[外链图片转存中…(img-haCIlqru-1712397691471)]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值