首页 > 文章 > web前端 > 对于js作用域的详解

对于js作用域的详解

不言原创: 2018-07-14 17:52:191780浏览

这篇文章主要介绍了关于对js作用域的详解，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

1.ES5中的作用域

for(var i =0;i<10;i++){
 } 
console.log(i)

js这段代码，你觉得会输出什么？答案是10，熟悉java的同学肯定有点诧异，为什么会这样呢？因为js还是不同与java的，在ES5中，只有全局作用域和函数作用域，并没有块作用域，当然我们可以实现块作用域的功能。看下面代码:

(function(){
  for(var i =0;i<10;i++){
   
   } 
})() 
console.log(i)

这种写法叫做立即调用函数表达式（IIFE），不了解自行百度，这其实就创建了一个局部作用域，该作用域声明的变量只有在该块内有效，外部访问不了。这种写法的好处就是可以做到不污染全局变量。

这里还想再提一点，就是在ES5中，变量的声明问题，在ES5中并不是严格，你可以直接采用a=10,来声明一个全局变量。如下：

a=10; 
   console.log(a)

输出10，这里你可以不声明变量就去使用它，其实js帮你做了一件事。它会执行如下代码:

var a=undefined; 
   a=10;
   console.log(a)

你可以试验一下，在函数中也可以做到不用声明变量直接使用，个人觉得这种灵活的做法不是很好。不过在ES6中，已经不推荐不声明变量就去使用的做法了。
那么我们接下来来一点进阶的东西，就是变量提升。（ES5中的概念，ES6中新的用法不会出现变量提升），看代码:

a=10;
 (function(){
    console.log(a) 
    var a=1; 
})();

你猜输出什么？undefined,你答对了吗？迷糊不要紧，我们来看一下什么是变量提升，很简单，其实就是将变量的声明提升到函数的最上面。其实上面的代码最后js在解释的时候会变成这个样子：

var a=undefined;
 a=10;
 (function(){
     var a=undefined;
     console.log(a)
     a=1;
 })();

理解了变量提升是什么意思了吧，其实就是将声明提到了最前面，所以输出的是undefined;

2.ES6中的作用域

由于ES5中存在很多问题，所以在ES6中，用let替换了var的声明，不过为了兼容ES5你还是可以使用以前的var。不过还是建议使用let。
let为js添加了新的作用域就是块作用域。看代码：

for(let i=0;i<10;i++){
 }
 console.log(a)

输出 a is not defined这里，我们就完全可以使用java等语法来理解变量的声明了，而且使用let声明的变量，在声明是不可以使用的。
a=3
let a =10;
alert(a)
将会输出a is not defined,为什么呢？阮一峰的ES6上这样说，只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。ES6明确规定，如果
区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。当然他解释为什么的时候提到了暂时性死区。
.总结（题外话）
因为ES6出现的时间不是很长，所以我们还是会遇到很多ES5的写法和用法，所以了解JS es5 和 es6都很重要，不管是做前端还是后端，都会或多或少接触js，既然接触了，我
们就要对它有深入的了解才行，不能仅仅停留在写function上面，另外前端已经不像以前的了，我还是很看好js的发展的。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

对于js作用域的详解

相关文章