coffe1891/frontend-hard-mode-interview

《前端内参》，有关于JavaScript、编程范式、设计模式、软件开发的艺术等大前端范畴内的知识分享，旨在帮助前端工程师们夯实技术基础以通过一线互联网企业技术面试。

前端内参

【阅 读 本 书】https://coffe1891.gitbook.io/frontend-hard-mode-interview
【讨论本书】https://github.com/coffe1891/frontend-hard-mode-interview/discussions
【作者微信】GZKXS1891（请注明 “前端内参”）
【QQ交流群】308689488（也可以扫上图二维码）

如果觉得有帮助请点右上角的Star支持我不断更新。

1. 本书较多着笔于深层理论上的论述，辅有代码示例，适合至少三年前端工作经验的朋友阅读。
2. 尽量访问上面的gitbook地址，导航更清晰，图片也不会出现显示错位，并且支持手机模式；
3. 如果书里文章的图片显示不了，开科学上网工具、或者多刷几遍就好。

前端技术日新月异，我也在不断学习，因此疏漏之处在所难免，欢迎朋友随时@提建议，我将及时改进；

前言

如何在Hard模式下通过一线互联网公司的面试？相信很多程序员朋友都有过这个困扰。其实答案很简单：首先应努力成为一个好程序员，然后入职一线互联网公司只是顺路的事。

然后有前端朋友可能会吐槽：“前端知识已经爆炸，今天这个框架明天那个库的，天天有新玩意儿，我实在学不动了！”是的，前端知识早已大爆炸，新东西层出不穷，如果只是靠蛮力一样一样地去学习，那么连笔者我也学不动了 。那怎么办呢？别慌，其实前端学习是有窍门的。本书归纳了前端的核心知识点，如果你能日拱一卒地坚持学习，系统地掌握这些知识点之后，相信很快也能和我一样可以做到以不变应万变，以小变应大变，并对新的前端知识很快地领悟吃透！

→ 更多前言 · 写给有缘人

目录

零、准备Hard模式下的面试

1. 一线互联网公司面试前的准备
   • 一线互联网公司有什么不同？
   • 该公司是做什么的，实力、前景、口碑怎样？
   • 该岗位负责做什么的，岗位所属部门在什么位置，上升空间多大？
   • 准备一份好的简历
   • 不卑不亢、不疾不徐地说话
   • “有什么问题要问我吗”，如何回答？

壹、前端之灵：JavaScript/ECMAScript

1. 你需要知道的新东西
   • 新版 ECMAScript 特性分析
   • JavaScript的未来
2. 核心概念
   • 函数
   • 作用域、执行上下文、作用域链
   • 彻底搞懂 this
   • 深入理解 call、apply、bind
   • 面试时高频问到的“闭包”
   • 原型和原型链
   • 同步和异步，阻塞和非阻塞
   • Event Loop
   • 强大的数组
   • 正则表达式
   • 位操作符与进制转换
   • rest和spread操作符
   • 实现异步非阻塞的任务
   • 模块化开发
3. 其他知识点
   • 深拷贝与浅拷贝
   • JavaScript函数柯里化
   • JavaScript元编程：Proxy与Reflect
   • JavaScript中的进程、线程、协程
4. 浏览器、V8引擎
   • 网页被浏览器绘出来过程是怎样的？
   • 页面重排（Reflow）与重绘（Repaint)
   • DOM、Shadow DOM、Virtual DOM
   • V8引擎是如何工作的
   • V8引擎内存管理和垃圾回收机制
5. 相关后端知识、通信协议、安全
   • 为什么要创造服务器端的javascript—Node.js？
   • 了解TCP、UDP、TLS
   • Http协议几个版本的区别
   • Http和Https的区别在哪里
   • XSS与CSRF攻击
6. 书籍推荐
   • 你读过哪些Javscript书籍 外链

贰、数据结构与算法

1. 面试时高频率出现的算法
   • 十大排序算法未完
   • 链表
   • 单调栈
   • 二叉树的遍历
   • 实战：字节跳动前端面试2道算法题
   • 分治法、动态规划与贪心算法的区别
   • 实战：阿里巴巴前端面试算法题 未完
2. 其他经典算法
   • 尾递归:面试官问你斐波那契数列的时候不要太高兴 外链
3. 好书推荐
   • 《学习JavaScript数据结构与算法》外链

叁、主流框架/库

1. 综合比较
   • jQuery过时了吗？
   • React、Vue和Angular对比
2. React
   • React Hooks究竟是什么？
   • React的性能优化技巧
3. Vue.js
   • Vue.js源码解读：Vue数据响应式原理
   • Vue.js带来的一些新问题以及解决办法探索
4. Angular.js
   • 你真的懂Angular.js吗？
   • Angular.js性能优化要点
5. Flutter
   • 浅谈Flutter给前端研发带来的变化
   • Dart
6. 好书推荐
   • 《深入浅出Vue.js》外链
   • 《深入React技术栈》外链

肆、必会的工具

1. Webpack-自动打包模块工具
   • 深入理解Webpack打包
   • 常用的脚手架
2. API文档管理
   • 用Swagger解决前后端沟通不畅与API调试强依赖的问题
   • Easydoc.xyz
3. IDE-工欲善其事必先利其器
   • 高效使用VSCode的10点建议
   • 适用于前端开发者的优秀VSCode插件
   • Sublime Text

伍、编程范式

1. 面向对象编程（OOP）
   • 面向对象与面向过程有什么区别？
   • 面向对象编程的弊端是什么？
   • 重新认识JavaScript面向对象:继承
   • 彻底搞懂泛型
   • 用JavaScript实现抽象类
   • 用JavaScript实现接口
2. 函数式编程
   • 什么是函数式编程？
   • JavaScript的函数式编程探索
   • Pointfree无参数风格编程 未完
3. 响应式编程
   • 什么是响应式编程？更新中
   • RxJS未完

陆、软件设计的原则

1. 导读：SOLID
   • 单一职责原则
   • 接口隔离原则
   • 开放封闭原则
   • 里氏替换原则
   • 依赖倒置原则
2. 好书推荐
   • 《重构》外链

柒、设计模式和软件工程

1. 十四种经典设计模式
   • 单例模式
   • 策略模式
   • 代理模式
   • 迭代器模式
   • 发布-订阅模式
   • 命令模式
   • 组合模式
   • 模板方法模式
   • 享元模式
   • 职责链模式
   • 中介者模式
   • 装饰者模式
   • 状态模式
   • 适配器模式
2. 浅谈软件工程：MVC、MVP、MVVM
   • MVC的前世今生 未完
   • MVP又是什么？
   • 有了MVC和MVP，为什么还要MVVM？

捌、很有用的网站

1. 中文站-Mozilla大宝库 外链 最全的Web相关参考文档,没有之一
2. 英文站-StackOverflow 外链 掌握了四级英语就能向老外提问交流了,解决疑难杂症必上
3. 中文站-Vue.js手册 外链 手册在手,玩转Vue不愁
4. 英文-Vue资源大全 外链 超级多的资源,总能找到你喜欢的那款

玖、公众号&博客推荐

1. 一线互联网公司官方前端公众号
2. 知名前端人物

拾、后记

1. 成为一个好的程序员远比找份好工作重要
2. 2020年前端技术展望

贡献者

thales-jiang

联系我

https://github.com/coffe1891

对本书有任何疑问，欢迎联系我。

版权许可

本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可，只要保持原作者署名和非商用，您可以自由地阅读、分享、修改本书。

frontend-hard-mode-interview's Issues

关于「组合式继承」 的疑问

文章链接：https://coffe1891.gitbook.io/frontend-hard-mode-interview/5/5.1.3#03-zu-he-shi-ji-cheng
其中描述的组合式继承的缺点->污染这一点，不是很理解，我自己试验了一下，增加了一个子类型，给其原型添加一个方法，其它的子类型并没有共享这个方法。
求作者大大能给点解释😵

1.1.1章rest和spread示例疑问

1.1.1章rest和spread部分的代码示例里面，在声明函数时参数中使用...，被标注为扩展运算符是否是不正确的，因为此处并不是对一个数据进行展开操作，而是表示对象中除了a剩余的数据存入到变量param中，符合rest参数的定义。

function foo({ a, ...param }) {//这里...是扩展运算符
  console.log(a); //>> 1
  console.log(param); //>> {b: 2, c: 3}
}

上面应该还是rest参数，下面在函数调用时使用的...应该才是扩展运算符。

const param = { b: 2, c: 3 };
foo({ a: 1, ...param });  //此处为扩展运算符

for..of 并不适用遍历 类数组对象

壹2.9.2的总结这里
总结：
for..of适用遍历数组/类数组对象/字符串/map/set等拥有迭代器对象的集合，但是不能遍历对象，因为没有迭代器对象。遍历对象通常用for...in来遍历对象的键名。

请问大佬，博客里的文章注明出处后可以转载吗？

开启严格模式

壹.2.1.4 匿名函数真的没办法实现递归调用自身吗？有！

最后一句话：在代码任意行输入字符串"use strict"可以开启严格模式。

深拷贝那里有点问题

深拷贝那里，不能直接将result赋值为空对象，这样会破坏对象的原型链，而且修改了对象。
可以改成这样：

result = new obj.constructor()

利用原对象的构造函数生成新对象，然后用for in 循环给对象添加属性。不过这种方式也存在弊端，如果构造函数需要接收参数做计算，就会导致执行时报错。

本书可以加pwa吗？

本书可以加pwa吗，平常没事用手机看看

2.1.2 函数声明提升 代码示例错误反馈

2.1.2 函数声明提升 中的代码

虽然此章节为重点讲解函数声明的提升，但是因为log了func1，所以此处建议进行修改

//函数的声明形态
function func0() {
return 0;
}
console.log(func0); //>> func0() {return 0}
console.log(func1); //>> undefined
//函数的表达式形态
var func1 = function() {
return 1;
};

应该为

//变量声明提升
var func1
//函数的声明形态
function func0() {
return 0;
}
console.log(func0); //>> func0() {return 0}
console.log(func1); //>> undefined
//函数的表达式形态
func1 = function() {
return 1;
};

有的文说如图的时候一张图都没有呢

如图

还没有链接的一些标题是不是以后再补充

TLS 1.2启用时间应该是2008年吧

如图
https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/1/1.5.2.md

注释错误

1.1.3 ES8新特性 >> Object.values() / Object.entries

代码注释不通顺

纠正一下

函数作用域 那里b 应该是未定义，不应该是undefined

火钳留名

感觉会火 怎么说

关于原型式继承的是不是写的有问题

选择性无视

敲碗 Typescript

3.2.2 柯里化第二段代码并没有直接输出结果

这一节的第二段代码，运行sum(4)后似乎并没有直接输出结果。与第一段代码的区别很小，引入了 length 但是后续并没有使用，可能是写错了？

原型的三者关系图是不是画错了

fix: binary tree image error

fix: binary tree image error

https://coffe1891.gitbook.io/frontend-hard-mode-interview/2/2.1.4

solution

https://github.com/coffe1891/frontend-hard-mode-interview/blob/master/2/2.1.4.md

- ![](http://img.blog.csdn.net/20150204101904649?%3C/p%3E%3Cp%3Ewatermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvTXlfSm9icw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)

+ ![image](https://user-images.githubusercontent.com/7291672/152813666-575ead67-af69-46a6-8cba-dc12060cabb5.png)