内联处理程序

前端代码编写者经常遇到的一个尚未描述的非常常见的问题是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内部的顶层类似。模块可以引用任何全局变量，除非模块为其明确设计，否则任何内容都不能引用模块内部的任何内容。

试试这个奇怪的例子。在下面的示例中，如果a是一个初始化为0的数字，您将看到0，然后是1。除了a是一个对象，javascript将向f1传递a的指针，而不是它的副本。结果是两次都得到相同的警报。

var a = new Date();
function f1(b)
{
    b.setDate(b.getDate()+1);
    alert(b.getDate());
}
f1(a);
alert(a.getDate());

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

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中，有两种类型的作用域：

本地范围全局范围

Below函数有一个局部范围变量carName。这个变量不能从函数外部访问。

function myFunction() {
    var carName = "Volvo";
    alert(carName);
    // code here can use carName
}

Below Class有一个全局范围变量carName。这个变量可以从类中的任何地方访问。

class {

    var carName = " Volvo";

    // code here can use carName

    function myFunction() {
        alert(carName);
        // code here can use carName 
    }
}

在“Javascript 1.7”（Mozilla对Javascript的扩展）中，还可以使用let语句声明块范围变量：

 var a = 4;
 let (a = 3) {
   alert(a); // 3
 }
 alert(a);   // 4

（函数foo（）｛console.log（foo）｝）（）；console.log（foo类型）；//未定义，因为“foo”的作用域是它自己的表达式//但是，像这样（函数foo（）{console.log（'1:'，foo）//函数foofoo=100console.log（'2:'，foo）//函数foo，不是100，为什么？})()