apply()和call()

流年sugar / 2023-05-19 / 原文

apply()和call()二者都是用来改变上下文执行，只是传递的参数不一样

Function.apply(obj,args)方法能接收两个参数
obj：这个对象将代替Function类里this对象
args：这个是数组，它将作为参数传给Function（args-->arguments）apply是将args数组一个一个与Function类中的参数一一对应

Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj：这个对象将代替Function类里this对象
params：这个是一个参数列表，Function类的参数一一对应

示例.ts

add(a, b) {
        return this + a + b;
    }
mutilAdd() {
        var param1 = 3;
        var param2 = 4;
        //将add中的上下文this变成了1
        var res1 = this.add.call(1, param1, param2)//结果为8
        var res2 = this.add.apply(1, [param1, param2])//结果为8
    }

示例.js

function ProA(name, skill) {
    this.name = name;
    this.skill = skill;
    this.fn = function () {
        console.log("my name is " + this.name + ", my skills are " + this.skill);
        console.log(this)
    }
}

function ProB(name, skill) {
    console.log(this)
    //此处改动产生的效果为：
    //在ProB内，通过apply，执行，并改动ProA中的执行上下文(this)，
    //及修改ProA的参数为ProB所接收的参数
    //那么在new调用ProB时，相当于调用了被修改了执行上下文和参数之后的ProA
    //ProB的this传入ProA后执行this相关的参数函数赋值，由于ProA中的this是ProB的所以ProB就拥有了参数name、skill和函数fn
    ProA.call(this, name, skill)
}
var A = new ProA("AAA", "sing");
A.fn(); //my name is AAA, my skills are sing
var B = new ProB("BBB", "dance");
B.fn();