javascript中的作用域

作用域

一、作用域

作用域就是变量和函数生效的区域或者合集。
对变量而言是其上下文，对函数而言是能被访问的区域。

function myFunction(){
    let inVariable = "函数内部变量"
}
myFunction();//要先执行这个含糊，否则根本不知道里面是啥
console.log(inVariable);//Ucaught ReferenceError: inVariable is not defined 

这个例子中，myFunction内部创建一个inVariable变量，当我们在全局访问这个变量的时候，系统会报错。
这说明我们在全局是无法获取到函数内部的变量（闭包除外）。
一般作用域分成：

• 全局作用域
• 函数作用域
• 块级作用域

1.全局作用域

任何不在函数中，或者是不在大括号中声明的变量，都是在全局作用域下，全局作用域下声明的变量可以在程序的任意位置访问。

//全局变量
var greeting = "Hello World!";
function greet() {
    console.log(greeting);
}
//打印"Hello World!"
greet();

2.函数作用域

函数作用域也叫局部作用域，如果一个变量是在函数内部声明的，它就在一个函数作用域的下面。这些变量只能在函数内部访问，不能在函数以外去访问。

function greet() {
 var greeting = 'Hello World!';
 console.log(greeting);
}
// 打印'Hello World!'
greet();
// 报错：Uncaught ReferenceError: greeting is not defined
console.log(greeting);

在函数内部声明的变量或函数，在函数外部是无法访问的，函数内定义的变量或者方法只是函数作用域。

3.块级作用域

ES6引入了let和const关键字，和var关键字不同，在大括号中使用let和const声明的变量存在于块级作用域中，在大括号之外不能访问这些变量。

{
 // 块级作用域中的变量
 let greeting = 'Hello World!';
 var lang = 'English';
 console.log(greeting); // Prints 'Hello World!'
}
// 变量'English'
console.log(lang);
// 报错：Uncaught ReferenceError: greeting is not defined
console.log(greeting);

二、词法作用域

词法作用域也叫静态作用域，变量被创建时就确定好了，而非执行阶段确定的，也就是写代码的时候就确定了，javascript遵循的就是词法作用域。

var a = 2;
function foo(){
 console.log(a)
}
function bar(){
 var a = 3;
 foo();
}
bar() // 2

因为javascript遵循词法作用域，相同层级的foo和bar时没有办法访问到彼此的块作用域中的变量，所以输出2。

三、作用域链

在javascript中使用一个变量的时候，会从当前作用域开始寻找，如果没有找到，再到上层作用域寻找，以此类推直到找到该变量或者已经到全局作用域，如果仍然找不到，会在全局范围内隐式声明该变量（非严格模式下）或是直接报错。

var sex = '男';
function person() {
 var name = '张三';
 function student() {
 var age = 18;
 console.log(name); // 张三
 console.log(sex); // 男
 }
 student();
 console.log(age); // Uncaught ReferenceError: age is not defined
}
person();

student函数内部属于最内层作用域，找不到name，想上一层作用域person函数内部找到了输出"张三"。
student内部输出sex时找不到，向上一层作用域person函数找，还找不到则继续向上一层作用域全局作用域找，找到了输出"男"。
在person函数内部输出age时找不到，向上一层作用域，即全局作用域找，还是找不到，所以报错。