闭包?作用域?数据储存?还有多少你不知道的

290 阅读3分钟

闭包

  • 当一个嵌套的内部函数引用了外部函数的变量时,就产生了闭包
  • 闭包就是指包含被引用变量(函数)的对象
  • 闭包存在于嵌套的内部函数中

产生闭包的条件

  1. 函数嵌套
  2. 内部函数引用外部函数的变量
  3. 执行内部函数定义,要调用外部函数,不用调用内部函数

注:当包含闭包的函数对象(外部函数)成为垃圾对象时,为null,闭包死亡闭包的作用

  1. 使函数内部的变量,即局部变量,在函数执行完后,任然存活于内存中(延长了局部变量的生命周期)
  2. 让函数外部能够操作(读写)函数内部的数据(变量/函数)

队列和栈

  • 队列是:先进先出 左右两边是通的
  • 栈是:后进先出 ,只有一个口,类似于将东西叠放在纸盒

全局执行上下文只有一个,就是window 执行上下文,栈底一定是window,因为最先进来,引起执行上下文(预处理)的的原因

  1. 进入时的 window
  2. 调用函数时,执行上下文就是将变量提升,函数提升,调用函数时,函数里有可能有声明变量n+1个执行上下文 ,n 是指调用函数的次数1window先执行变量提升,再执行函数提升,提升完了,变量再赋值

作用域和作用域链

  • 作用域 是n+1 n 是指定义的函数的个数, 1 指全局作用域
  • 作用域链 嵌套的作用域 由内向外,由下向上,当前作用域找不到就向外找

e.key 可以知道按下键的名字 e.keyCode 知道按键的编码
arguments实参列表 一个伪数组

一些你想知道的小问题

什么是对象?

对象是 保存多个数据的容器;多个数据的封装体

为什么用对象?

统一管理多个数据

什么是函数?

实现特定功能的N条语句的封装体

为什么用函数?

提高代码复用,便于阅读和交流

  • location.href 可读可修改赋值 读到的是当前完整的URL地址
  • location.search 得到的是地址中包含?以及?以后的数据

例如:

//A页面的表单提交地址是B页面,方式为GET提交
//在B页面
console.log(location.search) //?uname=张三
location.hash  //哈希值, 能够获取网址  符号#以及后面的值  
console.log(location.hash)// #one
location.reload() //重新加载刷新页面,如果传了参数 true  则为强制刷新

关于数据的储存

  1. 会话存储 window.sessionStorage
  2. 本地存储 window.localStorage

window.sessionStorage打开浏览器F12 Application 可以看到 key 和 value

  1. 生命周期为关闭浏览器窗口
  2. 在同一个窗口(页面)下数据可以共享
  3. 以键值对的形式存储使用

存储数据:

sessionStorage.setltem(key, value)  // sessionStorage.setltem('键名', '键值') 

获取数据︰

sessionStorage.getltem(key)

删除数据︰(单个删)

sessionStorage.removeltem(key)

删除所有数据︰

sessionStorage.clear()

window.localStorage打开浏览器F12 Application 可以看到 key 和 value

  1. 生命周期为永久,除非手动删除
  2. 在同一个窗口(页面)下数据可以共享
  3. 以键值对的形式存储使用

其中复杂数据类型,例如对象,不能直接存,要不然显示出来{object Object},看不到详细信息,需要转化为JSON格式字符串才能存储, JSON.stringify(复杂数据类型) 将复杂对象转化为 JSON字符串

let obja = {
     "uname": "张三",
      "age": 18,
      "address": "北京"
}
sessionStorage.setltem('obj', JSON.stringify(obja)) //才能存到详细信息
localStorage.getltem('obj') //这条数据是字符串类型,不是对象,不能直接使用需要转化为对象
JSON.parse(JSON字符串)
JSON.parse(localStorage.getltem('obj'))

重绘不一定引起回流(重排),回流一定会重绘

  • 回流就是改变了页面布局,尺寸位置,需要重新解读html结构 ////房屋结构
  • 重绘就是只改变了背景颜色这种,重新加载一下该部分的css即可 //// 墙壁颜色
  • 浏览器执行过程,先回流渲染出布局,然后重绘,最后显示出来