bind call apply的实现原理

**
 * 模拟call call使用合并运算符对参数进行了合并,所以不需要传入数组形式的参数
 * @param context 执行函数体的主体对象
 * @param parameter 函数体执行时的所有参数
 */
Function.prototype.newCall = function(context, ...parameter) {

    //判断是否为非法类型的主体对象
    if(typeof context!=='object'||context===null||context===undefined){
        context = Object.create(null)
    }

    //将调用该方法的函数引用挂载至主体对象的fn属性
    context['fn'] = this;
    //主体对象调用并执行该属性中的函数
    context['fn'](...parameter);
    //执行完毕后及时删除主体对象的fn属性
    delete context['fn'];
};

let personOne = {
    name: 'Abiel'
};

function sayHi(age,sex) {
    console.log(this.name, age, sex);
}

sayHi.newCall(undefined, 25, '男');


var obj={
    name:"秦乙"
};

function test(age,sex){
    console.log(`我的名字是${this.name}`,age,sex);
}

/**
 * 模拟apply apply没有用合并运算符对参数进行合并,函数接收的多个参数默认是数组,所以需要以数组形式传入
 * @param context 执行函数体的主体对象
 * @param parameter 函数体执行时的所有参数
 */
Function.prototype.newApply = function(context, parameter) {

    //判断是否为非法类型的主体对象
    if(typeof context!=='object'||context===null||context===undefined){
        context = Object.create(null)
    }

    //将调用该方法的函数引用挂载至主体对象的fn属性
    context['fn'] = this;
    //主体对象调用并执行该属性中的函数
    context['fn'](...parameter);
    //执行完毕后及时删除主体对象的fn属性
    delete context['fn'];
};

test.newApply(obj,["秦乙",26,"男"]);


/**
 * 模拟bind
 * @param context 调用bind的主体对象
 * @param innerArgs 需要被主体对象调用执行的函数的所有参数
 * @returns {function(...[*]): *}
 */
Function.prototype.newBind = function (context,...innerArgs) {
    //获取函数的引用
    let _this = this;
    /**
     * 向外部返回call函数的闭包引用
     * @param 所有的二次传参的参数
     */
    return function (...finnalyArgs) {
        //外部函数通过call让主体对象调用并执行该函数并将第一次和第二次的所有参数传入外部函数执行
        return _this.newCall(context,...innerArgs,...finnalyArgs)
    }
};

const person = {
    name: 'Abiel'
};

function sayHi(age,sex) {
    console.log(this.name, age, sex);
}

//通过绑定函数bind为sayHi函数创建一个person为主体对象的闭包call函数
let personSayHi = sayHi.newBind(person, 25);
//对sayHi函数二次传参并调用执行sayHi函数
personSayHi('男');

猜你喜欢

转载自blog.csdn.net/qq_38603437/article/details/91911259