作用域

Posted 2020-08-31

在js中，可分为全局作用域和局部作用域两种

全局作用域，在浏览器下是window，node是global，可以在运行过程中，任意位置都能访问到。而局部作用域，只有自己内部能访问到。

函数可以创建一个作用域块，在该函数中定义的变量，只有该函数内部能够访问。在函数外部（外部作用域没有声明该变量）时，浏览器会抛出一个 is not defined 错误（错误提示是未赋值的意思，这里应该用未声明更准确）。

同样，声明一个变量会有变量提升的效果，声明会提升到他所属作用域的最前面，而赋值，则会在书写语句时候的位置。

在es6之前，只有函数作用域（catch(e){}e只能在括号内部访问，创建了块级作用域）。es6新增了let，conset的块级作用域。let 和conset会创建一个暂时性死区，他不会带来变量声明提升，并且在同一作用域下，同一个变量名只能使用一次。

函数的作用域属于词法作用域，意思是在词法解析时就已经定好，而不是运行时。

变量的访问是先从函数内部查找，找不到则依次寻找外级作用域，直到找到或者全局作用域下也没找到才停止。

这时候引发一个思考，如果知道某个变量是属于全局作用域，那么我们可不可以直接通过全局作用域来查找，而省掉中间查找的过程，提升速度。比较下面几段代码.

首先我们打开谷歌调试器，在settings里面勾选中console.log 下面的show timestamps；

1.局部变量的访问

(function(){
   var i=0;
   console.log(i)
   while(i<1000000000){
       i++;
   }
console.log(i)
})()

2.作用域查找的全局变量

  var i=0;

(function(){
   console.log(i)
   while(i<1000000000){
       i++;
   }
console.log(i)
})()

3. 通过全局变量查找的变量

  window.i=0;

(function(){
   console.log(window.i)
   while(widnow.i<1000000000){
       window.i++;
   }
console.log(window.i)
})()

比较三次打印时间的间隔，发现1间隔最小，2次之，3最大。

可以看到全局变量的赋值、引用是非常低效。所以我们尽量少用全局变量，通过给html标签声明id也会创建一个id名的全局变量

如果一个局部作用域有两次以上引用全局作用域的变量，我们可以创建一个局部变量保存它，这样无疑会加快速度。

当然这属于微优化，不必刻意去追求，书写的时候多注意点就好，我们应该把精力更多的放在耗时更大的步骤上面

 

以上内容全是自己的一点理解，欢迎各位指出问题，共同进步