内联处理程序

前端代码编写者经常遇到的一个尚未描述的非常常见的问题是HTML中内联事件处理程序可见的范围，例如

<button onclick="foo()"></button>

on*属性可以引用的变量范围必须是：

全局（工作内联处理程序几乎总是引用全局变量）文档的属性（例如，作为独立变量的querySelector将指向document.querySelector；罕见）处理程序附加到的元素的属性（如上所述；罕见）

否则，当调用处理程序时，将得到ReferenceError。因此，例如，如果内联处理程序引用了在window.onload或$（function）｛中定义的函数，则引用将失败，因为内联处理程序只能引用全局范围内的变量，而函数不是全局的：

window.addEventListener（'DOMContentLoaded'，（）=>{函数foo（）{console.log（'运行'）；}});<button onclick=“foo（）”>单击</button>

文档的财产和处理程序附加到的元素的财产也可以作为内联处理程序中的独立变量引用，因为内联处理函数是在两个块中调用的，一个用于文档，另一个用于元素。这些处理程序中变量的作用域链非常不直观，并且一个工作的事件处理程序可能需要一个函数是全局的（并且应该避免不必要的全局污染）。

由于内联处理程序内部的作用域链非常奇怪，而且内联处理程序需要全局污染才能工作，并且内联处理程序在传递参数时有时需要丑陋的字符串转义，因此可能更容易避免它们。相反，使用Javascript（如addEventListener）而不是HTML标记附加事件处理程序。

函数foo（）{console.log（'运行'）；}document.querySelector（'.my button'）.addEventListener（'click'，foo）；<button class=“my button”>单击</button>

模块（<script type=“module”>）

另一方面，与在顶层运行的普通＜script＞标记不同，ES6模块内的代码在其自己的私有范围内运行。在普通＜script＞标记顶部定义的变量是全局的，因此您可以在其他＜script＞标签中引用它，如下所示：

<脚本>const foo=“foo”；</script><脚本>console.log（foo）；</script>

但是ES6模块的顶层不是全局的。在ES6模块顶部声明的变量仅在该模块内部可见，除非该变量被显式导出，或者除非它被分配给全局对象的属性。

<script type=“module”>const foo=“foo”；</script><脚本>//无法在此处访问foo，因为其他脚本是模块console.log（foo类型）；</script>

ES6模块的顶层与普通<script>中顶层IIFE内部的顶层类似。模块可以引用任何全局变量，除非模块为其明确设计，否则任何内容都不能引用模块内部的任何内容。

运行代码。希望这能提供一个关于范围界定的想法

Name = 'global data';
document.Name = 'current document data';
(function(window,document){
var Name = 'local data';
var myObj = {
    Name: 'object data',
    f: function(){
        alert(this.Name);
    }
};

myObj.newFun = function(){
    alert(this.Name);
}

function testFun(){
    alert("Window Scope : " + window.Name + 
          "\nLocal Scope : " + Name + 
          "\nObject Scope : " + this.Name + 
          "\nCurrent document Scope : " + document.Name
         );
}


testFun.call(myObj);
})(window,document);

老式JavaScript

传统上，JavaScript实际上只有两种类型的作用域：

全局范围：从应用程序开始，变量在整个应用程序中都是已知的（*）函数作用域：变量在声明它们的函数中是已知的，从函数开始（*）

我不会详细说明这一点，因为已经有许多其他答案可以解释这一差异。

---

现代JavaScript

最新的JavaScript规范现在还允许第三个范围：

块作用域：标识符从其声明的作用域的顶部开始“已知”，但在其声明的行之后才能分配或取消引用（读取）。这一过渡时期被称为“时间死区”

---

如何创建块范围变量？

传统上，您可以这样创建变量：

var myVariable = "Some text";

块范围变量的创建方式如下：

let myVariable = "Some text";

---

那么，功能范围和块范围之间的区别是什么？

要了解功能范围和块范围之间的区别，请考虑以下代码：

// i IS NOT known here
// j IS NOT known here
// k IS known here, but undefined
// l IS NOT known here

function loop(arr) {
    // i IS known here, but undefined
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here

    for( var i = 0; i < arr.length; i++ ) {
        // i IS known here, and has a value
        // j IS NOT known here
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    };

    // i IS known here, and has a value
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here

    for( let j = 0; j < arr.length; j++ ) {
        // i IS known here, and has a value
        // j IS known here, and has a value
        // k IS known here, but has a value only the second time loop is called
        // l IS NOT known here
    };

    // i IS known here, and has a value
    // j IS NOT known here
    // k IS known here, but has a value only the second time loop is called
    // l IS NOT known here
}

loop([1,2,3,4]);

for( var k = 0; k < arr.length; k++ ) {
    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, and has a value
    // l IS NOT known here
};

for( let l = 0; l < arr.length; l++ ) {
    // i IS NOT known here
    // j IS NOT known here
    // k IS known here, and has a value
    // l IS known here, and has a value
};

loop([1,2,3,4]);

// i IS NOT known here
// j IS NOT known here
// k IS known here, and has a value
// l IS NOT known here

在这里，我们可以看到变量j只在first for循环中知道，而在前后都不知道。然而，我们的变量i在整个函数中是已知的。

此外，考虑到块范围的变量在声明之前是未知的，因为它们没有被提升。也不允许在同一块内重新声明同一块范围内的变量。这使得块作用域变量比全局或函数作用域变量更不容易出错，这些变量被提升，在多个声明的情况下不会产生任何错误。

---

现在使用块范围变量安全吗？

今天使用它是否安全取决于您的环境：

如果您正在编写服务器端JavaScript代码（Node.js），则可以安全地使用let语句。如果您正在编写客户端JavaScript代码并使用基于浏览器的转译器（如Traceur或babel standalone），则可以安全地使用let语句，但是您的代码在性能方面可能不是最佳的。如果您正在编写客户端JavaScript代码并使用基于节点的转译器（如traceur shell脚本或Babel），则可以安全地使用let语句。而且，由于您的浏览器将只知道转译的代码，因此性能缺陷应该受到限制。如果您正在编写客户端JavaScript代码，而不使用转译器，则需要考虑浏览器支持。以下是一些根本不支持let的浏览器：Internet explorer 10及以下Firefox 43及以下Safari 9及以下Android浏览器4及以下版本Opera 27及以下Chome 40及以下Opera Mini和黑莓浏览器的任何版本

---

如何跟踪浏览器支持

有关阅读此答案时哪些浏览器支持let语句的最新概述，请参阅“我可以使用”页面。

---

（*）全局和函数范围的变量可以在声明之前初始化和使用，因为JavaScript变量被提升。这意味着声明总是位于范围的顶部。

Javascript使用作用域链为给定函数建立作用域。通常有一个全局范围，每个定义的函数都有自己的嵌套范围。在另一个函数中定义的任何函数都具有与外部函数链接的局部作用域。定义范围的始终是源代码中的位置。

作用域链中的元素基本上是一个带有指向其父作用域指针的Map。

解析变量时，javascript从最内部的范围开始并向外搜索。

内联处理程序

前端代码编写者经常遇到的一个尚未描述的非常常见的问题是HTML中内联事件处理程序可见的范围，例如

<button onclick="foo()"></button>

on*属性可以引用的变量范围必须是：

全局（工作内联处理程序几乎总是引用全局变量）文档的属性（例如，作为独立变量的querySelector将指向document.querySelector；罕见）处理程序附加到的元素的属性（如上所述；罕见）

否则，当调用处理程序时，将得到ReferenceError。因此，例如，如果内联处理程序引用了在window.onload或$（function）｛中定义的函数，则引用将失败，因为内联处理程序只能引用全局范围内的变量，而函数不是全局的：

window.addEventListener（'DOMContentLoaded'，（）=>{函数foo（）{console.log（'运行'）；}});<button onclick=“foo（）”>单击</button>

文档的财产和处理程序附加到的元素的财产也可以作为内联处理程序中的独立变量引用，因为内联处理函数是在两个块中调用的，一个用于文档，另一个用于元素。这些处理程序中变量的作用域链非常不直观，并且一个工作的事件处理程序可能需要一个函数是全局的（并且应该避免不必要的全局污染）。

由于内联处理程序内部的作用域链非常奇怪，而且内联处理程序需要全局污染才能工作，并且内联处理程序在传递参数时有时需要丑陋的字符串转义，因此可能更容易避免它们。相反，使用Javascript（如addEventListener）而不是HTML标记附加事件处理程序。

函数foo（）{console.log（'运行'）；}document.querySelector（'.my button'）.addEventListener（'click'，foo）；<button class=“my button”>单击</button>

模块（<script type=“module”>）

另一方面，与在顶层运行的普通＜script＞标记不同，ES6模块内的代码在其自己的私有范围内运行。在普通＜script＞标记顶部定义的变量是全局的，因此您可以在其他＜script＞标签中引用它，如下所示：

<脚本>const foo=“foo”；</script><脚本>console.log（foo）；</script>

但是ES6模块的顶层不是全局的。在ES6模块顶部声明的变量仅在该模块内部可见，除非该变量被显式导出，或者除非它被分配给全局对象的属性。

<script type=“module”>const foo=“foo”；</script><脚本>//无法在此处访问foo，因为其他脚本是模块console.log（foo类型）；</script>

ES6模块的顶层与普通<script>中顶层IIFE内部的顶层类似。模块可以引用任何全局变量，除非模块为其明确设计，否则任何内容都不能引用模块内部的任何内容。

ES5及更早版本：

Javascript中的变量最初（在ES6之前）是函数范围的。词汇范围这一术语意味着您可以通过“查看”代码来查看变量的范围。

用var关键字声明的每个变量都在函数的作用域内。但是，如果在该函数中声明了其他函数，则这些函数将可以访问外部函数的变量。这称为作用域链。其工作方式如下：

当一个函数试图解析一个变量值时，它首先查看自己的范围。这是函数体，即花括号{}之间的所有内容（除了在此范围内的其他函数内的变量）。如果它在函数体中找不到变量，它将爬上链，查看函数中定义函数的变量范围。这就是词法作用域的含义，我们可以在代码中看到这个函数的定义，因此可以通过查看代码来确定作用域链。

例子：

//全局范围var foo=“全局”；var bar=“全局”；var foobar=“全局”；函数outerFunc（）{//outerFunc范围var foo='outerFunc'；var foobar='outerFunc'；innerFunc（）；函数innerFunc（）{//innerFunc范围var foo='innerFunc'；console.log（foo）；console.log（bar）；console.log（foobar）；}}outerFunc（）；

当我们试图将变量foo、bar和foobar记录到控制台时，会发生以下情况：

我们尝试将foo记录到控制台，foo可以在函数innerFunc本身中找到。因此，foo的值被解析为字符串innerFunc。我们试图将bar记录到控制台，但在函数innerFunc本身中找不到bar。因此，我们需要攀登范围链。我们首先查看定义了函数innerFunc的外部函数。这是outerFunc函数。在outerFunc的作用域中，我们可以找到变量栏，其中包含字符串“outerFun”。在innerFunc中找不到foobar。因此，我们需要将作用域链升级到innerFunc作用域。在这里也找不到它，我们爬到了另一个层次的全局范围（即最外面的范围）。我们在这里找到了保存字符串“global”的变量foobar。如果在攀爬范围链之后没有找到变量，JS引擎将抛出referenceError。

ES6（ES 2015）及以上版本：

词汇范围和范围的概念仍然适用于ES6。然而，引入了一种声明变量的新方法。具体如下：

let：创建块范围变量const：创建一个必须初始化且不能重新分配的块范围变量

var和let/cont之间最大的区别是var是函数范围的，而let/cont是块范围的。下面是一个例子来说明这一点：

let letVar=“全局”；var varVar=“全局”；函数foo（）{if（真）{//用let声明的这个变量的作用域是if块，块作用域设letVar=5；//用let声明的这个变量的作用域是函数块，函数作用域var varVar=10；}console.log（letVar）；console.log（varVar）；}foo（）；

在上面的示例中，letVar记录全局值，因为用let声明的变量是块范围的。它们不再存在于各自的块之外，因此无法在if块之外访问变量。