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

techstay 發布于2019-08-26 10:44 / 2546人閱讀

摘要：自己實現在函數原型上定義自己的方法實現自己的臨時屬性同理，只是傳遞的第二個參數是數組，這里我們只需要在調用時，將參數用把數組展開即可自己實現跟的本質區別，不會改變原函數的指向，只會返回一個新的函數我們想要的那個指向，并且不會調用。

在實現自己的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人，所以只能加我，然后拉你們進群！！

..]

云服務器 GPU云服務器 JS中bind、call和apply的作 apply與call的區別 js中的call和apply php中級面試

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106679.html

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

摘要：自己實現在函數原型上定義自己的方法實現自己的臨時屬性同理，只是傳遞的第二個參數是數組，這里我們只需要在調用時，將參數用把數組展開即可自己實現跟的本質區別，不會改變原函數的指向，只會返回一個新的函數我們想要的那個指向，并且不會調用。 showImg(https://segmentfault.com/img/bVbwgfN?w=1308&h=972); 在實現自己的call,apply,b...

neuSnail 2019-08-30 15:44 評論0 收藏0
前端20個真正靈魂拷問，吃透這些你就是中級前端工程師【上篇】

摘要：還是老規矩，從易到難吧傳統的定時器，異步編程等。分配對象時，先是在空間中進行分配。內存泄漏內存泄漏是指程序中己動態分配的堆內存由于某種原因程序未釋放或無法釋放，造成系統內存的浪費，導致程序運行速度減慢甚至系統崩潰等嚴重后果。 showImg(https://segmentfault.com/img/bVbwkad?w=1286&h=876); 網上參差不棄的面試題，本文由淺入深，讓你在...

mdluo 2019-08-30 15:44 評論0 收藏0
前端20個真正靈魂拷問，吃透這些你就是中級前端工程師【上篇】

摘要：還是老規矩，從易到難吧傳統的定時器，異步編程等。分配對象時，先是在空間中進行分配。內存泄漏內存泄漏是指程序中己動態分配的堆內存由于某種原因程序未釋放或無法釋放，造成系統內存的浪費，導致程序運行速度減慢甚至系統崩潰等嚴重后果。 showImg(https://segmentfault.com/img/bVbwkad?w=1286&h=876); 網上參差不棄的面試題，本文由淺入深，讓你在...

leap_frog 2019-08-26 10:46 評論0 收藏0
「中高級前端面試」JavaScript手寫代碼無敵秘籍

摘要：第一種直接調用避免在不必要的情況下使用，是一個危險的函數，他執行的代碼擁有著執行者的權利。來自于此外，實現需要考慮實例化后對原型鏈的影響。函數柯里化的主要作用和特點就是參數復用提前返回和延遲執行。手寫路徑導航實現一個new操作符實現一個JSON.stringify 實現一個JSON.parse 實現一個call或 apply 實現一個Function.bind 實現一個繼承實現一個J...

Zhuxy 2019-05-23 16:26 評論0 收藏0
從一道面試題，到“我可能看了假源碼”

摘要：返回的綁定函數也能使用操作符創建對象這種行為就像把原函數當成構造器。同時，將第一個參數以外的其他參數，作為提供給原函數的預設參數，這也是基本的顆粒化基礎。今天想談談一道前端面試題，我做面試官的時候經常喜歡用它來考察面試者的基礎是否扎實，以及邏輯、思維能力和臨場表現，題目是：模擬實現ES5中原生bind函數。也許這道題目已經不再新鮮，部分讀者也會有思路來解答。社區上關于原生bind的研...

Carson 2019-08-20 14:23 評論0 收藏0