JavaScript 高级特性 做用域详解

JavaScript是一种应用很是普遍的语言，其也有一些自身特色和优点，本文重在讲述其做用域机制以及闭包，会从一些实例来探讨其机理。

做用域在JavaScript程序员平常使用中有不一样的含义，以下所示：

• this绑定的值；
• this绑定的值定义的执行上下文；
• 一个变量的“生命周期”；
• 变量的值解析方案，或词法绑定。

下面将讲诉JavaScript做用域概念，由此引出变量值解析方案的通常想法，最后再探讨JavaScript里闭包这一重要知识点。

1.全局做用域

全部浏览器都支持 window 对象，它表示浏览器窗口，JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。因此，全局变量是 window 对象的属性，全局函数是 window 对象的方法，甚至 HTML DOM 的 document 也是 window 对象的属性之一。

全局变量是JavaScript里生命周期（一个变量多长时间内保持必定的值）最长的变量，其将跨越整个程序，能够被程序中的任何函数方法访问。

在全局下声明的变量都会在window对象下，都在全局做用域中，咱们能够经过window对象访问，也能够直接访问。

1 var name = "小kk";
2 console.log(window.name); // 输出:小kk
3 console.log(name); // 输出:小kk

在JS中任何位置，没有使用var关键字声明的变量也都是全局变量。

function fun() {
    name = "小kk";
    alert(name);
}

console.log(name); // 输出:小kk

全局变量存在于整个函数的生命周期中，然而其在全局范围内很容易被篡改，咱们在使用全局变量时必定要当心，尽可能不要使用全局变量。在函数内部声明变量没有使用var也会产生全局变量，会为咱们形成一些混乱，好比变量覆盖等。因此，咱们在声明变量的任什么时候候最好都要带上var。

全局变量存在于程序的整个生命周期，但并非经过其引用咱们必定能够访问到全局变量。

2.词法做用域

词法做用域：函数在定义它们的做用域里运行，而不是在执行它们的做用域里运行。也就是说词法做用域取决于源码，经过静态分析就能肯定，所以词法做用域也叫作静态做用域。with和eval除外，因此只能说JS的做用域机制很是接近词法做用域（Lexical scope）。词法做用域也能够理解为一个变量的可见性，及其文本表述的模拟值。

var name = "global";

function fun() {
    var name = "小kk";
    return name;
}

console.log(fun()); // 输出:小kk
console.log(name); // 输出:global

在一般状况下，变量的查询从最近接的绑定上下文开始，向外部逐渐扩展，直到查询到第一个绑定，一旦完成查找就结束搜索。就像上例，先查找离它最近的name="jeri"，查询完成后就结束了，将第一个获取的值做为变量的值。

3.动态做用域

在编程实践中，最容易低估和过分滥用的概念就是动态做用域，由于不多有语言支持这种方式为绑定解析方案。

动态做用域与词法做用域相对而言的，不一样于词法做用域在定义时肯定，动态做用域在执行时肯定，其生存周期到代码片断执行为止。动态变量存在于动态做用域中，任何给定的绑定的值，在肯定调用其函数以前，都是不可知的。

在代码执行时，对应的做用域链经常是保持静态的。然而当遇到with语句、call方法、apply方法和try-catch中的catch时，会改变做用域链的。以with为例，在遇到with语句时，会将传入的对象属性做为局部变量来显示，使其便于访问，也就是说把一个新的对象添加到了做用域链的顶端，这样必然影响对局部标志符的解析。当with语句执行完毕后，会把做用域链恢复到原始状态。实例以下：

var name = "global";

// 使用with以前
console.log(name); // 输出:global

with({name:"小kk"}){
    console.log(name); // 输出:小kk
}

// 使用with以后，做用域链恢复
console.log(name); // 输出:global

在做用域链中有动态做用域时，this引用也会变得更加复杂，再也不指向第一次建立时的上下文，而是由调用者肯定。好比在使用apply或call方法时，传入它们的第一个参数就是被引用的对象。实例以下：

function globalThis() {
    console.log(this);
}

globalThis(); // 输出:Window {document: document,external: Object…}
globalThis.call({name:"jeri"}); // 输出:Object {name: "jeri"}
globalThis.apply({name:"jeri"},[]); // 输出:Object {name: "jeri"}

由于this引用是动态做用域，因此在编程过程当中必定要注意this引用的变化，及时跟踪this的变更。

4.函数做用域

函数做用域，顾名思义就是在定义函数时候产生的做用域，这个做用域也能够称为局部做用域。和全局做用域相反，函数做用域通常只在函数的代码片断内可访问到，外部不能进行变量访问。在函数内部定义的变量存在于函数做用域中，其生命周期随着函数的执行结束而结束。实例以下：

var name = "global";

function fun() {
    var name = "小kk";
    console.log(name); // 输出:小kk

    with ({name:"with"}) {
        console.log(name); // 输出:with
    }
    console.log(name); // 输出:小kk
}

fun();

// 不能访问函数做用域
console.log(name); // 输出:global

5.没有块级做用域

不一样于其余编程语言，在JavaScript里并无块级做用域，也就是说在for、if、while等语句内部的声明的变量与在外部声明是同样的，在这些语句外部也能够访问和修改这些变量的值。实例以下：

function fun() {
    
    if(0 < 2) {
        var name = "小kk";
    }    
    console.log(name); // 输出:小kk
    name = "change";
    console.log(name); // 输出:change
}

fun();

6.做用域链

JavaScript里一切皆为对象，包括函数。函数对象和其它对象同样，拥有能够经过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是做用域，包含了函数被建立的做用域中对象的集合，称为函数的做用域链，它用来保证对执行环境有权访问的变量和函数的有序访问。

当一个函数建立后，它的做用域链会被建立此函数的做用域中可访问的数据对象填充。在全局做用域中建立的函数，其做用域链会自动成为全局做用域中的一员。而当函数执行时，其活动对象就会成为做用域链中的第一个对象（活动对象：对象包含了函数的全部局部变量、命名参数、参数集合以及this）。在程序执行时，Javascript引擎会经过搜索上下文的做用域链来解析诸如变量和函数名这样的标识符。其会从做用域链的最里面开始检索，按照由内到外的顺序，直到完成查找，一旦完成查找就结束搜索。若是没有查询到标识符声明，则报错。当函数执行结束，运行期上下文被销毁，活动对象也随之销毁。实例以下：

var name = 'global';

function fun() {
    console.log(name); // output:global
    name = "change";
    // 函数内部能够修改全局变量
    console.log(name); // output:change
    // 先查询活动对象
    var age = "18";
    console.log(age); // output:18
}

fun();

// 函数执行完毕，执行环境销毁
console.log(age); // output:Uncaught ReferenceError: age is not defined