中级前端

JavaScript基础

1. 变量声明和函数声明都会提升,函数会提升到变量之前。

  1. var 声明的变量有声明提升,也就是说声明之后会提升到该作用域的顶部
  2. 函数有两种声明方式 函数声明
fun('xgp') // xgp
function fun(name){
console.log(name)
}

函数表达式

f('xgp') // f is not defined
var f = function fun(name){
console.log(name)
}

函数声明有函数提升,函数表达式没有,所以函数表达式声明会报错 函数声明和变量声明的优先级 函数声明 > 变量声明

// 下面输出内容
var chName = function (){
console.log(1)
}
function chName() {
console.log(2)
}
chName()
// 实际运行结果
function chName() { // 函数声明提升到顶部
console.log(2)
}
var chName // 变量声明提升
chName = function (){
console.log(1)
}
// 最后输出结果为1

2.web储存 cookie,sessionStorage,localStorage,indexedDB

名称大小服务端通信过期时间清除
cookie4k左右始终在同源的http请求中携带在设置过期时间之前都有效设置过期时间
sessionStorage5M左右不会自动把数据发给服务器不可设置过期时间,当前浏览器窗口有效关闭浏览器会清除
localStorage5M左右不会自动把数据发给服务器不可设置过期时间,可长期保存手动清除
  1. cookie 诞生时间比较早,为什么会有cookie,因为http是无状态的,客户端端请求后端不知道是哪个用户请求的,这个时候就诞生了cookie,用户登录以后后端生成用户标识, 客户端储存到cookie中,请求中会携带cookie信息,这样就可以分辨是哪个用户了。
  2. html5 sessionStorage(会话缓存),localStorage(本地缓存),indexedDb 出现 为什么会有因为cookie储存的数据较少,只有4k,减少网络传输,提高网站性,浏览器需要储存更多的数据。
  3. sessionStorage,localStorage 相同点:两者都属于浏览器储存,两者都属于同源策略;不同点:两者的失效时间不同,两者的有效范围不同。
  4. indexedDb 减少http的数据传输量,客户端需要储存更多的数据。一方面sessionStorage 与 localStorage 只有5M的大小。另一方面这两个是只能存储字符串的类型,非字符串的话, 使用 JSON.stringfy 压缩,使用的时候用 JSON.parse 进行解压。数据量较大的话,操作速度会满。

3. 浏览器 event loop 事件循环

  1. 首先 javaScript 是单线程
  2. 一个任务完成后执行下一个任务,但是需要 I/O(输入/输出)操作,就会等待时间过长。
  3. 所以将任务分为同步任务和异步任务,异步任务又分为 宏任务( setTimeout,setInterval,http.get等) 和 微任务(promise 的回调)。
  4. 全局代码执行,同步任务直接执行,遇到异步放入 宏任务 与 微任务。
  5. 执行栈为空后,先读取微任务的函数执行,微任务执行完成以后,再执行宏任务里面的函数。
  6. 事件循环(event loop)

4. 原型与原型链

JavaScript规定,每个构造函数都有一个prototype(原型)属性,指向另一个对象,注意这个prototype就是一个对象,这个对象的所有属性和方法,都会被构造函数所拥有。 作用: 我们可以把那些不变的方法,直接定义到prototype上,这样所有对象的实例都可以共享这些方法。

对象都会有一个属性 proto 指向构造函数的 prototype 原型对象,之所以我们可以使用原型对象的属性和方法,因为对象有 proto 原型的存在。

一般情况下,共用属性定义到构造函数里面,共用方法定义到原型对象身上。(定义到构造函数里面,js会开辟新的内存空间来存放,实例化一次开辟一个,实例化两次开辟两个,浪费内存资源)

function Star(uname, age) {
this.uname = uname
this.age = age
}
Star.prototype.sing = function(){
console.log('我会唱歌')
}
const ldh = new Star('刘德华',18)
console.log(ldh.sing) // 我会唱歌

方法查找规则,先查找当前对象有没有 sing 方法,如果有就执行。如果没有,因为有 proto 方法的存在就去构造函数的 prototype(原型对象)里面寻找有没有sing方法。

对象原型 proto 和 构造函数的原型对象 prototype 都有一个 constructor 属性, constructor 属性我们也称为构造函数,因为 constructor 指向的是构造函数本身。 constructor 主要记录对象引用哪个构造函数,它可以让原型对象重新指向原来的构造函数。

高阶函数

高阶函数是对其他函数进行操作的函数,它接收函数作为参数函数作为返回值输出