1.作用域简介
- 作用域最大的用处:隔离变量,不同作用域下同名变量之间不会有冲突
- 作用域中变量值在执行过程中产生,而作用域却是在函数创建时确定了
2.变量提升
在ES6
还没有出来的之前,JavaScript只有全局作用域和函数作用域,并没有块级作用域(一个{ }即为一个块级作用域)的概念。无论var声明的变量处于当前作用域的第几行,都会被提升到作用域的头部,并被初始化为undefined——变量提升
console.log(global); // undefined
var global = 'global';
console.log(global) // global
function fn() {
console.log(a); // undefined
var a = 10;
console.log(a); // 10
}
fn();
之所以会有上面的结果是因为JS的变量提升导致的,上面的代码其实是这样执行的:
var global; // 变量提升,全局作用域范围内,此时只是声明并没有赋值
console.log(global); // undefined
global = 'global'; // 此时才赋值
console.log(global) // global
function fn() {
var a; // 变量提升,函数作用域范围内,此时只是声明并没有赋值
console.log(a); // undefined
a = 10; // 此时才赋值
console.log(a); // 10
}
fn();
3.函数提升
在JS中创建函数有两种方式函数声明和函数字面量,只有函数声明存在函数提升。
console.log(fn1); // function fn1 () {console.log('我是fn1');}
console.log(fn2); // undefined
function fn1 () {console.log('我是fn1');}
var fn2 = function() {
console.log('我是fn2');
}
因为函数声明的函数提升,导致上面的结果,上面的代码其实是这么执行的:
function fn1() {
console.log('我是fn1');
}
var fn2;
console.log(fn1); // function fn1 () {console.log('我是fn1')}
console.log(fn2); // undefined
fn2 = function () {
console.log('我是fn2');
}
console.log('***', fn2); // fn2 = function() {console.log('我是fn2');}
4.强化训练
(function () {
console.log(a); // undefined
a = 'aaa';
var a = 'bbb';
console.log(a); // 'bbb'
}
)()