作用域与作用域链

作用域与作用域链

1.作用域

​ 作用域是可访问变量的集合。作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性。

function Fun2() {
    var inVariable = "内层变量2";
}
Fun2();//要先执行这个函数，否则根本不知道里面是啥
console.log(inVariable); // Uncaught ReferenceError: inVariable is not defined

作用域就是一个独立的地盘，让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量，不同作用域下同名变量不会有冲突。

ES6 之前 JavaScript 没有块级作用域,只有全局作用域和函数作用域。ES6 的到来，为我们提供了‘块级作用域’,可通过新增命令 let 和 const 来体现。

两种作用域类型：

• 局部作用域
• 全局作用域

JavaScript 拥有函数作用域：每个函数创建一个新的作用域。

作用域决定了这些变量的可访问性（可见性）。

函数内部定义的变量从函数外部是不可访问的（不可见的）。

JavaScript 变量生命周期

​ 局部变量在函数执行完毕后销毁。

​ 全局变量在页面关闭后销毁。

01.全局作用域

在代码中任何地方都能访问到的对象拥有全局作用域，一般来说以下几种情形拥有全局作用域：

• 最外层函数 和在最外层函数外面定义的变量拥有全局作用域
• 所有末定义直接赋值的变量自动声明为拥有全局作用域
• 所有 window 对象的属性拥有全局作用域

​ 如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。 a在函数内，但是为全局变量。

// 此处可调用 a 变量
function myFunction() {
    a = "gaga";
    // 此处可调用 a 变量
}

弊端：污染全局命名空间, 容易引起命名冲突。

02.局部作用域

变量在函数内声明，变量为局部作用域。

局部变量：只能在函数内部访问。

// 此处不能调用 a 变量
function myFunction() {
    var a = "gaga";
    // 函数内可调用 a 变量
}

注意：块语句（大括号“｛｝”中间的语句），如 if 和 switch 条件语句或 for 和 while 循环语句，不像函数，它们不会创建一个新的作用域。在块语句中定义的变量将保留在它们已经存在的作用域中。

03.块级作用域

块级作用域可通过新增命令 let 和 const 声明，所声明的变量在指定块的作用域外无法被访问。块级作用域在如下情况被创建：

1. 在一个函数内部
2. 在一个代码块（由一对花括号包裹）内部

块级作用域有以下几个特点

• 声明变量不会提升到代码块顶部
  • let/const 声明并不会被提升到当前代码块的顶部，因此你需要手动将 let/const 声明放置到顶部，以便让变量在整个代码块内部可用。
• 禁止重复声明
  • 如果一个标识符已经在代码块内部被定义，那么在此代码块内使用同一个标识符进行 let 声明就会导致抛出错误。如果在嵌套的作用域内使用 let 声明一个同名的新变量，则不会抛出错误。
• 循环中的绑定块作用域的妙用

2.作用域与执行上下文

1.上下文&作用域

每个函数调用都有与之相关的作用域和上下文。从根本上说，范围是基于函数(function-based)而上下文是基于对象(object-based)，

执行上下文：函数每调用一次，都会产生一个新的执行上下文环境。因为不同的调用可能就有不同的参数

function fn(x) {
  console.log(arguments)
  console.log(x)
}
fn(20)
fn(10) // 不同的调用可能有不同的参数

作用域只是一个“地盘”，其中没有变量。变量是通过作用域对应的执行上下文环境中的变量对象来实现的。所以作用域是静态观念的，而执行上下文环境是动态上的，两者并不一样。有闭包存在时，一个作用域存在两个上下文环境也是有的。

同一个作用域下，对同一个函数的不同的调用会产生不同的执行上下文环境，继而产生不同的变量的值，所以，作用域中变量的值是在执行过程中确定的，而作用域是在函数创建时就确定的。

如果要查找一个作用域下某个变量的值，就需要找到这个作用域对应的执行上下文环境，再在其中找到变量的值

1. 区别1

• 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时
• 全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建
• 函数执行上下文环境是在调用函数时, 函数体代码执行之前创建

2. 区别2

• __作用域__是静态的, 只要函数定义好了就一直存在, 且不会再变化
• 上下文环境是动态的, 调用函数时创建, 函数调用结束时上下文环境就会被释放

3. 联系

• 上下文环境(对象)是从属于所在的作用域

• 全局上下文环境==>全局作用域

• 函数上下文环境==>对应的函数使用域

  

3.作用域链

一般情况下，变量取值到 创建 这个变量 的函数的作用域中取值。

但是如果在当前作用域中没有查到值，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

1. 理解

• 多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)
• 查找变量时就是沿着作用域链来查找的

2. 查找一个变量的查找规则

• 在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入2
• 在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入3
• 再次执行2的相同操作, 直到全局作用域, 如果还找不到就抛出找不到的异常

测试题一：

var x=10;
function fn() {  
    console.log(x);//10
}
function show(f) {  
    var x =20
    f()
}
show(fn);

测试题二：

 var fn=function(){
            console.log(fn);
        }
        fn()//输出整个函数

        var obj ={
            fn2:function(){
                // console.log(fn2);
                console.log(this.fn2);
            }
        }
        obj.fn2();//少this报错，找不到fn2

            fn2:function(){
                // console.log(fn2);
                console.log(this.fn2);
            }
        }
        obj.fn2();//少this报错，找不到fn2