前端基础之JavaScript_(4)_js的作用域

js作用域

　　作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

js的作用域

1. 全局作用域(Global Scope)

在代码中任何地方都能访问到的对象拥有全局作用域，一般来说一下几种情形拥有全局作用域：

(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域

var name="yuan";

    function foo(){
        var age=23;
        function inner(){
            console.log(age);
        }

        inner();
    }

    console.log(name);        // yuan
    console.log(age);          // Uncaught ReferenceError: age is not defined
    foo();                          // 23
    inner();                      // Uncaught ReferenceError: inner is not defined    

(2)所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：

var name="yuan";

    function foo(){
        age=23;

        var sex="male"
    }
    foo();
    console.log(age);   //  23
    console.log(sex);   // sex is not defined

变量age拥有全局作用域，而sex在函数外部无法访问到。

(3)所有window对象的属性拥有全局作用域

　　一般情况下，window对象的内置属性都都拥有全局作用域，例如window.alert()、window.location、window.top等等。

2. 局部作用域(Local Scope)

　　和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域成为函数作用域.

如示例1中的age与inner都只有局部作用域。（js中if、for没有自己的作用域）

作用域链(Scope Chain)

　　在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

示例演示

//-----**********************例1*********************************

var s=12;
    function f(){
        console.log(s);
         var s=12;          // if s=12
        console.log(s)
    }
    f();
>>:
　　undefine
　　12



//-----**********************例2*********************************

var s=10;
function foo(){
  console.log(s);
  var s=5;
  console.log(s);
  function s(){console.log("ok")}// 函数的定义或声明是在词法分析时完成的,执行时已不再有任何操作

  console.log(s);
}

foo();

>>:

function s(){console.log("ok")}
5
5

//-----***********************例3********************************

function bar(age) {

        console.log(age);
        var age = 99;
        var sex= 'male';
        console.log(age);
        function age() {
            alert(123)
        };
        console.log(age);
        return 100;
}

result=bar(5);
>>:

　　function age() {
alert(123)
}
　　99
　　99

//-----********************************************************

结果分析

　　当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。在函数bar创建时，它的作用域链中会填入一个全局对象，该全局对象包含了所有全局变量，如下图所示：

　　解析到函数调用时，即bar(5)，会生成一个active object的对象，该对象包含了函数的所有局部变量、命名参数、参数集合以及this，然后此对象会被推入作用域链的前端，当运行期上下文被销毁，活动对象也随之销毁。新的作用域链如下图所示：

 

过程解析：

function bar(age) {

        console.log(age);
        var age = 99;
        var sex="male";
        console.log(age);
        function age(){
            alert(123);
        } ;
        console.log(age);
        return 100;
}

result=bar(5);

一 词法分析过程(涉及参数，局部变量声明，函数声明表达式)：
    1-1 、分析参数，有一个参数，形成一个 AO.age=undefine;
    1-2 、接收参数 AO.age=5;
    1-3 、分析变量声明，有一个 var age, 发现 AO 上面有一个 AO.age ，则不做任何处理
    1-4 、分析变量声明，有一个 var sex，形成一个 AO.sex=undefine;
    1-5 、分析函数声明，有一个 function age(){} 声明， 则把原有的 age 覆盖成 AO.age=function(){};
二 执行过程：
    2-1 、执行第一个 console.log(age) 时，当前的 AO.age 是一个函数，所以输出的一个函数
    2-2 、这句 var age=99; 是对不 AO.age 的属性赋值， AO.age=99 ，所以在第二个输出的age是 99;
    2-3 、同理第三个输出的是 99, 因为中间没有改变 age 值的语句了。

          注意：执行阶段：
                        function age(){
                            alert(123)
                        } ;

            不进行任何操作，将执行语句复制给age这部操作是在词法分析时，即运行前完成的。

function func(){
            //this, 代指window
       }
       
       window.func()
       
       
       function Func(){
            this.name='alex'; // this，代指obj
        }

        obj = new Func();
        console.log(obj.name);
        
        
        function Func(){
            this.name='alex'; // this，代指obj
            this.show = function(){
                console.log(this);
            }
        }

        obj = new Func();
        obj.show()
        
        
        
       userInfo = {
            name:'alex',
            age: 18,
            show:function(){
                console.log(this)
            }
       }
       
       userInfo.show()
       
       ##### 结论：函数被 对象.函数 执行，那么函数中的this就是该对象 #####
       
       userInfo = {
            name:'alex',
            age: 18,
            show:function(){
                console.log(this);  #userinfo 
                (function(){
                    console.log(this); # window
                })()
            }
       }
        
       userInfo.show()
       
       
       
       function Func(){
            this.name='alex'; // this，代指obj
            this.show = function(){
                console.log(this);  # obj
                (function(){
                    console.log(this); # window
                })()
            }
        }

        obj = new Func();
        obj.show()
       
        
        
        userInfo = {
            name:'alex',
            age: 18,
            show:function(){
                console.log(this);  #userinfo 
                var that = this;
                (function(){
                    console.log(that); # userinfo
                })()
            }
       }
        
       userInfo.show()