JavaScript变量做用域(Variable Scope)和闭包(closure)的基础知识

时间 2019-11-08

标签 javascript 变量 variable scope 闭包 closure 基础知识栏目 JavaScript 繁體版

原文原文链接

　　在这篇文章中，我会试图讲解JavaScript变量的做用域和声明提高，以及许多隐隐藏的陷阱。为了确保咱们不会碰到不可预见的问题，咱们必须真正理解这些概念。web

　　基本定义

　　做用范围是个“木桶”，里面装着变量。变量能够是局部或者全局性的，但在子范围中定义的变量是能够访问父范围的，这一点可能会形成一些困扰。编程

　　在JavaScript中使用"var"关键字声明变量。一旦在父范围宣声明，就会做为各自子范围的一部分。即在本地范围内有效，但本地定义的变量不可在全局范围内访问。数组

　　让咱们来看一个例子。执行下面的代码，你会发现，你能打印出全局范围定义的变量，而全局范围没法访问局部范围定义的变量。浏览器

 
        var 
        agloballydefinedvariable =  
        'Global' 
        ; 
       
        function 
        someFunction() { 
       
        var 
        alocallydefinedvariable =  
        'Local' 
        ; 
       
        console.log(agloballydefinedvariable);  
        // Global 
       
        } 
       
        console.log(alocallydefinedvariable); 
       
        // Uncaught ReferenceError: alocallydefinedvariable is not defined

　　做用域链(Scope Chain)

　　若是你忘记使用“var”的关键字来定义局部变量，事情可能会变得很是糟糕。为何会这样呢？由于JavaScript会首先在父做用域内搜索一个未定义的变量，而后再到全局范围进行搜索。在下面的例子中，JavaScript知道变量“a”是someFunction（）的一个局部变量，在anotherFunction（）中它会寻找它父做用域内的变量。闭包

 
        var 
        a = 1; 
       
        function 
        someFunction() { 
       
        var 
        a = 2; 
       
        function 
        anotherFunction() { 
       
        console.log(a);  
        // 2 
       
        } 
       
        }

　　更复杂的状况是，在下面的例子中，一个变量没有在函数中进行做用域的限定。编程语言

　　在someFunction（）中调用了一个没有在函数范围内定义的变量 a=2; 这个分配将覆盖全局变量的值。函数式编程

　　后续引用将指向全局变量的值。函数

 
        var 
        a = 1; 
       
        function 
        someFunction() { 
       
        a = 2; 
       
        function 
        anotherFunction() { 
       
        console.log(a);  
        // 2 
       
        } 
       
        anotherFunction(); 
       
        } 
       
        someFunction(); 
       
        console.log(a);  
        //2

　　声明提高（Hoisting）

　　Hoisting会将在函数或全局范围内的变量“提高”到顶部声明的过程。请记住，只有量声明被提高了，初始化或值分配等等没有变化，在下面的代码的状况下，第一个输出将不肯定...但它不会抛出任何错误。spa

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

　　Window范围

　　在基于浏览器的JavaScript中，定义为全局范围内的一部分变量其实是所谓的“Window”对象的属性。这里的Window是指“容器”。换句话说，当你想从一个局部范围修改全局定义的变量，你也能够经过修改Window对象的相应的属性来作到这一点。code

 
        var 
        myVariable =  
        'Global Scope' 
        ; 
       
        function 
        myFunction() { 
       
        window.myVariable =  
        'Something Else' 
        ; 
       
        } 
       
        myFunction(); 
       
        console.log(myVariable);  
        // Something Else

　　可能的陷阱

　　若是在函数内部分配一个之前没有被定义的变量的值，它会自动成为全局范围的一部分。

 
        function 
        myFunction() { 
       
        myVariable =  
        'JavaScript' 
        ; 
       
        } 
       
        myFunction(); 
       
        console.log(myVariable);  
        //JavaScript

　　若是你不当心忘记定义了一个局部变量，你的整个脚本可能会运行混乱。

 
        var 
        city= 
        "LA" 
        ; 
       
        var 
        team= 
        "Lakers" 
        ; 
       
        function 
        showTeam () { 
       
        console.log (city +  
        " " 
        + team); 
       
        } 
       
        function 
        showCity () { 
       
        city =  
        "Moscow" 
        ; 
       
        console.log (city); 
       
        } 
       
        showTeam();  
        // LA Lakers 
       
        showCity();  
        // Moscow 
       
        /* 
       
        由于上面的 showCity 中定义的变量 "city" 没有使用 "var" 声明，全局范围内的变量被覆盖了。所以会致使下面的问题 :) 
       
        */ 
       
        showTeam();  
        // Moscow Lakers

　　内部函数依然会存储局部变量即便它的外部函数已经执行完毕

　　这听起来可能有点怪异，看一个例子，就会更容易理解。解释这一点的最好办法是使用一个简单的“Hello World”的例子。

 
        function 
        greet(who) { 
       
        var 
        iterations = 0; 
       
        return 
        function 
        () { 
       
        console.log(++iterations); 
       
        return 
        'Hello ' 
        + who +  
        '!' 
        ; 
       
        }; 
       
        } 
       
        var 
        greeting = greet( 
        'World' 
        ); 
       
        console.log( 
        typeof 
        greeting);  
        //function 
       
        console.log( 
        typeof 
        greeting());  
        //string & iterations=1 
       
        console.log(greeting());  
        //Hello World! & iterations=2 
       
        console.log(greeting( 
        "Universe" 
        ));  
        //Hello World! & iterations=3 
       
        //输出不是 Hello Universe. world 被闭包封闭保存了起来

　　注* 在计算机科学中，闭包（Closure）是词法闭包（Lexical Closure）的简称，是引用了自由变量的函数。这个被引用的自由变量将和这个函数一同存在，即便已经离开了创造它的环境也不例外。因此，有另外一种说法认为闭包是由函数和与其相关的引用环境组合而成的实体。闭包在运行时能够有多个实例，不一样的引用环境和相同的函数组合能够产生不一样的实例。

　　闭包的概念出现于60年代，最先实现闭包的程序语言是Scheme。以后，闭包被普遍使用于函数式编程语言如ML语言和LISP。不少命令式程序语言也开始支持闭包。引自：Wiki

　　正如你上面看到的那样，greet() 返回一个被称为“闭包”的内部函数。闭包除了会储存他们本身本地做用域内部的封闭起来的函数和变量外，还会存储外部引用的参数。参看咱们的具体例子，参数 who 和 iterations 就是被闭包封闭起来的局部变量。

　　这意味着，greeting已成为一个包含who和iterations在内的函数（直接返回的匿名函数）。- 它不会再次执行greet，它只会执行闭包并且返回结果永远是 "Hello World!"。