重要知识点归纳_回流读写分离-CSDN博客

一、ES6 新语法：
1.let / const
和ES5的区别：
–>let不存在变量提升机制
–>let不允许重复声明变量
–>在全局作用域中的window和let创造的变量没关系
–>typeof 未被声明的变量不是undefined 而是会报错（暂时性死区）
–>let 会形成块级作用域（类似于私有作用域，大部分大括号都会形成块级作用域）
…
2.解构赋值
3.“…”拓展、剩余、展开运算符
4.箭头函数
和普通函数的区别：
–>没有arguments参数列表，用…arg来代替
–>没有this主体，箭头函数的this继承上下文
5.ES6中的模板字符串
6.Promise（async / await）
7.class（ES6中创建类的）
8.interator ( for of 循环)
9.Map / Set
…

二、重排（回流）和重绘读写分离
浏览器渲染一个页面的时候是按照“先创建DOM树->在加载CSS->生成渲染树 RENDERTREE->把渲染树交给浏览器（GPU）进行绘制"，如果后期我们修改了元素的样式（但是没有改变大小和位置），浏览器会把当前元素重新生成渲染树，然后重新渲染，这个机制是重绘，但是一旦元素的位置或者大小等发生改变，浏览器就要从DOM树重新计算渲染，这个机制是回流（重排），不论是重排还是重绘都非常的消耗性能。
在我的以前项目中，我特意的重视了这个问题，尽量减少操作DOM引发的回流和重绘问题，常用的解决方案：
1.需要动态向页面追加元素的时候，基于文档碎片或者先把需要增加的所有元素拼接成字符串，最后统一进行增加
2.读写分离：把统一修改样式都放到一起执行，新版浏览器都有一个自己检测的机制，如果发现下面紧挨着的操作也是修改元素的样式，会把所有修改的事先存起来，直到遇到非修改样式的操作，会把之前存储的统一执行，引发一次回流和重绘。
当然还有一些其它的办法，这些是最常注意的，我认为减少DOM的回流重绘是非常重要的性能优化手段之一。

三、对于面向对象的理解
【JS本身就是面向对象编程的】
JS本身就是基于面向对象（OOP）编程思想开发出来的语言，我们学习JS就是在学习JS中的类和实例，例如：
数组是Array的实例、对象是object的实例、函数是Function的实例…，在这些内置类的原型上有很多公共的属性和方法，这些方法可以被实例调用，我们学习JS就是学习这些方法…
【面向对象真实项目的应用】
平时的业务逻辑开发，我没有刻意使用类的方式来做，只有在一些组件或者插件封装的时候才会基于构造函数和原型链使用类和实例完成，例如：我之前封装过一些 TAB页卡、轮播图、模态框、表单验证等插件，就是这样处理的。
【面向对象中的一些语法和特点】
所谓面向对象就是基于class或者function创建一个类，执行的时候new执行创建一个实例，这样实例就可以调取类上提供的方法，想要基于面向对象进行插件封装，必须掌握关于类的继承、封装和多态，封装就是提取公共的方法、JS中没有严格意义的多态，不能进行方法的重写，常用的继承方式有很多，例如：原型继承、ca11继承、寄生组合继承、es6中的继承等，有些方式会存在一些问题，我项目中后来都是基于class中的extend实现继承的。

四、this的汇总
this：当前方法执行的主体（谁执行的这个方法，那么this就是谁，所以this和当前方法在哪创建的或者在哪里执行的都没有必然的关系）
1.给元素的某个事件绑定方法，方法中的THIS都是当前操作的元素本身
//document.body.οnclick=function（）｛
this:body;
｝
2.函数执行，看函数前面是否有点，有的话，点前面是谁THIS就是谁，没有点，THIS是WINDOW（在Js的严格模式下，没有点THIS是UNDEFINED）
let obj={
name：‘哈哈’，
fn:fn}；
fn（）；//=>this:window
obj.fn（）；//=>this:obj
3.构造函数执行，方法中的this一般都是当前类的实例
let Fn=function（）{
this.x=100；//=>this:f
}；
let f=new Fn

4.箭头函数中没有自己的THIS，THIS是上下文中的THIS
    let obj={

fn: function (){
//this: obj

setTimeout(()=>{
//this: obj },1000);
};
obj. fn();

5.在小括号表达式中，会影响THIS的指向
      let obj={

fn:function（）{
console.log（this）；
}；
obj.fn（）；//=>this:obj；
（12，obj.fn）（）；//=>this:window

6.使用call/apply/bind可以改变this指向
    fn.call（obj）；//=>this:obj
    fn.call（12）；//=>this：12 
    fn.call（）；//=>this:window 
    非严格模式下call/apply/bind第一个参数不写或者写nul1和undefined，this都是window，严格模式下写谁this就是谁，不写是undefined 。

五、对作用域链和原型链的理解
【作用域链】
函数执行会形成一个私有作用域，形参和当前私有作用域中声明的变量都是私有变量，当前的私有作用域有自我保护机制，私有变量和外界是没有关系的，但是如果私有作用域中遇到一个非私有变量，则向它的上级作用域查找，如果还不是上级作用域私有，则继续向上查找，一直找到window为止。这种变量一层层向上查找的机制就是“作用域链机制”。
【原型链】
它也是一种查找机制，实例首先在自己的私有属性中进行属性的查找，如果不是私有属性，基于__proto__向所属类的原型上进行查找，如果在找不到，则继续基于__proto__向上查找，一直找到object.prototype为止。

六、数组扁平化（利用递归）
多维数组–>一维数组 let ary = [ 1 ,[2 , [ 3, [ 4, 5] ] ] ,6 ]; —> [ 1,2,3,4,5,6 ];
把得到的当前每一项循环，假如是 "object"类的话继续扔进去循环。

七、面向对象：类的继承封装和多态
【封装】
把实现一个功能的JS代码进行封装，主要目的是“低耦合高内聚”
【多态】
重载：方法名相同，参数的个数或者类型不同，此时名字相同叫做方法的重载（后台语言中的重载），JS中不存在重载的。
重写：子类重写父类的方法
【继承】
子类继承父类的属性和方法
1.原型继承
A.prototype = new B();
2.call继承
把父类A作为普通函数执行，让A中的THIS变为B的实例，相当于给B的实例增加了一些属性和方法
3.寄生组合继承
4.ES6中的class类实现继承
…
八、jQuery原理
九、对于闭包的理解