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'等
}
複製程式碼