js之call,apply和bind的模拟实现

• 了解call，apply和bind对于看一些源码以及封装一些工具有很大的作用。
• 如果想要了解并熟练使用它。。就必须知道他的基本的实现原理。

一，基本用法

1. 使用

let obj = {
    a: 18
}

function fn(a) {
    console.log(a);
}

fn.call(obj, '传call');
fn.apply(obj, ['传apply']);
fn.bind(obj)('传bind')

2. 作用：主要是用call，apply和bind改变this的指向。

二，模拟实现

1. call

Function.prototype.myCall = function(context, ...args) {
    let fn = this;// 谁调用myCall。this就指向谁
    let context = context || window;
    context.fn(...args);
    delete context.fn;
}

2. apply

Function.prototype.myApply = function(context, ...args) {
    let fn = this;// 谁调用myCall。this就指向谁
    let context = context || window;
    context.fn(args);
    delete context.fn;
}

3. bind

Function.prototype.myBind = function(context, ...out) {
    if(typeof this !== 'function') {
        throw new Error('error');
        return;
    }
    let fn = this;
    let context = context || window;
    let oldFn = function(){};
    let newFn = function(...inner) {
        return fn.apply(context, [...out, ...inner]);
    };
    // 让新执行的newFn保持和this的原型一致。
    newFn.prototype = fn.prototype ? fn.prototype : oldFn.prototype;
    newFn.prototype.constructor = newFn;
    return newFn;
}

三，call和apply还有个作用。判断变量类型

• Object.prototype.toString.call(1) // "[object Number]"
• Object.prototype.toString.call(false) // "[object Boolean]"
• Object.prototype.toString.call('aaa') // "[object String]"
• Object.prototype.toString.call(function(){}) // "[object Function]"

function checkType(aa) {
    let type = Object.prototype.toString.call(function(){}) // "[object Function]"
    return type.slice(8, -1); //返回变量类型，eg：'Function','Boolean'等
}