JS高级——上下文模式

Posted 2020-10-22 站错队了同志

上下文调用模式

可以修改this的值，也就是可以修改函数的调用方式，apply、call可以修改函数调用上下文，也就是this的值

<script>
    var name = "莱昂纳多·自强·郭";

    function sayHello(a, b) {
        console.log(this.name + "吃了" + (a * b) + "个馒头");
    }

    var obj = {
        name: "尼古拉斯·电饭·锅"
    }

    var arr = [10, 20];
    sayHello.apply(obj, arr);//尼古拉斯·电饭·锅吃了200个馒头
    sayHello.call(obj, 2, 3);//尼古拉斯·电饭·锅吃了6个馒头
</script>

apply与call的区别

函数.apply(对象, [函数需要参数列表，是一个数组])

函数.call(对象,arg1,arg2,arg3...argn)

具体区别就是apply参数是一个数组，而call传入函数的参数是一个值一个值的方式，所以根据他们的特性，运用情况也是不同：

1、apply用于函数的形参个数不确定的情况

2、call用于确定了函数的形参有多少个的时候使用

案例分析

（1）求一个数组的最大值

<script>
    var arr = [9, 1, 4, 10, 7, 22, 8];
    //apply方法的第二个参数 是一个数组
    // 在调用的时候，会将数组中的每一个元素拿出来，作为形参，挨个传递给函数
    //apply方法和call方法第一个参数传递null的时候，都表示为函数调用模式
    //也就是将this指向window
    var max = Math.max.apply(null, arr);
    //==>等同于Math.max(9,1,4,10,7,22,8)
    console.log(max);//22
</script>

（2）将传入的参数打印，并且用’-‘连接

<script>
    function foo() {
        //伪数组不具有join方法，所以这个时候就要考虑去借用一下数组的join方法
        //var str = Array.prototype.join.apply(arguments,["-"]);
        var str = [].join.apply(arguments, ["-"]);
        return str;
    }

    var str = foo(1, 3, "abc", "ffff", 99) // 1-3-abc-ffff-99
    console.log(str);
</script>

（3）设置div、p标签的颜色

<script>
    var divs = document.getElementsByTagName(‘div‘);
    var ps = document.getElementsByTagName(‘p‘);
    var arr = [];
    arr.push.apply(arr, divs);
    arr.push.apply(arr, ps);
    for (var i = 0; i < arr.length; i++) {
        arr[i].style.backgroundColor = ‘yellow‘;
    }
</script>