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

Posted 2020-10-10 君无药

一、 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);
}
}

 

 

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

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);
}

 

 

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

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

 

 

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)
}
}