程序员如何技术划水，前端进阶面试-JS面试题(阿里、字节，web前端开发培训班

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

checkbox[i].checked = !checkbox[i].checked

}

}

16. 对原型链的理解？prototype上都有哪些属性

========================================================================================

在js里，继承机制是原型继承。继承的起点是 对象的原型（Object prototype）。

一切皆为对象，只要是对象，就会有 proto 属性，该属性存储了指向其构造的指针。

Object prototype也是对象，其 proto 指向null。

对象分为两种：函数对象和普通对象，只有函数对象拥有『原型』对象（prototype）。

prototype的本质是普通对象。

Function prototype比较特殊，是没有prototype的函数对象。

new操作得到的对象是普通对象。

当调取一个对象的属性时，会先在本身查找，若无，就根据 proto 找到构造原型，若无，继续往上找。最后会到达顶层Object prototype，它的 proto 指向null，均无结果则返回undefined，结束。

由 proto 串起的路径就是『原型链』。

通过prototype可以给所有子类共享属性

17. 为什么使用继承

=======================================================================

通常在一般的项目里不需要,因为应用简单,但你要用纯js做一些复杂的工具或框架系统就要用到了,比如webgis、或者js框架如jquery、ext什么的,不然一个几千行代码的框架不用继承得写几万行,甚至还无法维护

18. setTimeout时间延迟为何不准

==================================================================================

单线程, 先执行同步主线程, 再执行异步任务队列

19. 事件循环述，宏任务和微任务有什么区别？

===================================================================================

先主线程后异步任务队列

先微任务再宏任务

20. let const var作用域

================================================================================

块级作用域, 暂时性死区

21. 节流和防抖

=====================================================================

函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。

// 函数节流 滚动条滚动

var canRun = true;

document.getElementById(“throttle”).onscroll = function(){

if(!canRun){

// 判断是否已空闲，如果在执行中，则直接return

return;

}

canRun = false;

setTimeout(function(){

console.log(“函数节流”);

canRun = true;

}, 300);

};

函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。

// 函数防抖

var timer = false;

document.getElementById(“debounce”).onscroll = function(){

clearTimeout(timer); // 清除未执行的代码，重置回初始化状态

timer = setTimeout(function(){

console.log(“函数防抖”);

}, 300);

};

22. 实现一个sleep函数

===========================================================================

// 这种实现方式是利用一个伪死循环阻塞主线程。因为JS是单线程的。所以通过这种方式可以实现真正意义上的sleep()。

function sleep(delay) {

var start = (new Date()).getTime();

while ((new Date()).getTime() - start < delay) {

continue;

}

}

function test() {

console.log(‘111’);

sleep(2000);

console.log(‘222’);

}

test()

23. 闭包

==================================================================

闭包属于一种特殊的作用域，称为 静态作用域。它的定义可以理解为: 父函数被销毁 的情况下，返回出的子函数的[[scope]]中仍然保留着父级的单变量对象和作用域链，因此可以继续访问到父级的变量对象，这样的函数称为闭包。

闭包会产生一个很经典的问题:

o多个子函数的[[scope]]都是同时指向父级，是完全共享的。因此当父级的变量对象被修改时，所有子函数都受到影响。

解决:

o变量可以通过 函数参数的形式 传入，避免使用默认的[[scope]]向上查找

o使用setTimeout包裹，通过第三个参数传入

o使用 块级作用域，让变量成为自己上下文的属性，避免共享

24. Immutable.js

============================================================================

Facebook出品, 倡导数据的不可变性, 用的最多就是List和Map.

25. js实现instanceof

==============================================================================

// 检测l的原型链（proto）上是否有r.prototype，若有返回true，否则false

function myInstanceof (l, r) {

var R = r.prototype

while (l.proto) {

if (l.proto === R) return true

}

return false

}

26. 严格模式

====================================================================

// 严格模式下, 隐式绑定丢失后this不会指向window, 而是指向undefined

‘use strict’

var a = 2

var obj = {

a: 1,

b: function() {

// console.log(this.a)

console.log(this)

}

}

var c = obj.b

c() // undefined

27. typescript缺点

============================================================================

并不是严格意义的js的超集, 与js不完全兼容, 会报错

更多的限制, 是一种桎梏

有些js第三方库没有dts, 有问题

28. 构造函数实现原理

========================================================================

构造函数中没有显示的创建Object对象, 实际上后台自动创建了

直接给this对象赋值属性和方法, this即指向创建的对象

没有return返回值, 后台自动返回了该对象

// 模拟构造函数实现

var Book = function(name) {

this.name = name;

};

//正常用法

var java = new Book(‘Master Java’);

//使用代码模拟，在非IE浏览器中测试，IE浏览器不支持

var python = {};

python.proto = Book.prototype;

Book.call(python, ‘Master Python’);

29. for in 和 for of区别

=================================================================================

for in遍历数组会遍历到数组原型上的属性和方法, 更适合遍历对象

forEach不支持break, continue, return等

使用for of可以成功遍历数组的值, 而不是索引, 不会遍历原型

for in 可以遍历到myObject的原型方法method,如果不想遍历原型方法和属性的话，可以在循环内部判断一下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性

30… JS实现并发控制:

========================================================================

使用消息队列以及setInterval或promise进行入队和出队

31.promise.finally实现

===============================================================================

Promise.prototype.finally = function (callback) {

let P = this.constructor;

return this.then(

value => P.resolve(callback()).then(() => value),

reason => P.resolve(callback()).then(() => { throw reason })

);

};

32.作用域

=================================================================

执行上下文中还包含作用域链。理解作用域之前，先介绍下作用域。作用域其实可理解为该上下文中声明的 变量和声明的作用范围。可分为 块级作用域 和 函数作用域

特性:

声明提前: 一个声明在函数体内都是可见的, 函数优先于变量

非匿名自执行函数，函数变量为 只读 状态，无法修改

let foo = function() { console.log(1) };

(function foo() {

foo = 10 // 由于foo在函数中只为可读，因此赋值无效

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

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

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

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

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

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

总结

三套“算法宝典”

算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注

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

45fe430.png)

算法刷题LeetCode中文版（为例）

人与人存在很大的不同，我们都拥有各自的目标，在一线城市漂泊的我偶尔也会羡慕在老家踏踏实实开开心心养老的人，但是我深刻知道自己想要的是一年比一年有进步。

最后，我想说的是，无论你现在什么年龄，位于什么城市，拥有什么背景或学历，跟你比较的人永远都是你自己，所以明年的你看看与今年的你是否有差距，不想做咸鱼的人，只能用尽全力去跳跃。祝愿，明年的你会更好！

由于篇幅有限，下篇的面试技术攻克篇只能够展示出部分的面试题，详细完整版以及答案解析，有需要的可以关注

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