深入理解JS中的变量作用域

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Candy_yl/article/details/79470772

作用域

变量的作用域有两种:全局变量和局部变量。

全局变量

最外层函数定义的变量拥有全局作用域,即对任何内部函数来说,都是可以访问的:
    var n=10;
  function f1(){
    console.log(n);
  }
  f1(); // 输出10,说明全局变量n在函数内部被读取

局部变量

局部变量:在函数内部声明的变量。函数内部的变量,外部无法读取。
 function f1(){
    var n=10;
  }
  console.log(n); // 没有定义,说明函数内部的变量,外部无法读取。

ES5中作用域

for(var i =0;i<10;i++){

}
console.log(i)

js这段代码,你觉得会输出什么?答案是10,在ES5中,只有全局作用域和函数作用域,并没有块作用域,当然我们可以实现块作用域的功能。看下面代码:

(function(){
for(var i =0;i<10;i++){

}
})()
console.log(i)

答案是1,这种写法叫做立即调用函数表达式(IIFE),这其实就创建了一个局部作用域,该作用域声明的变量只有在该块内有效,外部访问不了。这种写法的好处就是可以做到不污染全局变量。
这里还想再提一点,就是在ES5中,变量的声明问题,在ES5中并不是严格,你可以直接采用a=10,来声明一个全局变量。 如下:

a=10;
console.log(a)

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

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

那么我们接下来来一点进阶的东西,就是变量提升。(ES5中的概念,ES6中新的用法不会出现变量提升),看代码:

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

上面代码输出什么呢?我们来分析一下:

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

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

ES6中的作用域

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

输出 a is not defined这里,而且使用let声明的变量,在声明是不可以使用的。

a=3
let a =10;
alert(a)

将会输出a is not defined,为什么呢?阮一峰的ES6上这样说,只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

var a, b;

(function () {
    console.log(a);// undefined
    console.log(b);// undefined

    var a = b = 0;// (1)

    console.log(a);// 0
    console.log(b);// 0
})();

console.log('window', a);// window undefined
console.log('window', b);// window 0

猜你喜欢

转载自blog.csdn.net/Candy_yl/article/details/79470772