Javascript函数作用域

Javascript函数作用域

函数的定义：
函数是计算机编程中非常重要的一个语法结构。那么什么是函数呢？函数指一组可以随时随地运行的代码集合，当他被调用时可重复的去执行这些代码集合。
数学中的函数：
数学中的函数指给定一个数集A,对A施加对应法则f,记作f（A）,得到另一数集B,也就是B=f（A）.那么这个关系式就叫函数关系式,简称函数。
定义函数： JS中创建函数有三种方式：1.函数声明、2.函数表达式、3.函数对象
定义好一个函数后，函数里的内容是不会执行的。当函数被调用的时候，才会执行函数内的程序。
1. 函数声明

> function foo(){
>         console.log(123);
>         console.log(456);
>         console.log(789);
>     }
> 
>     foo();   // 调用函数
>     foo();
>     foo();

2. 函数表达式

var foo = function(){
        console.log(123);
        console.log(456);
        console.log(789);
    };
    foo();

3. 函数对象

var foo = new Function();
    //foo();

函数声明 与 函数表达式的区别？
1.函数声明可以预解析
2.函数表达式可直接调用执行

/* foo();  //函数声明预解析(在当前script块内)

    function foo(){
        console.log(123);
        console.log(456);
        console.log(789);
    } */

    /* foo();     //不具备预解析功能
    var foo = function(){
        console.log(123);
        console.log(456);
        console.log(789);
    }; */

变量预解析：

console.log(a);
    var a = 10;  // 变量预解析 var a = 10;   var a;  a=10;

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

    console.log( a );
    function a(){
     }
    var a;   // 变量预解析要高于函数的预解析

函数的作用域：

作用域：函数作用域与变量作用域。
函数作用域的特点：可以调用到外面的函数 ; 但是调用不到里面的函数。
变量也有作用域：可以调用到外面的变量，但是调用不到里面的变量。
里面能找到外面，但是外面找不到里面。

 function foo(){
        console.log('foo');
        baz();
    }

    function baz(){
        console.log('baz');
    }
    
foo();  //打印结果foo baz

function foo(){
        console.log('foo');
        function baz(){
            console.log('baz');
        }
    }
    
    foo();
    baz(); //打印结果foo       baz函数未定义

 var a = 10;
    function foo(){
        var b = 20;
        console.log(a);
    }
    foo();
    console.log( b ); //打印结果10   b未定义

 function foo(){
        var b = 20;
    }

    function bar(){
        console.log(b);
    }

    foo();
    bar(); //b未定义

var b;
    function foo(){
        b = 20;
    }

    function bar(){
        console.log(b);
    }

    foo();
    bar(); //打印结果20

函数的作用域链：

作用域链 : 变量的查找顺序，就近原则，一层层向外查找。

var a = 10;
    function foo(){
        console.log( a );
        var a = 20;
    }
    foo(); //undefind

 var a = 10;
    function foo(){
        console.log( a );
        a = 20;
    }
    foo(); //10

 var a = 10;
    function foo(a){
        a += 5;
    }
    foo(a);
    console.log(a); //10

 var a = 10;
    function foo(){
        var a = 20;
        bar();
    }
    function bar(){
        console.log(a);
    } 
    foo(); //10

来源：CSDN

作者：Heydong

链接：https://blog.csdn.net/Heydong/article/details/104600295