学习总结

position定位

static默认值

relative相对定位，相对它原本在文档流中的位置而进行的偏移，没有脱离文档流

absolute绝对定位，根据上一有定位的元素的border进行定位，会脱离文档流

fixed固定定位，与absolute基本相同，但是参考对象是浏览器视窗

sticky粘性定位，依赖于用户的滚动，然后固定在某一位置

inherit，从父级元素继承

CSS选择器优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

JS new操作符

1.创建一个空对象

2.链接到原型

3.绑定this指向，执行构造函数

4.返回对象

自己实现new函数

        function mnew(fc){
            var obj={};
            obj.__proto__ = fc.prototype;
            // Object.setPrototypeOf(obj,fc.prototype);//设置obj的原型
            fc.call(obj);
            return obj;
        }
        function Person(){
            this.age = 20;
        }
        Person.prototype.male = 'man';
        var p = mnew(Person);
        console.log(p)
        //1.创建一个空对象
        //2.让obj链接到原型
        //3.绑定this指向，指行构造函数
        //4.返回对象

MVVM模式

MVVM即 Model-View-ViewModel

model可以理解为数据、view可以理解为DOM,而ViewModel就是负责model和view之间的联系，来实现双向绑定

MVC模式

MVC模式代表 Model-View-Controller(模型，视图，控制器)

model 数据模型，提供要展示的数据，包含数据和行为

view 负责进行模型的展示，也就视图，界面

controller 接收用户请求，委托给模型进行处理，处理完毕之后把返回的数据返回给视图，由视图负责展示

Vue生命周期

Vue实例从开始创建、初始化数据、编译模板、挂载Dom和渲染、更新和渲染、卸载等一系列过程，这是Vue的生命周期

Vue生命周期里的八个生命周期钩子函数

beforeCreat()创建前

created() 创建

beforeMount() 挂载前

mounted() 挂载

beforeupdate() 更改前

updated() 更改

beforeDestroy() 销毁前

destroy() 销毁

面向过程和面向对象

面向过程

面向过程是一种以事件为中心的编程思想，编程的时候把解决问题的步骤分析处理，然后用函数将这些步骤实现，在一步一步的具体步骤中再按顺序调用。

面向过程就好比是做一份蛋炒饭，先想做蛋炒饭第一步需要干什么，放点什么，然后一步一步的去完成。

面向对象

面向对象是一种系统中一切事物皆为对象的编程思想。

用做盖浇饭来解释，当做盖浇饭时，我们先把菜和饭分别做好，这时菜和饭就是两个不同的对象，然后需要什么口味的盖浇饭再将什么菜加入饭中就可以了，这样就可以很大程度的方便做出不同口味的盖浇饭。

垃圾回收

垃圾回收的两种方法

1.标记清除

当一个变量进入执行环境时，就将这个变量标记为进入幻境，当变量离开环境时，就标记为离开环境。被标记为离开环境得变量就会在垃圾回收器运行时被回收。

2.引用计数

引用计数就是跟踪并记录每个值被引用的次数。当声明了一个变量并将一个引用类型赋值给该变量时，这个值得引用次数就是1，如果这个变量引用了别的值，那么初始得值得引用次数就减1，当引用次数变为0时，垃圾收集器运行时就会回收它。

引用计数的缺点：因为每次都要遍历所有的变量，所以效率低下。

造成内存泄漏的原因

1.全局变量引起的内存泄漏，主要时是在函数中未声明直接赋值的情况。

2.闭包引起的内存泄漏，因为闭包会存在一直被引用的情况，所以不会被回收。

3.dom清空或者删除时，事件未清除导致的内存泄漏。

4.子元素存在引用引起的内存泄漏。当子元素被引用时，父元素无法被清除。

闭包

什么是闭包：闭包是指能够访问另一个函数作用域的的变量的函数。

JS三大特性

1.封装，封装就是当需要隐藏一些公共方法和属性时，就可以将这些属性和方法封装起来，从外部进行调用。

2.继承，继承就是当多个方法（对象）存在相同的属性和方法时，就把这些相同的属性和方法提取到一个公共的方法中，使用prototype去继承该方法。

3.多态，多态就是在执行同一操作但作用于不同对象时，返回不同的结果。

BFC

BFC直译为块级格式化上下文，是一个独立的渲染区域，并且有一定的布局规则。

如：BFC区域不会与浮动的盒子重叠，BFC是一个独立的容器，不会影响到外面，计算BFC高度时浮动元素也会参与计算。

触发BFC的条件：

1.float的值不是none

2.position的值为flex和absolute

3.display值为inline-block、flex、table-cell、inline-flex等

4.overflow值不为visible的元素

对象的分类

在JavaScript中，对象分为三类

1.宿主对象(BOM、DOM)

2.原生对象(EMCAScript)

3.自定义对象

数组去重（四种方法）

        //数组去重
        var arr=[2,5,4,3,1,2,10,2,2,4,6,9,8,7,2,2,2];
        console.log(arr)
        //1.
        var ar1=[...new Set(arr)];
        console.log(ar1)
        //2.
        var ar2 = [];
        for(var i = 0 ; i < arr.length ; i++){
            if(ar2.indexOf(arr[i])==-1){
                ar2.push(arr[i])
            }
        }
        console.log(ar2)
        //3.
        for(var m = 0 ; m < arr.length ; m++){
            for(var n = m+1 ; n < arr.length ; n++){
                if(arr[m]==arr[n]){
                    arr.splice(n,1);
                    n--;
                }
            }
        }
        console.log(arr)
        //4.
        arr=[2,5,4,3,1,2,10,2,2,4,6,9,8,7,2,2,2];
        var arr3 = [];
        for(var j = 0 ; j < arr.length ; j ++){
            if(arr3.includes(arr[j])==false){
                arr3.push(arr[j])
            }
        }
        console.log(arr3)

indexOf()查找数组中有没有这个元素

splice()从第几个元素开始截取几个元素

includes()查找数组中有没有这个元素

join()和split()

        //split和join
        //split()用于将字符串分割为数组，参与为以什么为间隔分割
        //join()用于将数组转换为字符串，参数为分隔符，如果不写默认为逗号
        var str = "1654313543513";
        console.log(str)
        var arr = str.split("");
        console.log(arr);
        var str2 = arr.join("");
        console.log(str2)

call()和apply()

call:调用一个对象的一个方法，用另一个对象替换当前对象。

如： B.call(A,arg1,arg2) 即A对象调用B对象的方法

apply:调用一个对象的一个方法，用另一个对象替换当前对象

如 A.apply(B,arguments)

不同之处在于，call可以传递多个参数，而apply只能传两个参数，新的this对象和一个数组

数组增删合并

合并：ar1.concat(ar2)

删除 shift，从头部开始删除，改变原数组，返回被删除的元素

​ pop,从尾部开始删除，改变原数组，返回被删除的元素

也可以用splice方法，splice()第一个参数为开始的索引，第二个参数为替换几个值，第三个值为替换成什么，当第三个值为空时就成了删除。

截取字符串

splice()

substring()

两者的区别是,substring不接受负数参数，两者的返回值都是被截取的值。

        //字符串截取
        var a = '1324351351354131';
        var a1 = a.slice(3);//4351351354131
        console.log(a1)
        console.log(a);
        var a2 = a.slice(-3);//131
        console.log(a2)

事件绑定

事件绑定有两种方法，一种是普通的添加事件，如 onclick 还有一种是事件监听 addEventListener

用普通的添加事件不支持为同一目标添加多个事件，最下面的事件会覆盖上面的。而用事件监听可以。

普通的添加事件使用 click = null 来取消事件

事件监听使用removeEventListener()取消绑定事件

事件监听不支持低版本ie

DOM事件流

1.事件捕获

2.事件处理

3.事件冒泡

阻止冒泡使用 stopPropagation()

事件委托

var ul = document.getElementsByTagName("ul")[0];
        ul.addEventListener('click',function(e){
            if(e.target.tagName == 'LI'){ //这里获取到的tagName是大写
                console.log(e.target.innerHTML);
            }
        })

重绘和重排

重绘：一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，如改变某个颜色的背景等。

重排：一个元素的大小发生了改变，且因为它大小的改变也影响到了其他元素的大小和位置发生了改变，这个时候就会引起重绘。

重绘不一定引起重排，重排一定引起重绘

如何减少重绘和重排:

1.不要一条一条的修改DOM样式，尽量使用类的替换

2.不要把DOM节点的属性值放在一个循环中当成变量

3.不要使用table布局

4.不要在布局信息改变的时候做查询，会导致渲染队列强制刷新。

clientWidth,clientHeight,offsetWidth,offsetHeight,scrollWidth,scrollHeigh

clientWidth,clientHeight为可见区域的大小

offsetWidth,offsetHeight为当前元素的大小

scrollWidth,scrollHeigh包括没看见的，总之就是整个页面的大小。

注意:JS在获取这些属性时会引起页面的重排，所以，如果要多次使用这些值，应该将他们存在变量中。

对象合并

1.Obj.assign()

可以把任意多个自身的可枚举的属性拷贝给目标对象，然后返回目标对象。

        var obj1={
            name:"saoge",
            age:"20"
        }
        var obj2={
            hobby:"game",
            height:"180"
        }
        var obj3 = Object.assign(obj1,obj2);
        console.log(obj3)

2.循环

        var obj1={
            name:"saoge",
            age:"20"
        }
        var obj2={
            hobby:"game",
            height:"180"
        }
        // var obj3 = Object.assign(obj1,obj2);
        // console.log(obj3)
        for(var i in obj1){
            if(obj1.hasOwnProperty(i) == true){ //确定是自有属性
                obj2[i]=obj1[i];  
            }
        }
        console.log(obj2)

for..of 和 for in

for in 用来遍历对象的键名或者来遍历数组的索引

for of 用来遍历数组的元素。不能遍历对象

深拷贝和浅拷贝

浅拷贝

如果是基本类型，浅拷贝拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址，无论哪一个对象改变了这个地址中的数据，都会影响到另一个对象。

深拷贝

深拷贝就是将一个对象从内存中完整的拷贝一份出来，在内存中新开辟一个内存空间来保存新对象，这样两个对象的更改都不会影响另一个对象。

简单深拷贝的实现

        var obj1={
            a:2,
            b:5
        }
        var obj2={}
        obj2.a=obj1.a;
        obj2.b=obj1.b;
        console.log(obj2)//{a:2,b:5}
        obj2.a=10;
        console.log(obj1); //{a:2,b:5}
        console.log(obj2); //{a:10,b:5}

JSON.stringify()和JSON.parse()实现深拷贝

        var obj1={
            name:'骚哥',
            age:18
        }
        var str = JSON.stringify(obj1);
        var obj2 = JSON.parse(str);
        obj1.age = 22;
        console.log(obj1);//{name:"骚哥",age:22}
        console.log(obj2);//{name:"骚哥",age:18}

注意点：

如果值中含有函数，undefined,symbol无法拷贝

无法拷贝不可枚举的属性，无法拷贝原型链

拷贝Data引用类型会变成字符串

拷贝RegExp引用类型会变成空对象

对象中含有NaN,Infinity 结果会变为Null

无法拷贝对象的循环应用

        var obj1={
            name:'骚哥',
            age:18,
            say:function(){
                console.log('我是骚哥')
            }
        }
        var str = JSON.stringify(obj1);
        var obj2 = JSON.parse(str);
        obj1.age = 22;
        console.log(obj1);//{name:"骚哥",age:22,say:f} 注意，这里say()中引用的内容没有被拷贝过来
        console.log(obj2);//{name:"骚哥",age:18}
        obj2.say(); //obj2.say is not a function 报错

自定义函数实现能够拷贝引用对象的深拷贝

        var obj1={
            name:'骚哥',
            age:18,
            say:function(){
                console.log('我是骚哥')
            }
        }
        function clone(obj){
            var newObj = {};
            for(var key in obj){
                newObj[key] = obj[key]
            }
            return newObj;
        }
        clone(obj1.say()); //我是骚哥

学习心得

老师讲的很细致，学到框架就有很多原理性的东西需要深入探究，需要自己多下功夫。