落魄前端，整理给自己的前端知识体系复习大纲（下篇）

前言

首先，感谢一些同行们对上篇的肯定。

其次，文章标题为"大纲"，只是笔者，整理给自己的一个复习大纲。

也许内容并不深入，因为文章的标题与定义就是大纲，并没指望一篇文章，可以教会提到的对应的知识点。无论哪个知识点，一个原型链最基础的东西，都可进行深挖，大神都可以扯上几万字，也未必能让所有人看懂，培训机构上万的学费，也未必敢说一句包你懂，何况笔者只是一个免费的大纲汇总呢？本文仅是大纲而已。大家哪个知识点不熟悉，应该学会自己查漏补缺，自己学习着去深入。

也许错别字，也许知识点有误，因为时间紧迫，精力有限，能力也有限，多多包涵，也欢迎您的指出，大家一起进步。

下篇，不像上篇，很多都是一个开放性的答案，也因个人时间原因，故只提供一个简介，或者第三方链接。

大纲

本章一共有两篇：

上篇主要为html，css，js，es6，浏览器等基础知识。
下篇主要为手写api，网络编程基础，设计模式基础，源码指引，框架复习指引等。
其中，该文为下篇，上篇链接为：juejin.im/post/686771…

三.巩固前端基建

本章重点，提供的知识点的归类，以及重点。具体的知识点不做多余的介绍。（如果对知识点不熟悉，建议重点突击补充一下。）

在职前端开发，如果你也想学习前端开发技术，可以加入我组建的前端学习交流裙：851 231 348 
也可以关注我的微信公众号：【前端留学生】自己根据多年来的开发经验总结录制的
一套web前端精讲视频和学习方法，以及一些前端学习手册，前端面试题，端开发工具，
PDF文档书籍教程，无偿分享给大家。需要的话都可以自行来获取下载。

1）加深巩固篇

1.前端去重的方法有哪些？

看过一篇文章，里边有十二种，可以参考：segmentfault.com/a/119000001…
但是内容感觉很多重复，以及有点为重复而重复。笔者简单提及一下自己脑袋里可行的去重方法（关键字思维，代码太多了暂不提供）：

1.利用Set，自带数组去重功能。也是ES6最实用的方法
2.利用Map，
3.for for splice/del
4.indexOf
5.sort
6.includes
7.hasOwnProperty
8.filter
9.递归

2.前端异步的方案有哪些？

1）Promise(可看上篇的解释)
2）generator(可看上篇的解释)
3）async/await
4）事件发布/监听模式(可看后续的设计模式，属于发布订阅模式，代表作EventBus)

async 和 await 相比直接使用 Promise 来说，优势在于处理 then 的调用链，能够更清晰准确的写出代码。缺点在于滥用 await 可能会导致性能问题，因为 await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。

3.前端网络请求有哪些？

ajax, fetch, axios。
一句简单的语句来概括的话，ajax因为不支持promise给淘汰，从而有了fetch，然后fetch缺陷多，不支持对异常捕捉，不支持监听进度条，cookies不友好等等。所以，axios当今浪潮。

有兴趣了解，推荐：juejin.im/post/684490…

4.前端定时器有哪些？

异步编程当然少不了定时器了，常见的定时器函数有 setTimeout、setInterval、requestAnimationFrame。我们先来讲讲最常用的setTimeout，很多人认为 setTimeout 是延时多久，那就应该是多久后执行。

其实这个观点是错误的，因为 JS 是单线程执行的，如果前面的代码影响了性能，就会导致 setTimeout 不会按期执行。当然了，我们可以通过代码去修正 setTimeout，从而使定时器相对准确

首先 requestAnimationFrame 自带函数节流功能，基本可以保证在 16.6 毫秒内只执行一次（不掉帧的情况下），并且该函数的延时效果是精确的，没有其他定时器时间不准的问题，当然你也可以通过该函数来实现 setTimeout。

5.前端创建对象有哪几种方式？
该知识点只做汇总提示，不做具体分析。请各自查询资料查漏补缺。

1)var obj = new Object();

2)var obj = { name: ‘小明’ }

3)工厂模式

	function createObj(name){
   
var o = new Object();
o.name = name;
o.fun = function(){
   
}
return o;
}

4)构造函数

function TestObj(name){
   
    this.name = name;
}

5)原型创建

function TestObj(){
   }
        Person.prototype.name = '小明';
};

6)构造函数 + 原型创建

7)class写法
6.前端的继承方式有哪些？

1.原型链继承

本质是重写了对象。
缺点：
1）对象实例共享所有继承的属性和方法
2）不能传递参数

2.构造函数继承

在子类构造函数的内部调用超类型构造函数。使用apply()和call() 方法
缺点：
1）函数复用性不高 ，每个实例都是重新实例化构造函数,不存在共享属性
2）只能继承实例上的属性，原型上的方法不可见

3.组合继承

本质：原型链　＋　构造函数
Parent.call(this) new Parent()避免了上述的缺点，常用。
优点：可传参，不会与父类引用属性共享
缺点：继承父类函数的时候调用了父类构造函数，导致子类的原型上多了不需要的父类属性，存在内存上的浪费。

4.原型式继承

实现本质：object（）函数对传入其中的对象执行了一次浅复制

5.寄生式继承

借用构造函数来继承属性，通过原型链的混成形式来继承方法

6.寄生组合

高效率只调用了一次构造函数，集寄生式继承和组合继承的优点于一身，是实现基于类型继承的最有效方式。
就是将父类的原型赋值给了子类，并且将构造函数设置为子类，这样既解决了无用的父类属性问题
Parent.call + Object.create（）

详细可参考：juejin.im/post/684490…

7.前端代码的复用有哪几种方式？

该知识点只做汇总提示，不做具体分析。请各自查询资料查漏补缺。

1）函数封装
2）继承
3）复制extend
4）混入mixin
5）借用apply/call

2）手写api

此部分，废话不多说，直接给对应的代码！如果还有其他重要手写代码，留言笔者会考虑补充。

有源码不理解的朋友们，可自行查询资料，或留意关注笔者的解说： juejin.im/post/686940…

1.new

function createThis( proto ){
   
    var obj = new Object;
    obj.__proto__ = proto.prototype;
    let [ constructor,  ...args] = [ ...arguments ];
    let result = constructor.apply( obj, args );
    return typeof result === 'object' ? result : obj;
}

2.apply/call/bind

    Function.prototype.wzApply = function (context) {
   
        const thisContext = context ? context : windows;
        thisContext.fn = this;
        var result = null;
        if (arguments[1]) {
   
            result = thisContex