javascript怎么實現call、apply和bind方法

本篇內容介紹了“javascript怎么實現call、apply和bind方法”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

手寫實現 call

ES3 版本

Function.prototype.myCall = function(thisArg){
    if(typeof this != 'function'){
        throw new Error('The caller must be a function')
    }
     if(thisArg === undefined || thisArg === null){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }   
    var args = []
    for(var i = 1;i < arguments.length;i ++){
        args.push('arguments[' + i + ']')
    }
    thisArg.fn = this
    var res = eval('thisArg.fn(' + args + ')')
    delete thisArg.fn
    return res
}

ES6 版本

Function.prototype.myCall = function(thisArg,...args){
    if(typeof this != 'function'){
        throw new Error('The caller must be a function')
    }
    if(thisArg === undefined || thisArg === null){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }
    thisArg.fn = this
    const res = thisArg.fn(...args)
    delete thisArg.fn
    return res
}

通過 call 調用函數的時候，可以通過傳給 call  的 thisArg 指定函數中的 this。而只要使得函數是通過 thisArg 調用的，就能實現這一點，這就是我們的主要目標。

實現要點

• 最終是通過函數去調用 myCall 的，所以 myCall 和 call 一樣掛載在函數原型上。同時，也正因為是通過函數去調用 myCall 的，所以在 myCall 內部我們可以通過 this 拿到 myCall的調用者，也就是實際執行的那個函數。

• 按理說，myCall 是掛載在函數原型上，當我們通過一個非函數去調用 myCall 的時候，肯定會拋出錯誤，那么為什么還要在 myCall 中檢查調用者的類型，并自定義一個錯誤呢？這是因為，當一個調用者 obj = {} 是一個對象，但是繼承自 Function 的時候（obj.__proto__ = Function.prototype），它作為一個非函數實際上也是可以調用 myCall 方法的，這時候如果不進行類型檢查以確保它是個函數，那么后面直接將它當作函數調用的時候，就會拋出錯誤了

• 傳給 call 的 thisArg 如果是 null 或者 undefined，那么 thisArg 實際上會指向全局對象；如果 thisArg 是一個基本類型，那么可以使用 Object() 做一個裝箱操作，將其轉化為一個對象 —— 主要是為了確保后續可以以方法調用的方式去執行函數。那么可不可以寫成 thisArg = thisArg ? Object(thisArg) : globalThis  呢？其實是不可以的，如果 thisArg 是布爾值 false，那么會導致 thisArg 最終等于 globalThis，但實際上它應該等于 Boolean {false}。

• 前面說過，可以在 myCall 里通過 this 拿到實際執行的那個函數，所以 thisArg.fn = this 相當于將這個函數作為 thisArg 的一個方法，后面我們就可以通過 thisArg 對象去調用這個函數了。

• thisArg.fn = this 相當于是給 thisArg 增加了一個 fn 屬性，所以返回執行結果之前要 delete 這個屬性。此外，為了避免覆蓋 thisArg 上可能存在的同名屬性 fn，這里也可以使用 const fn = Symbol('fn') 構造一個唯一屬性，然后 thisArg[fn] = this。

• ES3 版本和 ES6 版本主要的區別在于參數的傳遞以及函數的執行上：

• ES6 因為引入了剩余參數，所以不管實際執行函數的時候傳入了多少個參數，都可以通過 args 數組拿到這些參數，同時因為引入了展開運算符，所以可以展開 args 參數數組，把參數一個個傳遞給函數執行

• 但在 ES3 中沒有剩余參數這個東西，所以在定義 myCall 的時候只接收一個 thisArg 參數，然后在函數體中通過 arguments 類數組拿到所有參數。我們需要的是 arguments 中除第一個元素（thisArg）之外的所有元素，怎么做呢？如果是 ES6，直接[...arguments].slice(1)就可以了，但這是 ES3，于是我們只能從索引 1 開始遍歷 arguments，然后 push 到一個 args 數組中了。而且還要注意的是，這里 push 進去的是字符串形式的參數，這主要是為了方便后續通過 eval 執行函數的時候，將參數一個一個傳遞給函數。

• 為什么必須通過 eval 才能執行函數呢？因為我們不知道函數實際上要接收多少個參數，況且也用不了展開運算符，所以只能構造一個可執行的字符串表達式，顯式地傳入函數的所有參數。

手寫實現 apply

apply 的用法和 call 很類似，因此實現也很類似。需要注意的區別是，call 在接受一個 thisArg 參數之后還可以接收多個參數（即接受的是參數列表），而 apply 在接收一個 thisArg 參數之后，通常第二個參數是一個數組或者類數組對象：

fn.call(thisArg,arg1,arg2,...)
fn.apply(thisArg,[arg1,arg2,...])

如果第二個參數傳的是 null 或者 undefined，那么相當于是整體只傳了 thisArg 參數。

ES3 版本

Function.prototype.myApply = function(thisArg,args){
    if(typeof this != 'function'){
        throw new Error('the caller must be a function')
    } 
    if(thisArg === null || thisArg === undefined){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }
    if(args === null || args === undefined){
        args = []
    } else if(!Array.isArray(args)){
        throw new Error('CreateListFromArrayLike called on non-object')
    }
    var _args = []
    for(var i = 0;i < args.length;i ++){
        _args.push('args[' + i + ']')
    }
    thisArg.fn = this
    var res = _args.length ? eval('thisArg.fn(' + _args + ')'):thisArg.fn()
    delete thisArg.fn
    return res
}

ES6 版本

Function.prototype.myApply = function(thisArg,args){
    if(typeof thisArg != 'function'){
        throw new Error('the caller must be a function')
    } 
    if(thisArg === null || thisArg === undefined){
        thisArg = globalThis
    } else {
        thisArg = Object(thisArg)
    }
    if(args === null || args === undefined){
        args = []
    } 
    // 如果傳入的不是數組，仿照 apply 拋出錯誤
    else if(!Array.isArray(args)){
        throw new Error('CreateListFromArrayLike called on non-object')
    }
    thisArg.fn = this
    const res = thisArg.fn(...args)
    delete thisArg.fn
    return res
}

實現要點

基本上和 call 的實現是差不多的，只是我們需要檢查第二個參數的類型。

手寫實現 bind

bind 也可以像 call 和 apply 那樣給函數綁定一個 this，但是有一些不同的要點需要注意：

• bind 不是指定完 this 之后直接調用原函數，而是基于原函數返回一個內部完成了 this 綁定的新函數

• 原函數的參數可以分批次傳遞，第一批可以在調用 bind 的時候作為第二個參數傳入，第二批可以在調用新函數的時候傳入，這兩批參數最終會合并在一起，一次傳遞給新函數去執行

• 新函數如果是通過 new 方式調用的，那么函數內部的 this 會指向實例，而不是當初調用 bind 的時候傳入的 thisArg。換句話說，這種情況下的 bind 相當于是無效的

ES3 版本

這個版本更接近 MDN 上的 polyfill 版本。

Function.prototype.myBind = function(thisArg){
    if(typeof this != 'function'){
        throw new Error('the caller must be a function')
    }
    var fnToBind = this
    var args1 = Array.prototype.slice.call(arguments,1)
    var fnBound = function(){
        // 如果是通過 new 調用
        return fnToBind.apply(this instanceof fnBound ? this:thisArg,args1.concat(args2))     
    }
    // 實例繼承
    var Fn = function(){}
    Fn.prototype = this.prototype
    fnBound.prototype = new Fn()
    return fnBound
}

ES6 版本

Function.prototype.myBind = function(thisArg,...args1){
    if(typeof this != 'function'){
        throw new Error('the caller must be a function')
    }
    const fnToBind = this
    return function fnBound(...args2){
        // 如果是通過 new 調用的
        if(this instanceof fnBound){
            return new fnToBind(...args1,...args2)
        } else {
            return fnToBind.apply(thisArg,[...args1,...args2])
        }
    }
}

實現要點

1.bind 實現內部 this 綁定，需要借助于 apply，這里假設我們可以直接使用 apply 方法

2.先看比較簡單的 ES6 版本:

1). 參數獲取：因為 ES6 可以使用剩余參數，所以很容易就可以獲取執行原函數所需要的參數，而且也可以用展開運算符輕松合并數組。

2). 調用方式：前面說過，如果返回的新函數 fnBound 是通過 new 調用的，那么其內部的 this 會是 fnBound 構造函數的實例，而不是當初我們指定的 thisArg，因此 this instanceof fnBound會返回 true，這種情況下，相當于我們指定的 thisArg 是無效的，new 返回的新函數等價于 new 原來的舊函數，即 new fnBound 等價于 new fnToBind，所以我們返回一個 new fnToBind 即可；反之，如果 fnBound 是普通調用，則通過 apply 完成 thisArg 的綁定，再返回最終結果。從這里可以看出，bind 的 this 綁定，本質上是通過 apply 完成的。

3.再來看比較麻煩一點的 ES3 版本：

1). 參數獲取：現在我們用不了剩余參數了，所以只能在函數體內部通過 arguments 獲取所有參數。對于 myBind，我們實際上需要的是除開第一個傳入的 thisArg 參數之外的剩余所有參數構成的數組，所以這里可以通過 Array.prototype.slice.call 借用數組的 slice 方法（arguments 是類數組，無法直接調用 slice），這里的借用有兩個目的：一是除去 arguments 中的第一個參數，二是將除去第一個參數之后的 arguments 轉化為數組（slice 本身的返回值就是一個數組，這也是類數組轉化為數組的一種常用方法）。同樣地，返回的新函數 fnBound 后面調用的時候也可能傳入參數，再次借用 slice 將 arguments 轉化為數組

2). 調用方式：同樣，這里也要判斷 fnBound 是 new 調用還是普通調用。在 ES6 版本的實現中，如果是 new 調用 fnBound，那么直接返回 new fnToBind()，這實際上是最簡單也最容易理解的方式，我們在訪問實例屬性的時候，天然就是按照 實例 => 實例.__proto__ = fnToBind.prototype 這樣的原型鏈來尋找的，可以確保實例成功訪問其構造函數 fnToBInd 的原型上面的屬性；但在 ES3 的實現中（或者在網上部分 bind 方法的實現中），我們的做法是返回一個 fnToBind.apply(this)，實際上相當于返回一個 undefined 的函數執行結果，根據 new 的原理，我們沒有在構造函數中自定義一個返回對象，因此 new 的結果就是返回實例本身，這點是不受影響的。這個返回語句的問題在于，它的作用僅僅只是確保 fnToBind 中的 this 指向 new fnBound 之后返回的實例，而并沒有確保這個實例可以訪問 fnToBind 的原型上面的屬性。實際上，它確實不能訪問，因為它的構造函數是 fnBound 而不是 fnToBind，所以我們要想辦法在 fnBound 和 fnToBind 之間建立一個原型鏈關系。這里有幾種我們可能會使用的方法：

 // 這里的 this 指的是 fnToBind
 fnBound.prototype = this.prototype

這樣只是拷貝了原型引用，如果修改 fnBound.prototype，則會影響到 fnToBind.prototype，所以不能用這種方法

// this 指的是 fnToBind
fnBound.prototype = Object.create(this.prototype)

通過 Object.create 可以創建一個 __proto__ 指向  this.prototype 的實例對象，之后再讓 fnBound.prototype 指向這個對象，則可以在 fnToBind 和 fnBound 之間建立原型關系。但由于 Object.create 是 ES6 的方法，所以無法在我們的 ES3 代碼中使用。

// this 指的是 fnToBind
const Fn = function(){}
Fn.prototype = this.prototype
fnBound.prototype = new Fn()

這是上面代碼采用的方法：通過空構造函數 Fn 在 fnToBind 和 fnBound 之間建立了一個聯系。如果要通過實例去訪問 fnToBind 的原型上面的屬性，可以沿著如下原型鏈查找：

實例 => 實例.__proto__ = fnBound.prototype = new Fn() => new Fn().__proto__ = Fn.prototype = fnToBind.prototype

“javascript怎么實現call、apply和bind方法”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！