JavaScript中函数的上下文——this

1.上下文初步了解：

我们来研究一下函数的上下文（context），所谓的上下文就是指函数里面的this是谁。

当一个函数当做对象的方法被调用的时候，这个函数里面this表示这个对象：

<script type="text/javascript">
        var obj = {
            xingming: "爱前端",
            age : 2,
            sayHello : function(){
                alert("你好，我叫做" + this.xingming+ "！我的年龄是" + this.age + "岁");
            }
        }

        obj.sayHello();  //你好我叫做爱前端！我的年龄是2岁
    </script>

现在我们调用sayHello函数的时候，是通过obj打点调用的，所以现在这个sayHello函数的上下文就是obj对象。 即sayHello函数内部的this指向obj。
但是，千万不要认为写在对象里面的函数，上下文一定是这个对象！！
比如：

<script type="text/javascript">
    var obj = {
        xingming : "爱前端",
        age : 2,
        sayHello : function(){
            alert("你好，我叫做" + this.xingming + "！我的年龄是" + this.age + "岁");
        }
    }
         
     var fn = obj.sayHello;  //拿出了这个函数
     fn();  //直接圆括号调用！！不是对象打点调用！你好，我叫做undefined！我的年龄是undefined岁。
</script>

浏览器运行结果：

因为圆括号调用函数，上下文是window对象。
函数的上下文是什么，取决于函数怎么调用，而不是函数如何定义。
函数的上下文是函数的调用时表现的性质，不是函数定义的时候写死的性质。

2.函数上下文遵循五个规律

2.1函数用圆括号调用，函数的上下文是window对象

<script type="text/javascript">
    function fun(){
        var a = 1;
        alert(this.a);  //实际上访问的是window.a
    }

    var a = 2;
    fun();   //弹出2
</script>

函数function fun(){}的上下文是什么呢？不要看它怎么定义，要看它怎么调用。此时是fun()函数名加上圆括号直接调用，上下文就是window对象！
而我们知道：所有的全局变量都是window对象的属性，（注意：函数里面的局部变量，不是window的属性，不是任何东西的属性，它就是一个变量。）程序弹出666。
2.2函数如果作为一个对象的方法，对象打点调用，函数的上下文就是这个对象
比如下面的例子，我们把fun函数定义出来了，然后又把这个函数绑定给了obj对象的c属性：

<script type="text/javascript">
    function fun(){
        alert(this.a);  //相当于弹出obj.a
    }

    //对象
    var obj = {
        "a" : 1,
        "b" : 2,
        //给这个对象增加一个方法，值就是fun函数
        "c" : fun  
    }

    //我们要看清楚函数执行的时候，是怎么执行的。
    //现在不是圆括号直接执行，而是一个对象打点调用这个函数执行，所以函数的上下文是obj对象！
    obj.c();   //弹出1
</script>

调用的时候，是“对象.函数()”
此时根据规律，函数里面的this是这个对象。所以能够弹出1。
2.3函数是事件处理函数，函数的上下文就是触发这个事件的对象
下面我们定义了一个fun，然后把这个fun当做了3个DOM元素的事件处理函数：

<script type="text/javascript">
    //函数
    function fun(){
        this.style.background = "red";
    }
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    var box3 = document.getElementById("box3");
        
    // 把同一个函数绑定给不同的对象
    // this就是点击谁就是谁
    box1.onclick = fun;
    box2.onclick = fun;
    box3.onclick = fun;
</script>

函数不会执行，直到用户点击了某一个div标签。此时点击谁，this就是谁！
2.4定时器调用函数，上下文是window对象

<script type="text/javascript">
    //函数
    function fun(){
        alert(this.a);
    }
         
    var a = 1;
    setInterval(fun,1000);
</script>

函数fun被定时器调用，此时函数的上下文就是window对象。每秒钟能弹出1.
2.5数组中存放的函数，被数组索引之后加圆括号调用，this就是这个数组
比如：

<script type="text/javascript">
    function fun(){
        alert(this === arr); //true
        alert(this.length);  //3，因为数组的长度是3
    }

    var arr = [fun,1,2];
    arr[0]();
</script>

一定要敏感：
arr[0]();
此时这个函数是从数组中枚举出来然后加圆括号执行的，所以最终调用者可以认为是这个数组，上下文就是这个数组！