Web前端最全JS基础防抖节流(1)，2024年最新前端高分面试指南

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

var f1=new Function() // 其中的构造函数中this===f1 永远相等

var p1=new Person() //其中的构造函数中this===p1 永远相等

//call模拟实现原理代码：

Function.prototype.call2 = function (context) {

//目标对象

context = context || window;

//this===实例化的函数,函数本质上也是对象

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

context.fn = this;

//接收参数处理 arguments

console.log(‘arguments:’,arguments)

var args = [];

for (var i = 1; i < arguments.length; i++) {

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

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

// args.push(arguments[i])

}

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

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

//删除临时函数

delete context.fn

}

apply实现原理

Function.prototype.apply2 = function (context,arr) {

//目标对象

context = context || window;

//this===实例化的函数,函数本质上也是对象

//给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)

}

}

节流概念：

无论在固定时间内是否有事件触发，都会按照固定时间规律触发

具体实现有两种方法

第一种：时间戳

//时间戳版本实现节流

TCP协议

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

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

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

g-bCWeWdYs-1715858301884)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

浏览器篇

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

[外链图片转存中…(img-DkOEr6e6-1715858301885)]