变量作用域与内存(下)

js 变量作用域与内存(下)

🙌执行上下文与作用域

执行上下文简称上下文,变量或者函数的上下文决定了它可以访问那些数据,每一个上下文都有一个活动对象,上下文定义的变量和函数都存在与这个对象上,全局上下文也就是 window 对象。var 定义的全局变量都会成功为 window 的对象的属性和方法。当前上下文在其说有的代码执行完毕后会被销毁。

每一个函数都有自己的上下文,当执行流进入函数的时候,函数的上下文会被添加到全局上下文的栈上面,当这个函数执行完毕后,函数上下文会被弹出栈并将控制权返回给之前执行的上下文

在上下文中的代码执行中,会创建变量的作用域链,他决定了各级上下文中的代码在访问变量和函数的时序,作用域链中的下一个变量对象来自包含上一个上下文,在下一个对象来自下一个包含上下文,全局上下文始终是最后有一个变量对象

javascript 复制代码
var color = "blue";

function changecolor(){

  let authercolor = "red";

  function swapcolor(){

    let temp = authercolor;

    authercolor = color;

    color = temp;

    //这里可以访问 color authercolor temp

  }

  //这个可以访问 color authercolor 但访问不到temp

  swapcolor()

}

changecolor() //这里只能访问color

👀作用域链增强

上下文只要有全局上下文和函数上下文两种,某些语句会导致在作用域链的前端临时添加一个上下文,这个上下文在执行后会被删除

  • try/catch语句的catch块

  • with语句

对于with语句来说,会向作用域链最前端添加指定对象;对于catch而言会创建一个新的变量对象;

javascript 复制代码
function buildUrl(){

  let qs = "xxxxxx";

  with(location){

    var url = href + qs;

  }

  return val;

}

在上的代码中,with语句中会发现href没有定义,实际上with语句传入了lacaltion对象,而href变量也就是location.href,with语句在作用域链的前端添加了location活动对象,在变量搜索的时候会从location对象开始。在with语句var定义的变量会被当作函数上下文中的变量

✨js的垃圾回收

javascript是使用垃圾回收语言,也就是在代码的运行时环境管理内存,在js中只要是使用标记清理法来释放内存,垃圾回收在各个浏览器的执行频率有所不同

#####🐱‍👤🐱‍👤 标记清理法

当垃圾回收程序运行的时候会标记内存中的所有变量(标记的方法有很多种),然后在消除所有在上下文中的变量的标记,剩下的带有标记的变量就是需要清除的变量,因为在此之后的上下文已经访问不到了这些变量。

🐱‍🐉🐱‍🐉内存管理

🤔😆合理解除对象的引用
javascript 复制代码
function create(name){

  let lacal = new Object();

  lacal.name = name;

  return local

}

let global = create("xxx");

global = null

在上面的代码中,在调用函数create后赋值给global变量中,当这个变量不会再使用的时候需要将变量赋值为null,这样不会让变量立马被回收,但是会加快变量的回收时机,因为垃圾回收程序是周期性的执行,当垃圾回收程序代码检测到这个变量的引用为空,就会回收此变量。

🤳使用const和let声明

因为const 与 let 声明是块级作用域,函数上下文执行完毕后,会加快垃圾会回收,这与上一个的思路是一样的

🎂🌹内存泄露

意外的声明过多的全局变量容易造成内存泄漏,导致垃圾回收程序无法回收变量,

定时器一直引用着外部变量,导致变量无法回收

javascript 复制代码
let name = "djy";

setInterval(()=>{

  cansol.log(name);

},100);

上面代码定时器内部一直引用着name,垃圾回收程序不会回收name变量

闭包:

javascript 复制代码
let outher = function(){

  let name = "djy";

  return function(){

    return name;

}

这会导致分配给name的内存泄露,创建了一个内部闭包,只要auther函数存在就不能清理name,因为闭包一直引用着它

✨✨✨✨总结✨✨✨

对js的内存管理,变量更加熟悉,强力推荐这本书《javascript 高级程序设计》

相关推荐
轻口味1 小时前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王1 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发2 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
真滴book理喻5 小时前
Vue(四)
前端·javascript·vue.js
程序员_三木5 小时前
Three.js入门-Raycaster鼠标拾取详解与应用
开发语言·javascript·计算机外设·webgl·three.js
开心工作室_kaic7 小时前
springboot476基于vue篮球联盟管理系统(论文+源码)_kaic
前端·javascript·vue.js
川石教育7 小时前
Vue前端开发-缓存优化
前端·javascript·vue.js·缓存·前端框架·vue·数据缓存
搏博7 小时前
使用Vue创建前后端分离项目的过程(前端部分)
前端·javascript·vue.js
温轻舟7 小时前
前端开发 之 12个鼠标交互特效上【附完整源码】
开发语言·前端·javascript·css·html·交互·温轻舟
web135085886357 小时前
2024-05-18 前端模块化开发——ESModule模块化
开发语言·前端·javascript