JS三座大山再学习(二、作用域和闭包) JS三座大山再学习(二、作用域

原文地址
作用域 JS中有两种作用域：全局作用域|局部作用域
栗子1

console.log(name); //undefined var name = '波妞'; var like = '宗介' console.log(name); //波妞 function fun(){ console.log(name); //波妞 console.log(eat)//ReferenceError: eat is not defined (function(){ console.log(like)//宗介 var eat = '肉' })() } fun();

name定义在全局，在全局可以访问到，所以 (2) 打印能够正确打印；
在函数fun中，如果没有定义name属性，那么会到它的父作用域去找，所以 (3) 也能正确打印。
内部环境可以通过作用域链访问所有外部环境，但外部环境不能访问内部环境的任何变量和函数。类似单向透明，这就是作用域链，所以 (4) 不行而 (5) 可以。

那么问题来了，为什么第一个打印是"undefined"，而不是"ReferenceError: name is not defined"。原理简单的说就是JS的变量提升
变量提升：JS在解析代码时，会将所有的声明提前到所在作用域的最前面
栗子2

console.log(name); //undefined var name = '波妞'; console.log(name); //波妞 function fun(){ console.log(name)//undefined console.log(like)//undefined var name = '大西瓜'; var like = '宗介' } fun();

相当于

var name; console.log(name); //undefined name = '波妞'; console.log(name); //波妞 function fun(){ var name; var like; console.log(name)//undefined console.log(like)//undefined name = '大西瓜'; like = '宗介' console.log(name)//大西瓜 console.log(like)//宗介 } fun();

注意：是提前到当前作用域的最前面
栗子3

printName(); //printName is not a function var printName = function(){ console.log('波妞') } printName(); //波妞

相当于

var printName; printName(); //printName is not a function printName = function(){ console.log('波妞') } printName(); //波妞

这样一来就好理解了，函数表达式在声明的时候还只是个变量
栗子4

{ var name = '波妞'; } console.log(name)//波妞(function(){ var name = '波妞'; })() console.log(name)//ReferenceError: name is not defined{ let name = '波妞'; } console.log(name)//ReferenceError: name is not defined

从上面的栗子可以看出，不可以草率的认为JS中var声明的变量的作用范围就是大括号的起止范围，ES5并没有块级作用域，实质是函数作用域；ES6中有了let、const定义后，才有了块级作用域。
栗子5

function p1() { console.log(1); } function p2() { console.log(2); } (function () { if (false) { function p1() { console.log(3); } }else{ function p2(){ console.log(4) } } p2(); p1() })(); //4 //TypeError: print is not a function

这是一个非常经典的栗子，声明提前了，但是因为判断条件为否，所以没有执行函数体。所以会出现"TypeError: print is not a function"。while，switch，for同理
闭包

函数与对其状态即词法环境（lexical environment）的引用共同构成闭包（closure）。也就是说，闭包可以让你从内部函数访问外部函数作用域。在JavaScript中，函数在每次创建时生成闭包。

上面的定义来自MDN，简单讲，闭包就是指有权访问另一个函数作用域中变量的函数。

闭包的关键在于：外部函数调用之后其变量对象本应该被销毁，但闭包的存在使我们仍然可以访问外部函数的变量对象.,

//举个例子 function makeFunc() { var name = "波妞"; function displayName() { console.log(name); } return displayName; }var myFunc = makeFunc(); myFunc();

JavaScript中的函数会形成闭包。闭包是由函数以及创建该函数的词法环境组合而成。这个环境包含了这个闭包创建时所能访问的所有局部变量

在例子中，myFunc 是执行 makeFunc 时创建的 displayName 函数实例的引用，而 displayName 实例仍可访问其词法作用域中的变量，即可以访问到 name 。由此，当 myFunc 被调用时，name 仍可被访问，其值 '波妞' 就被传递到console.log中。创建闭包最常见方式，就是在一个函数内部创建另一个函数

通常，函数的作用域及其所有变量都会在函数执行结束后被销毁。但是，在创建了一个闭包以后，这个函数的作用域就会一直保存到闭包不存在为止

//例二 function makeAdder(x) { return function(y) { return x + y; }; }var add5 = makeAdder(5); var add10 = makeAdder(10); console.log(add5(2)); // 7 console.log(add10(2)); // 12//释放对闭包的引用 add5 = null; add10 = null;

从本质上讲，makeAdder 是一个函数工厂 — 他创建了将指定的值和它的参数相加求和的函数。在上面的示例中，我们使用函数工厂创建了两个新函数 — 一个将其参数和 5 求和，另一个和 10 求和。
add5 和 add10 都是闭包。它们共享相同的函数定义，但是保存了不同的词法环境。在 add5 的环境中，x 为 5。而在 add10 中，x 则为 10。
闭包的作用域链包含着它自己的作用域，以及包含它的函数的作用域和全局作用域。

闭包只能取得包含函数中的任何变量的最后一个值

//栗子1 function arrFun1(){ var arr = []; for(var i = 0 ; i < 10 ; i++){ arr[i] = function(){ return i } } return arr } console.log(arrFun1()[9]()); //10 console.log(arrFun1()[1]()); //10//栗子2 function arrFun2(){ var arr = []; for(var i = 0 ; i < 10 ; i++){ arr[i] = function(num){ return function(){ return num }; }(i) } return arr } console.log(arrFun2()[9]()); //9 console.log(arrFun2()[1]()); //1

栗子 1 中，arr数组中包含10个匿名函数，每个函数都可以访问外部的变量 i , arrFun1 执行后，其作用域被销毁，但它的变量依然存在内存中，能被循环中的匿名函数访问，这是的 i 为 10；
栗子 2 中，arr数组中有是个匿名函数，其匿名函数内还有匿名函数，最内层匿名函数访问的 num 被上一级匿名函数保存在了内存中，所以可以访问到每次的 i 的值。
如有错误，请斧正
【JS三座大山再学习(二、作用域和闭包)】以上