选项卡闭包，带var和不带var的区别，暂时性死区，栈内存被释放的问题

听花海的双鱼男

于 2022-04-20 20:00:52 发布

阅读量177

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/LYL000305/article/details/124305757

本文深入探讨JavaScript中的选项卡闭包实现，分析带var与不带var声明变量的区别，解释暂时性死区的概念，并讨论栈内存何时会被释放。通过示例代码，阐述了函数内部如何访问外部作用域变量以及闭包的机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选项卡闭包

<body>

<div class="main"id="main">

<ul>

<li class="current">音乐</li>

<li>电视</li>

<li>综艺</li>

</ul>

<div class="current">音乐内容</div>

<div>电视内容</div>

<div>综艺内容</div>

</div>

</body>

<script>

var main = document.getElementById("main");

var lis = main.getElementsByTagName("li");

var divs = main.getElementsByTagName("div");

function fn(index) {

for (let i = 0; i < lis.length; i++) {

lis[i].className = "";

divs[i].className = "";

}

lis[index].className = "current";

divs[index].className = "current";

}

for (let i = 0; i < lis.length; i++) {

lis[i].onclick=(function (){

return function (){

fn(i)

}

})(i)

}

</script>

带var和不带var的区别

/* var 得变量提升，在全局作用域下，他们俩都是在window上添加 */

var a = 100;

b = 200;

var d;

// 判断一个对象有没有该属性

console.log("a"in window)//true

console.log("c"in window)//false

console.log("d"in window)//true

// let const这俩是没有变量提升的都是在声明一个变量

// let可以重复赋值

let num = 100;

// let num = 500;//Identifier 'num' has already been declared

num = 300;

// const声明的变量指针是不能改的

const num2 = 200;

// num2 = 500;//报错 Assignment to constant variable.

// const记得给一个初始值

// const num3;//报错 Missing initializer in const declaration

{

let a = 200;

let b = 300;

const c = 300;

function fn() { }

}

暂时性死区

// typeof 总能保证对任何所给的操作数返回一个字符串。即便是没有声明的标识符，typeof 也能返回 'undefined'。使用 typeof 永远不会抛出错误。

// console.log(typeof a);//'und'

// var a = 300;

// 暂时性死区

// console.log(typeof a);//Cannot access 'a' before initialization

// let a = 200;

let a = 200;

console.log(typeof a);//Cannot access 'a' before initialization

{

let a = 300;

}

ECStack:execution context stack 执行环境栈

Heap：堆

VO(G)：variable object Global 全局变量对象

GO：Global Object 全局对象

AO：activation object 活动对象

栈内存被释放的问题

/* // 全局栈内存页面关闭是会被释放

var x = 100;

// 普通函数一般在被执行后就被会释放

function fn(x) {

console.log(x)

}

fn(1);

var obj = { a: 1 };

obj = null; */

// 不被销毁的情况

function fn() {

return function f() { }

}

var res = fn();

// 暂时不被释放的情况

function fn() {

return function f() { }

}

fn()(); */

// 闭包不是一个很具象的东西，这是一种机制

//闭包让你可以在一个内层函数中访问到其外层函数的作用域。

function fn() {

var a = 100;

return functionf() {

let obj = {}

obj[a] = 'number'

}

fn()

function fn() {

var i = 100;

}

fn()