JS知识整理

199 阅读5分钟

一、数据类型

数据类型:
基本:undefined, null, string, number ,boolean, symbol(ES6)
引用数据类型:object, array, function(统称为object)

判断数据类型方法:
    a. typeof
     typeof null 返回类型错误,返回object
     引用类型,除了function返回function类型外,其余均返回object
    a. toString
    toString()是Object的原型方法 返回格式[object Xxx]
    使用方式:Object.prototype.toString.call(1)

深浅拷贝:
浅拷贝     Object.assign()  (ES6)
深拷贝      JSON.parse(JSON.stringify(obj))   /   浅拷贝 + 递归

二、作用域

变量声明提升(ES6出来之后,这块就没啥用了)

作用域链
函数的嵌套形成作用域的层级关系

闭包
原理:作用域链

三、原型和继承

创建对象的方式:
    a. {}
    b. new Object()
    c. Object.create({})

JS实现一个类:
构造函数法
语法糖class(ES6)

原型链:遍历一个实例的属性时,先遍历实例对象上的属性,再遍历它的原型对象,一直遍历到Object
任何一个类(函数)都有原型对象,原型对象至少有两个属性(constructorprotoconstructor指向函数本身,proto指向父类原型对象
函数上有一个prototype属性,指向原型对象,通过它可以访问原型对象
函数的实例可以直接访问原型对象(因为实例上有proto指向构造函数的原型对象)

JS实现继承:
构造函数绑定:使用callapply,将父对象的构造函数绑定在子对象上
实例继承:将子对象的prototype指向父对象的一个实例
原型继承:将子对象的prototype指向父对象的prototype
extends(ES6)

四、new 和 this

new 操作符步骤:
首先是创建实例对象{}
this变量引用该对象,同时还继承了构造函数的原型
其次属性和方法被加入到this引用的对象中
并且新创建的对象由this所引用,最后隐式的返回this

this的理解:
this总是指向函数的直接调用者
如果有new关键字,this指向new出来的实例对象
在事件中,this指向触发这个事件的对象
IE下attachEvent中this总是指向全局对象Window
箭头函数中,函数体内的this对象,就是定义时,所在作用域的对象,而不是使用时所在的作用域对象

五、apply、call、bind

改变函数体内部this的指向
bind返回对应函数,apply、call是立即调用
bind和call传入参数列表
apply传入数组

六、数据处理

数组去重:
    a. 遍历数组法:新建临时数组,遍历当前数组,然后indexOf判断是否存在,push到临时数组,返回
    b. 数组下标法:新建临时数组,遍历当前数组,然后indexOf判断下标是否是第一次出现
    c. 排序后相邻去除法:先排序,然后在临时数组里放入第一个值,遍历当前数组,每个值与临时数组里的最后一个值比较,不相等就push
    d. new Set()去重(ES6)
    e. 嵌套for循环:嵌套循环,然后splice去重
    f. Array.filter():利用indexOf,判断当前数组中第一个索引==当前索引值

数组排序:

递归求和:

计算数组各项的重复次数:

七、Event Loop

宏任务/微任务:
宏任务:当前调用栈中执行的任务
script全部代码、setTimeout、setInterval、setImmediate、I/O、UI Rendering
微任务:当前(此次事件循环中)宏任务执行完,在下一个宏任务开始之前需要执行的任务
Process.nextTick(Node独有)、Promise、MutationObserver
不同类型的任务会进入对应的Event Queue,宏任务中的事件放在callback queue中,由事件触发线程维护;微任务的事件放在微任务队列中,由js引擎线程维护

理解event loop:

八、浏览器页面渲染过程

过程:
    a. 浏览器解析html源码,然后穿件一个dom树。并行请求css/image/js在dom树中
    b. 浏览器解析css代码,计算出最终样式数据,构建cssom树
    c. dom树+cssom树 -->渲染树(rendering tree)跟dom树有点像,但有区别
    d. 将渲染书绘制到页面上

九、浏览器缓存

a. 浏览器在加载资源时,先根据这个资源的一些http header判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务器。比如某个css文件,如果浏览器在加载它所在的网页时,这个css文件的缓存配置命中了强缓存,浏览器就直接从缓存中加载这个css,连请求都不会发送到网页所在服务器
b. 当强缓存没有命中的时候,浏览器一定会发送一个请求到服务器,通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存,如果协商缓存命中,服务器会将这个请求返回,但是不会返回这个资源的数据,而是告诉客户端可以直接从缓存中加载这个资源,于是浏览器就又会从自己的缓存中去加载这个资源
c. 强缓存与协商缓存的共同点是:如果命中,都是从客户端缓存中加载资源,而不是从服务器加载资源数据;区别是:强缓存不发请求到服务器,协商缓存会发请求到服务器
d. 当协商缓存也没有命中的时候,浏览器直接从服务器加载资源数据

强缓存:利用Expires或者cache-control
协商缓存:利用last-modified,if-modified-since,ETag或者If-None-Match