javascript 高级特性探讨A1-A3（作用域-上下文)

if (value) {
    var somevar = 'value';
}
console.log(somevar); //输出value

这是因为javascript的作用域完全是由函数来决定的，if, for 语句中的花括号不是独立的作用域

A1.1函数作用域

不同于大多数类c的语言，由一对大括号封闭的代码块就是一个作用域，js的作用与就是通过函数来定义的，在一个函数中定义的变量只对这个函数内部可见，我们称为函数作用域，在函数中引用一个变量时，js会先搜索当前函数作用域，或者称为‘局部作用域’，如果没有找到则搜索其上层作用域，一直到全局作用域，我们来看一个简单的例子。

var v1 = 'v1';
var f1 = function () {
    console.log(v1); //输出v1
};
f1();
var f2 = function () {
    var v1 = 'local';
    console.log(v1); //输出 local
};
f2();

以上例子十分明了，js的函数定义是可以嵌套的，每一层都是一个作用域，变量的搜索顺序是从内到外，下面这个例子可能就会有些令人困惑：

var scope = 'global';
var f = function () {
    console.log(scope); //输出 undefined
    var scope = 'f';
};
f();

上面的的代码可能和你预想的不一样，没有输出global,而是undefined,这是为什么呢，这是js的一个特性，按照作用域搜索顺序，在console.log函数访问scope变量时，js会先搜索函数f的作用域，恰巧在f的作用域里面搜索到scope变量，所以上层作用域定义的scope就被屏蔽了，但是执行到console.log语句时，scope还没被定义，或者说初始化，所以得到的就是undefined的值了

   我们还可以从另一个角度去理解，对于开发者来说，在访问未定义的变量或者定义了但没有初始化的变量时，获得的值都是undefined，于是我们可以认为，无论在函数内部什么地方的变量，在一进入函数时就被定义了，但直到var所在的那一行它才被初始化，所以在这之前引用到的都是undefined值。(事实上，js的内部实现并不是这样的，未定义变量和值为undefined的变量还是有区别的。）

var f = function () {
    var scope = 'f0';
    (function () {
        var scope = 'f1';
        (function () {
            console.log(scope); //输出f1
        })();
    })();
};
f1();

我们在最上层函数引用了scope变量，通过作用域搜索，找到了其父作用域中定义的scope变量，有一定需要注意：函数作用域的嵌套关系是定义时决定的，而不是调用时决定的，也就是说，js的作用域是静态作用域，这是因为作用域的嵌套关系可以在语法分析时确定，而不必等到运行时确定，下面我们看看这个例子：

var scope = 'top';
var f1 = function () {
    console.log(scope);
};
f1(); //输出top
var f2 = function () {
    var scope = 'f2';
    f1();
};
f2(); //输出top

这个例子中，通过f2调用的f1在查找scope定义时，找到的父作用域中定义的scope变量，而不是f2中定义的scope变量，这说明了作用域的嵌套关系不是在调用时确定的，而是在定义的时候确定.

A1.2全局作用域

 在js中有一种特殊对象是全局对象，全局作用域中的变量不论在什么函数中都可以被直接引用，而不必通过全局对象.

符合以下条件的变量属于全局作用域：

1.在最外层定义的变量

2.全局对象的属性

3.任何地方隐式定义的变量（未定义直接赋值的变量）

需要格外注意的是第三点，在任何地方隐式定义的变量都会定义在全局作用域中，即不通过var声明直接赋值的变量，这一点经常被人遗忘，而模块化编程的一个重要原则就是避免使用全局变量，所以我们在任何地方都不应该隐式定义变量

A2闭包

闭包的严格定义时‘由函数（环境）及其封闭的自由变量组成的集合体。’，这个定义或许我们暂时不能够理解，让我们直接看例子

var gen = function () {
    var count = 0;
    var get = function () {
        count ++;
        return count;
    };
    return get;
};
var counter = gen();
console.log(counter()); //输出1
console.log(counter()); //输出2
console.log(counter()); //输出3

这段代码中，gen函数中有一个局部变量count,初始值为0，还有一个叫做get的函数，get将其父作用域，也就是gen中的count变量加1，并返回count的值，gen函数的返回值就是get函数，在外部我们通过count变量调用了gen函数并获取了它的返回值，也就是get函数，接下来反复调用几次counter(),我们发现每次返回的值都递增了1

  按照我们以前的函数式编程思维的理解,count是gen函数内部的变量，它的生命周期就是gen被调用的时期，当gen从调用栈中返回时，count变量申请的空间也就被释放，问题是，gen调用结束后，counter()却顶用了‘已经被释放了的’ count变量，而且非但没有出错，反而每次调用counter()时还修改并返回了count，这是怎么回事呢

这正是闭包的特性，当一个函数返回它内部定义的一个函数时，就产生了一个闭包，闭包不但包括被返回的函数，还包括这个函数的定义环境，上面例子中，当函数gen()的内部函数gen被一个外部变量counter引用时，counter和gen（）的局部变量就是一个闭包，如果还不够清晰，下面我们再来看看这个例子

var gen = function () {
    var count = 0;
    var get = function () {
        count ++;
        return count;
    };
    return get;
};
var counter1 = gen();
var count2 = gen();
console.log(counter1()); //输出1
console.log(counter2()); //输出1
console.log(counter1()); //输出2
console.log(counter1()); // 输出3
console.log(counter2()); //输出2

上面这个例子我们就看的比较清楚了，counter1和counter2分别调用了gen()函数，生成了二个闭包的实例，它们内部引用的count变量分别属于各自的运行环境，我们可以理解成，在gen函数中返回get函数时，私自将get可能引用的到的gen()函数的内部变量（也就是count) 也返回了，并且在内存中生成了一个副本，之后gen()返回的函数的二个实例counter1和counter2就是相互独立了的

闭包的用途：

一。嵌套的回调函数

1.是实现嵌套的回调函数，2是隐藏对象的细节

二。实现私有成员

js通过约定在所有私有属性前加上下划线（例如_myoldboy),表明这个属性是私有的，外部对象不应该直接读写它，但这只是个非正式的约定，假设对象的使用者不这么做，有没有更严格的机制呢，答案是有的，那就是闭包，让我们来瞅瞅真正的私有化吧

var gen = function () {
    var count = 0;
    var get = function () {
        count ++;
        return count;
    };
    return get;
};
var counter = gen();
console.log(counter());//输出1
console.log(counter());//输出2
console.log(counter());//输出3

我们可以看到，只有调用了counter()才能访问到闭包内的count变量，并按照规则对其加1，chucizhiw绝无其他方式找到count变量，受到这个简单例子的启发，我们可以把一个对象用闭包封装起来，只返回一个‘访问器'对象，即可实现对细节的隐藏。

A3.1上下文对象

在js中，上下文对象就是this指针，即被调用函数所处的环境，上下文对象的作用是在一个函数内部引用调用它的对象本身，js的任何函数都是被某个对象调用的，包括全局对象，所以，this指针是一个很重要的东西.

var someuser = {
    name : 'by',
    display : function () {
        console.log(this.name);
    }
};
someuser.display(); //输出 by
var foo = {
    bar : someuser.display,
    name : 'foo'
};
foo.bar(); //输出foo

js的函数式编程特性使得函数可以像一般的变量一样赋值，传递和计算，我们可以看到在上面的代码中，foo对象的bar属性时someuser.display函数，使用foo.bar()调用时，bar和foo对象的函数看起来没有区别，其中的tjis指针不属于某个函数，而是函数调用时所属的对象

  在js中，本质上，函数类型的变量是指向这个函数实体的一个引用，在引用之间赋值不会对对象产生复制行为，我们可以通过函数的任何一个引用调用这个函数，不同之处仅仅在于上下文，下面的例子或许会有更好的解释：

var someuser = {
    name: 'by',
    func: function () {
        console.log(this.name);
    }
};
var foo = {
    name: 'foo'
};
someuser.func(); //输出by
foo.func = someuser.func;
foo.func(); //输出foo
name = 'global';
func = someuser.func;
func(); //输出global

仔细观察上面的例子，使用不同的引用来调用同一个函数时，this指针永远是这个引用所属的对象。js中的函数作用域是静态的，也就是说一个函数可见范围是在预编译的语法分析中就可以确定的，而上下文对象则可以看做是对静态作用域的补充