JS 作用域总结

1.什么是作用域?

变量的作用范围

2.全局作用域

• 直接编写在script标签中的代码,都在全局作用域
• 全局作用域在页面打开时创建,在页面关闭时销毁
• 在全局作用域中有一个全局对象window代表浏览器的一个窗口,由浏览器创建,可以直接使用
• 在全局作用域中创建的变量都会作为window对象的属性保存

     var a=1;
    // 这两种用法相同,但是如果没有声明a变量,直接使用a会报错,使用window.a会显示undefined
    console.log(window.a); 
    console.log(a);

• 在全局作用域中,创建的函数都会作为window对象的方法保存
• 全局作用域中的变量都是全局变量,在页面的任意位置都可以访问到

2.1变量的声明提前

使用var关键字声明的变量,会在所有的代码执行之前被声明(没有被赋值),但是如果声明变量前不使用var关键字,则变量不会被提前声明

2.2函数的声明提前

• 使用函数声明形式创建的函数function函数名(){},它会在所有代码执行之前就被创建,所以可以在函数声明前来调用函数
• 使用函数表达式创建的函数,不会被提前创建,所以不能在声明前调用

    //fun1正常调用,变量fun2使用了var关键字会被提前声明,但是在调用fun2()时,变量fun2并未被赋值,所以会出错
    fun1();
    fun2();
    function fun1() {
        console.log("我是一个函数");
    }
    var fun2 = function(){
        console.log("我也是一个函数");
    }

运行结果:

3.函数作用域

• 调用函数时创建函数作用域,函数执行完毕后,函数作用域销毁
• 每调用一次函数就会创建一个函数作用域,它们之间是相互独立的
• 在函数作用域中可以访问到全局作用域中的变量
• 在全局作用域中无法访问到函数作用域的变量
• 当在函数作用域中操作一个变量时,它会首先在自身作用域中寻找,如果有就直接使用,如果没有,则向上一级寻找(就近原则),直到找到全局作用域,如果全局作用域依然没有找到,则报错
• 在函数中想要访问全局的变量可以利用window对象
• 在函数作用域中也有声明提前的特性
• 使用var关键字声明的变量,会在函数所有代码执行之前被声明
• 函数嵌套中函数声明也会在外层函数中所有代码执行之前被执行
• 在函数中不使用var声明的变量都会成为全局变量
• 在函数中定义形参就相当于在函数作用域中声明了变量

例题

 	var a = 123;
    function fun() {
        console.log(a);
    }
    fun();

  	var a = 123;
    function fun() {
        // 函数作用域中有a,此时a被声明但是没有复制,所以输出undefined
        console.log(a);
        var a=456;
    }
    fun();
    // 输出全局作用域中的a=123
    console.log(a);

    var a = 123;
    function fun() {
        // 函数作用域中没有a,向上一级找,所以输出123
        console.log(a);
        // 没有使用var关键字,所以这里是全局作用域中的a,将a重新赋值为456
        a=456;
    }
    fun();
    // 输出全局作用域中的a=456
    console.log(a);

	var a = 123;
    function fun(a) {
        //   这里的形参相当于声明了a 但是没有赋值,所以输出undefined
        console.log(a);
        // 这里修改的是局部变量的a,全局变量的a的值并未被更新
        a = 456;
    }
    fun();
    //    输出全局变量的a=123
    console.log(a);

    var a = 123;
    function fun(a) {
    // 输出传进来的a 123
        console.log(a);
    //    修改的是局部变量a
        a = 456;
    }
    fun(123);
//    全局变量a未被更新 输出a=23
    console.log(a);