JS中的作用域以及全局变量的问题

时间:2022-03-14 06:09:27
一、 JS中的作用域

1、全局变量:函数外声明的变量,称为全部变量
 局部变量:函数内部使用var声明的变量,称为局部变量

在JS中,只有函数作用域,没有块级作用域!!!也就是说,if/for等有{}的结构体,并不能具备自己的作用域。

所以,函数外部不能访问函数内部局部变量(私有属性)。因为,函数内部的变量,在函数执行完毕以后,就会被释放掉
2、使用闭包,可以访问函数的私有变量!
JS中,提供了一种“闭包”的概念:在函数内部,定义一个子函数,子函数可以访问父函数的私有便利。可以在子函数中进行操作,最后将子函数通过return返回

function func1(){
var num = 1;
function func2(){
return num;
}
return func2;
}

var num = func1()();

console.log(num);

 

3、闭包的作用:
①可以在函数外部访问函数的私有变量
②让函数内部的变量可以始终存在于内存中,不会再函数调用完成后立即释放。

function func1(){
var num = 1;
function func2(){
return num;
}
return func2;
}

var num = func1()();

console.log(num);

 结果为1

 

二、 全局变量的问题

 

【错误原因!!】
代码从上自下,执行完毕后,li的onclick还没有触发,for循环已经转完!
而for循环没有自己的作用域!所以循环5次,用的是同一个全局变量i!也就是在for循环转完后,这个全局变量已经变成了5,那么在怎点li,点第几个都会是5

var lis = document.getElementsByTagName("li");
for(var i=0; i<lis.length;i++){
lis[i].onclick
= function(){
alert(i);
}
}

 JS中的作用域以及全局变量的问题

 

有三种办法解决上述问题:

1、【使用闭包解决上述问题】
解决关键:函数具有自己的作用域!!在for循环转一次,创建一个自执行函数。在美国自执行函数中,都有自己独立的i,而不会被释放掉。
所以for循环转完以后,创建的5个自执行函数的作用域中,分别储存了5个不同的i变量,也就解决了问题

var lis = document.getElementsByTagName("li");
for(var i=0; i<lis.length;i++){
!function(i){
lis[i].onclick
= function(){
alert(i);
}
}(i);
}

 JS中的作用域以及全局变量的问题

 

2、【使用let解决】
解决原理:let具有自己的块级作用域,所以for循环转一次,创建一个块级作用域,思路与闭包相同

var lis = document.getElementsByTagName("li");
for(let i=0; i<lis.length;i++){
lis[i].onclick
= function(){
alert(i);
}
}

 JS中的作用域以及全局变量的问题

 

3、【使用this解决】
解决原理:出错的原则在于全局变量i在多次循环后被污染。那么在点击事件中,就可以不使用i变量,而用this代替lis[i],这样也就不会出现错误!

var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
lis[i].onclick
= function(){
console.log(
this)
}
}

 JS中的作用域以及全局变量的问题