本文已发布在西瓜君的我的博客,原文传送门javascript
做用域
JS中有两种做用域：全局做用域|局部做用域html
栗子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的变量提高java
变量提高：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();
至关于markdown
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(); //波妞
这样一来就好理解了，函数表达式在声明的时候还只是个变量post
栗子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定义后，才有了块级做用域。ui
栗子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同理spa
闭包
函数与对其状态即词法环境（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 的值。
若有错误，请斧正
以上