50行javaScript代碼實現簡單版的 call , apply ,bind 【中級前端面試基礎必備】

在實現本身的 call, apply, bind前，須要複習一下 this.

所謂的this其實能夠理解成一根指針：

其實 this 的指向，始終堅持一個原理：this 永遠指向最後調用它的那個對象,這就是精髓。最關鍵所在

this的四種指向：

當this所在的函數被普通調用時，指向window，若是當前是嚴格模式，則指向undefined

function test() {
  console.log(this);
};

test();
指向window 輸出下面的代碼：
// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}

嚴格模式
'use strict';
function test() {
  console.log(this);
};
test();
// undefined

當this所在當函數被以obj.fn()形式調用時，指向obj

var obj = {
  name: 'segmentFault',
  foo: function() {
    console.log(this.name);
  }
}
obj.foo();
// 'segmentFault'

還能夠這麼作

function test() {
  console.log(this.name);
}
var obj = {
  name: 'qiutc',
  foo: test
}
obj.foo();
// 'qiutc'

當call,apply加入後，this的指向被改變了

function a(a,b,c) {
        console.log(this.name);
        console.log(a,b,c)
    }
    const b = {
        name: "segmentFault"
    }
    a.call(b,1,2,3)
    
    
    //輸出 segmentFault和 1,2,3

    function a(a,b,c) {
        console.log(this.name);
        console.log(a,b,c)
    }

    a.apply(b,[1,2,3])
    //輸出segmentFault和1,2,3

遇到bind後 ：

function a() {
        console.log(this.name);
    }
    const b = {
        name: "segmentFault"
    }
    a.bind(b, 1, 2, 3)

此時控制檯並無代碼輸出，由於bind會從新生成而且返回一個函數，這個函數的this指向第一個參數

function a() {
        console.log(this.name);
    }
    const b = {
        name: "segmentFault"
    }
    const c = a.bind(b, 1, 2, 3)
    c()
    //此時輸出segmentFault

正式開始本身實現call :

在函數原型上定義本身的myCall方法：

Function.prototype.myCall = function (context, ...arg) {
        const fn = Symbol('臨時屬性')
        context[fn] = this
        context[fn](...arg)
        delete context[fn]
    }

四行代碼實現了簡單的call，思路以下：

• 經過對象屬性的方式調用函數，這個函數裏面的this指向這個對象
• 每次調用新增一個symbol屬性，調用完畢刪除
• 這個symbol屬性就是調用mycall方法的函數
• 函數形參中使用...arg是將多個形參都塞到一個數組裏，在函數內部使用arg這個變量時，就是包含全部形參的數組
• 在調用 context[fn](...arg)時候，...arg是爲了展開數組，依次傳入參數調用函數

爲了簡化，今天都不作類型判斷和錯誤邊際處理，只把原理講清楚。

本身實現apply

在函數原型上定義本身的myApply方法：

//實現本身的myApply
    Function.prototype.myApply = function (context, arg) {
        const fn = Symbol('臨時屬性')
        context[fn] = this
        context[fn](...arg)
        delete context[fn]
    }

    const obj2 = {
        a: 1
    }

    test.myApply(obj2, [2, 3, 4])

同理，只是apply傳遞的第二個參數是數組，這裏咱們只須要在調用時，將參數用...把數組展開便可

本身實現bind：

bind跟apply,call的本質區別，bind不會改變原函數的this指向，只會返回一個新的函數（咱們想要的那個this指向），而且不會調用。可是apply和call會改變原函數的this指向而且直接調用

bind在編寫框架源碼，例如 koa等中用得特別多：

//實現本身的myBind
    Function.prototype.myBind = function (context, ...firstarg) {
        const that = this
        const bindFn = function (...secoundarg) {
            return that.myCall(context, ...firstarg, ...secoundarg)
        }
        bindFn.prototype = Object.create(that.prototype)
        return bindFn
    }

    var fnbind = test.myBind(obj, 2)
    fnbind(3)

同理 本身定義好原型上的myBind方法
this劫持 保留最初的調用mybind方法的那個對象
返回一個新的函數 這個新的函數內部this指向已經肯定，使用的是咱們的mycall方法

學習須要按部就班，建議根據本文順序去封裝一遍，是比較輕鬆的，固然 bind還須要判斷是不是 new調用.

完整版本bind

Function.prototype.myBind = function (objThis, ...params) {
    const thisFn = this; // 存儲源函數以及上方的params(函數參數)
    // 對返回的函數 secondParams 二次傳參
    let fToBind = function (...secondParams) {
        console.log('secondParams',secondParams,...secondParams)
        const isNew = this instanceof fToBind // this是不是fToBind的實例 也就是返回的fToBind是否經過new調用
        const context = isNew ? this : Object(objThis) // new調用就綁定到this上,不然就綁定到傳入的objThis上
        return thisFn.call(context, ...params, ...secondParams); // 用call調用源函數綁定this的指向並傳遞參數,返回執行結果
    };
    fToBind.prototype = Object.create(thisFn.prototype); // 複製源函數的prototype給fToBind
    return fToBind; // 返回拷貝的函數
};

以爲寫得不錯能夠給個 star，歡迎加入咱們的前端交流羣～：

如今人數超過了100人，因此只能加我，而後拉大家進羣！！

..]