call,apply,bind的模拟实现

很多人都知道这三种方法怎用，但是都不知道他们的原理

call

• 定义

call() 方法调用一个函数,其具有一个指定的this值和分别地提供的参数(参数的列表)。

let name='憨蛋';

let person={
    name:'romin'
}

function say(){
    console.log('my name is'+this.name)
}

say.call(person);
// my name is romin

call 改变了say函数的this指向，同时say函数执行。

那么我们就来实现它

• 1、改变this指向，直接把 say 函数放进 person 对象中即可。
• 2、函数执行，调用 person 中的 say 函数

let person={
    name:'romin',
    say:function(){
        console.log(this.name)
    }
}
person.say();

由于上面的方法改变了 person 对象的结构，需要需要多余的 say 函数删除掉，要执行 delete person.say 的操作。

这时候，我们已经明确了该做的事情：

1、把待执行的函数（call前面的函数）放入指定的对象（call的第一个参数）中；

2、执行该函数；

3、删除对象中添加的函数；

Function.prototype.call = function(context){
    // 第一步
    //这里的this就是代调用的函数
    context.fn = this;
    // 第二步
    context.fn();
    // 第三步
    delete context.fn;
}

call 中的第一个参数也可能是null，也可能是字符串，我们需要对 context 进行处理，否则 字符串上没法挂载 函数 fn。

// 对context 做处理
context = context?Object(context):window;

以上面的为例，call 中可能会有多个参数，除了context，剩余的参数都要交给 say 来处理的。

let name='憨蛋';

let person={
    name:'romin'
}

function say(animal,age){
    console.log(animal)
    console.log(age)
    console.log('my name is '+this.name+'，我属'+animal);
}

say.call(person,'🐯',15);
// my name is romin，我属🐯

call里的参数该怎么交给 say ，并且让它执行呢?使用 arguments 的话，它是类数组，和 call 的要求不一致，call 要求 一个个传参的。 拼出一个参数字符串来。

let args = [];
for(let i=1;i<arguments.length;i++){
    args.push('arguments['+i+']')
}

// ['arguments[1]','arguments[2]']

// args 和 字符串拼接，调用了它的 toString()  ,相当于 context.fn(arguments[1],arguments[1])
eval('context.fn('+ args +')')

完整的实现：

Function.prototype.call = function(context){
    // 对context 做处理
    context = context?Object(context):window;
    // 第一步，挂载函数
    //这里的this就是代调用的函数
    context.fn = this;
    
    // 第二步,准备参数，然后让函数执行
    let args = [];
    for(let i=1;i<arguments.length;i++){
        args.push('arguments['+i+']')
    }
    let result = eval('context.fn('+ args +')')
    // 第三步
    delete context.fn;
    // 注意可能有返回值
    return result;
}

apply

• 定义

apply() 方法调用一个具有给定this值的函数，以及作为一个数组（或类似数组对象）提供的参数。

apply 和 call 类似，只是传参的不同而已,可以直接拿上面的代码进行改造

Function.prototype.apply = function(context,arr){
    // 对context 做处理
    context = context?Object(context):window;
    // 第一步，挂载函数
    //这里的this就是代调用的函数
    context.fn = this;
    let result;
    if(!arr){
        result = context.fn();
    }else{
        let args = [];
        for(let i=0;i<arr.length;i++){
            args.push('arr['+i+']')
        }
       result = eval('context.fn('+ args +')') 
    }
    // 第三步
    delete context.fn;
    // 注意可能有返回值
    return result;
}

bind

• 定义：

`bind()`方法创建一个新的函数，在调用时设置`this`关键字为提供的值。并在调用新函数时，将给定参数列表作为原函数的参数序列的前若干项。

特点：改变 this 指向，同时返回一个函数(高阶函数)，可以传入参数；

let name='憨蛋';

let person={
    name:'romin'
}

function say(animal,age){
    console.log(animal)
    console.log(age)
    console.log('my name is '+this.name+'，我属'+animal);
}

let rominsay = say.bind(person,'🐯');
rominsay(15);

它的模拟实现,如果不带参数列表：

Function.prototype.bind = function(context){
    let that = this;
    return function(){
        // 同样要注意可能有返回值
        return that.apply(context);
    }
}

第二版，如果有参数：

Function.prototype.bind = function(context){
    let that = this;
    // 取到参数列表
    let bindArgs = Array.prototype.slice.call(arguments,1);
    return function(){
        // 取到调用时候的参数列表
        let args = Array.prototype.slice.call(arguments);
        // 同样要注意可能有返回值
        return that.apply(context,bindArgs.concat(args));
    }
}

接下来请看，下面的例子使用原生的 bind 方法：

let person={
    name:'romin',
    gender:'男',
}

function Say(name,age){
    this.habit = '上班划水';
    console.log(this.gender);
    console.log(name);
    console.log(age);
}

Say.prototype.friend = '憨蛋';

let RominSay = Say.bind(person,'romin');

let say = new RominSay('15');

console.log(say.friend) // 憨蛋
console.log(say.gender);// undefined
console.log(say.habit)// 上班划水

如果使用自己实现的方法，那么结果是

console.log(say.friend) // undefined
console.log(say.gender);// undefined
console.log(say.habit)// undefined

那么就会有三个疑惑：

• 1、原生的方法中gender 失效了
• 2、我自己写的friend 属性没有继承成功；
• 3、我自己写的habit 也没有取到；

但是请注意下面的一个问题：

如果被绑定的函数被new ，那么 返回的函数中的this 是当前函数的实例

套用上面的话，RominSay 被 new 出了一个 say， 那么 this 就是 当前 RominSay 的实例say（而不应该是 person 了）,那么就能通过原型链找到 friend 属性,

对上面的实现方法进行改造

Function.prototype.bind = function(context){
    let that = this;
    // 取到参数列表
    let bindArgs = Array.prototype.slice.call(arguments,1);
    function newFun(){
        // 取到调用时候的参数列表
        let args = Array.prototype.slice.call(arguments);
        //当newFun作为构造函数时，this 指向实例，如果不是，this还指向 context
        return that.apply(this instanceof newFun ?this:context,bindArgs.concat(args));
    }
    // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承绑定函数的原型中的值
    newFun.prototype = this.prototype;
    return newFun;
}