JavaScript手寫call,apply,bind方法

更新時間：2022年06月24日 08:21:19 作者：??前端若水????

這篇文章主要介紹了JavaScript手寫call,apply,bind方法，call，bind，apply方法都是JavaScript原生的方法，掛載在Function原型上,使得所有函數(shù)都可以調(diào)用

前言

改變this指向在書寫業(yè)務(wù)的時候經(jīng)常遇到，我們經(jīng)常采用以下方法進(jìn)行改寫

使用作用聲明變量存儲this
使用jJavaScript的原生方法call，apply，以及bind進(jìn)行改寫

第一種方法就不說了，就是一個變量存儲的問題，主要說第二種如何實現(xiàn)的

call，bind，apply方法都是JavaScript原生的方法，掛載在Function原型上,使得所有函數(shù)都可以調(diào)用，今天我們來實現(xiàn)一下call，apply，bind吧

改寫this實現(xiàn)思路

我們聲明一個函數(shù)，函數(shù)接受倆個參數(shù)，第一個參數(shù)是接受改變的this指向，第二個是剩余參數(shù)，用于執(zhí)行改變方法后傳遞的使用參數(shù)，在函數(shù)中里面聲明一個變量用于存儲傳遞過來的this,遵循this指向的準(zhǔn)則,this是在執(zhí)行的時候生成的，函數(shù)的準(zhǔn)則是誰調(diào)用它就指向誰，傳遞過來的this是一個對象，然后在傳遞過來的this上面聲明一個方法，聲明的方法就是當(dāng)前函數(shù)，該方法由傳遞過來的this進(jìn)行調(diào)用執(zhí)行，這樣就改變了this指向問題，在把傳遞過來的參數(shù)除第一個外全部傳遞給聲明的方法，我們來實現(xiàn)一下

前期準(zhǔn)備

這些數(shù)據(jù)用于配合手寫的方法，由于call，bind，apply他們都是需要把他們掛載到函數(shù)原型上，函數(shù)才能調(diào)用的到，我們這里也把他掛載到原型上

 var name = '前端';
        var age = "7";
        let obj = {
            name: '若水',
            age: '20'
        };

 function fnLog(arg) {
     let str = `我叫${this.name}今年${this.age}歲了`;
  console.log(str, '傳遞過來的', arg);
}

手寫的call，bind，apply方法第一個參數(shù)都是改變的this指向，第二個參數(shù)是傳遞的參數(shù)

手寫call方法

call方法是改變this后立即執(zhí)行

  Function.prototype.myCall = function(content, ...arg) {
            // 創(chuàng)建一個變量接受改變的this，如果改變的this為空則采用window為默認(rèn)this
            let newThis = content || window;
            /**newThis是一個對象，它是傳遞過來的this，在newThis上新增一個方法，這個方法就是
            當(dāng)前函數(shù) ，this就是指向的myCall,調(diào)用這個方法就可以改變this指向，因為函數(shù)是誰調(diào)用
            它this就指向誰 
            **/
            newThis.fn = this;
           /**執(zhí)行改變this方法，接受返回值，這里容易被誤導(dǎo)，這里是把myCall傳遞過來的參數(shù)傳遞
            給了改變this的函數(shù)，由于不確定傳遞多少使用了剩余參數(shù)，這里也是 **/
            let result = newThis.fn(...arg);
            //刪除傳遞過來this上聲明的方法,防止出現(xiàn)問題
            delete newThis.fn;
            // 將執(zhí)行結(jié)果返回
            return result;
        };
        //執(zhí)行手寫的call方法
        fnLog.myCall(obj, 'myCall');

手寫apply方法

apply傳遞的參數(shù)只能傳遞數(shù)組

//如果arg沒有傳遞參數(shù)，默認(rèn)為空數(shù)組
      Function.prototype.myApply = function(content, arg = []) {
            // 判斷傳遞參數(shù)是否為數(shù)組，如果不為數(shù)組則拋出錯誤,為數(shù)組則繼續(xù)執(zhí)行
            if (!Array.isArray(arg)) {
                throw '傳遞參數(shù)必須為數(shù)組';
            }
            // 創(chuàng)建一個變量接受改變的this，如果改變的this為空則采用window為默認(rèn)this
            let newThis = content || window;
            // 給當(dāng)前傳遞過來的this，添加一個方法，遵循this準(zhǔn)則，誰調(diào)用就指向誰的原則
            newThis.fn = this;
            // 同mycall相同
            let result = newThis.fn(arg);
           //刪除傳遞過來this上聲明的方法,防止出現(xiàn)問題
            delete newThis.fn;
            // 將執(zhí)行結(jié)果返回
            return result;
        };
        //執(zhí)行
        fnLog.myApply(obj, [1, 212, 232]);

手寫bind方法

bind不是立即執(zhí)行而是返回一個新的函數(shù)

  Function.prototype.myBind = function(content, ...arg) {
            // 創(chuàng)建一個變量接受改變的this，如果改變的this為空則采用window為默認(rèn)this
            let newThis = content || window;
        // 給當(dāng)前傳遞過來的this，添加一個方法，遵循this準(zhǔn)則，誰調(diào)用就指向誰的原則
            newThis.fn = this;
 // 由于bind不是立即執(zhí)行，是返回一個函數(shù)作為bind方法執(zhí)行的返回值，所以這里需要return出去一個函數(shù)
            return function() {
   // 然后在把執(zhí)行當(dāng)前的方法進(jìn)行執(zhí)行并把myBind接受剩余參數(shù)傳遞過去，接受返回值
                let result = newThis.fn(...arg);
                //刪除當(dāng)前的函數(shù)以及傳遞過來的this,防止出現(xiàn)問題
                delete newThis.fn;
                // 將執(zhí)行結(jié)果返回
                return result;
            }
        };
       //調(diào)用bind函數(shù)，獲取返回值，他的返回值是一個函數(shù)，所以我們需要在調(diào)用一下
        let f1 = fnLog.myBind(obj, 2);
        //調(diào)用bind的返回值
        f1()

到此這篇關(guān)于JavaScript手寫call,apply,bind方法的文章就介紹到這了,更多相關(guān)JavaScript call內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: