上下文-this

函数的上下文由调用方式决定

同一个函数，用不同的形式调用它，则函数的上下文不同

情形1 ：对象打点调用函数，函数中的this指代这个打点的对象

xiaoming.sayHello();

xiaoming.sayHello();

情形2:圆括号直接调用函数，函数中的this指代window对象

var sy = xiaoming.sayHello;
sy();

上下文规则

规则1

对象打点调用它的方法函数，则函数的上下文是这个打点的对象

对象.方法();

演示说明

 <script>
        function fun(){
            console.log(this.a + this.b);
        }
        var obj = {
            a:1,
            b:2,
            c:[{
                a:3,
                b:4,
                c:fun
            }]
        };

        var a = 5;
        
        //符合规则1 打点调用方法函数
        obj.c[0].c(); //  7
    </script>

规则2

圆括号直接调用函数，函数中的this指代window对象

函数();

演示说明

 <script>
        var c = 1;
        var obj = {
            a: function(){
                var c = 3;
                return this.b;
            },
            b: function(){
                var c = 4;
                document.write(this.c);

            },
            c:2
        };

        var obj1 = obj.a();
        //符合规则2 this为 window
        obj1();// 1
    </script>

规则3

数组（类数组对象）枚举出函数进行调用，上下文是这个数组（类数组对象）

数组下标;

类数组对象

类数组对象是所有键名为自然数序列（从0开始），且有length属性的对象

arguments对象是最常见的类数组对象，它是函数的实参列表

演示说明

  <script>
        function fun(){
            arguments[3](); // 适用规则3
        }
        fun('A','B','C',function(){
            console.log(this[1]);
        }); //B
    </script>

规则4

IIFE(立即可执行函数)中的函数，上下文是window对象

IIFE

(function() {

})();

演示说明

 <script>
        var a = 1;
        var obj = {
            a:2,
            fun:(function(){
                var a = this.a;
                return function() {
                    console.log(a + this.a);
                }
            })() //适用规则4  ，拥有闭包记忆性
        };


        obj.fun();//适用规则1
    </script>

规则5

定时器、延时器调用函数，上下文是window对象

setInterval(函数，时间);

setTimeout(函数，时间);

演示说明

<script>
        var obj = {
            a:1,
            b:2,
            fun:function(){
                console.log(this.a +this.b);
            }
        };
        var a = 3;
        var b = 4;
        // 必须是延时器 调用的函数
        // setTimeout(obj.fun,2000);

        setTimeout(function(){
            obj.fun();//此时适用规则1  对象打点调用函数

        },2000);
    </script>

规则6

事件处理函数的上下文是绑定事件的DOM元素

DOM元素.onclick = function(){

}

call和apply能指定函数的上下文

函数.call(上下文);

函数.apply(上下文);

 <script>
        function sum(){
            alert(this.c + this.m + this.e);
        }

        var price = {
            c:100,
            m:99,
            e:98
        };

        sum.call(price);
        sum.apply(price);
    </script>

call和appply的区别

  <script>
        function sum(b1,b2){
            alert(this.c + this.m + this.e + b1 +b2);
        }

        var price = {
            c:100,
            m:99,
            e:98
        };

        sum.call(price,10,8);
        sum.apply(price,[10,8]);
    </script>

使用区分

给无形参的函数传值时多个值时，使用apply函数内置方法arguments是数组

 <script>
        function fun1(){
            fun2.apply(this,arguments);
        }
        function fun2(a,b){
            alert(a + b);
        }

        fun1(33,44);//规则2
    </script>

上下文规则总结

规则	上下文
对象.函数()	对象
函数()	window
数组[下标]（）	数组
IIFE	window
定时器、延时器	window
DOM事件处理函数	绑定DOM的元素
call和apply	任意指定