50行javaScript代碼實(shí)現(xiàn)簡(jiǎn)單版的 call , apply ,bind 【中級(jí)前端面試

neuSnail 發(fā)布于2019-08-30 15:44 / 857人閱讀

摘要：自己實(shí)現(xiàn)在函數(shù)原型上定義自己的方法實(shí)現(xiàn)自己的臨時(shí)屬性同理，只是傳遞的第二個(gè)參數(shù)是數(shù)組，這里我們只需要在調(diào)用時(shí)，將參數(shù)用把數(shù)組展開(kāi)即可自己實(shí)現(xiàn)跟的本質(zhì)區(qū)別，不會(huì)改變?cè)瘮?shù)的指向，只會(huì)返回一個(gè)新的函數(shù)我們想要的那個(gè)指向，并且不會(huì)調(diào)用。

在實(shí)現(xiàn)自己的call,apply,bind前，需要復(fù)習(xí)一下this.

所謂的this其實(shí)可以理解成一根指針：

其實(shí) this 的指向，始終堅(jiān)持一個(gè)原理：this 永遠(yuǎn)指向最后調(diào)用它的那個(gè)對(duì)象,這就是精髓。最關(guān)鍵所在

this的四種指向：

當(dāng)this所在的函數(shù)被普通調(diào)用時(shí)，指向window，如果當(dāng)前是嚴(yán)格模式，則指向undefined

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

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

嚴(yán)格模式
"use strict";
function test() {
  console.log(this);
};
test();
// undefined

當(dāng)this所在當(dāng)函數(shù)被以obj.fn()形式調(diào)用時(shí)，指向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"

當(dāng)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)

此時(shí)控制臺(tái)并沒(méi)有代碼輸出，因?yàn)閎ind會(huì)重新生成并且返回一個(gè)函數(shù)，這個(gè)函數(shù)的this指向第一個(gè)參數(shù)

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

正式開(kāi)始自己實(shí)現(xiàn)call :

在函數(shù)原型上定義自己的myCall方法：

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

四行代碼實(shí)現(xiàn)了簡(jiǎn)單的call，思路如下：

通過(guò)對(duì)象屬性的方式調(diào)用函數(shù)，這個(gè)函數(shù)里面的this指向這個(gè)對(duì)象

每次調(diào)用新增一個(gè)symbol屬性，調(diào)用完畢刪除

這個(gè)symbol屬性就是調(diào)用mycall方法的函數(shù)

函數(shù)形參中使用...arg是將多個(gè)形參都塞到一個(gè)數(shù)組里，在函數(shù)內(nèi)部使用arg這個(gè)變量時(shí)，就是包含所有形參的數(shù)組

在調(diào)用 context[fn](...arg)時(shí)候，...arg是為了展開(kāi)數(shù)組，依次傳入?yún)?shù)調(diào)用函數(shù)

為了簡(jiǎn)化，今天都不做類(lèi)型判斷和錯(cuò)誤邊際處理，只把原理講清楚。

自己實(shí)現(xiàn)apply

在函數(shù)原型上定義自己的myApply方法：

//實(shí)現(xiàn)自己的myApply
    Function.prototype.myApply = function (context, arg) {
        const fn = Symbol("臨時(shí)屬性")
        context[fn] = this
        context[fn](...arg)
        delete context[fn]
    }

    const obj2 = {
        a: 1
    }

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

同理，只是apply傳遞的第二個(gè)參數(shù)是數(shù)組，這里我們只需要在調(diào)用時(shí)，將參數(shù)用...把數(shù)組展開(kāi)即可

自己實(shí)現(xiàn)bind：

bind跟apply,call的本質(zhì)區(qū)別，bind不會(huì)改變?cè)瘮?shù)的this指向，只會(huì)返回一個(gè)新的函數(shù)（我們想要的那個(gè)this指向），并且不會(huì)調(diào)用。但是apply和call會(huì)改變?cè)瘮?shù)的this指向并且直接調(diào)用

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

 //實(shí)現(xiàn)自己的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劫持保留最初的調(diào)用mybind方法的那個(gè)對(duì)象
返回一個(gè)新的函數(shù) 這個(gè)新的函數(shù)內(nèi)部this指向已經(jīng)確定，使用的是我們的mycall方法

學(xué)習(xí)需要循序漸進(jìn)，建議根據(jù)本文順序去封裝一遍，是比較輕松的，當(dāng)然bind還需要判斷是否是new調(diào)用.

完整版本bind


Function.prototype.myBind = function (objThis, ...params) {
    const thisFn = this; // 存儲(chǔ)源函數(shù)以及上方的params(函數(shù)參數(shù))
    // 對(duì)返回的函數(shù) secondParams 二次傳參
    let fToBind = function (...secondParams) {
        console.log("secondParams",secondParams,...secondParams)
        const isNew = this instanceof fToBind // this是否是fToBind的實(shí)例 也就是返回的fToBind是否通過(guò)new調(diào)用
        const context = isNew ? this : Object(objThis) // new調(diào)用就綁定到this上,否則就綁定到傳入的objThis上
        return thisFn.call(context, ...params, ...secondParams); // 用call調(diào)用源函數(shù)綁定this的指向并傳遞參數(shù),返回執(zhí)行結(jié)果
    };
    fToBind.prototype = Object.create(thisFn.prototype); // 復(fù)制源函數(shù)的prototype給fToBind
    return fToBind; // 返回拷貝的函數(shù)
};

覺(jué)得寫(xiě)得不錯(cuò)可以給個(gè)star，歡迎加入我們的前端交流群～：

現(xiàn)在人數(shù)超過(guò)了100人，所以只能加我，然后拉你們進(jìn)群！！

..]

GPU云服務(wù)器云服務(wù)器 JS中bind、call和apply的作 apply與call的區(qū)別 js中的call和apply php中級(jí) 面試

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/116230.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

neuSnail

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#yyds干貨盤(pán)點(diǎn)# 認(rèn)識(shí)和了解計(jì)算機(jī)網(wǎng)絡(luò)的分類(lèi)

閱讀 1845·2021-11-25 09:43
#黑五#Netcup：德國(guó)VPS、域名、虛擬主機(jī)優(yōu)惠；值得關(guān)注

閱讀 3688·2021-11-24 10:32
樹(shù)莓派31/100 - Pico連接HC-SR04超聲波傳感器，為自動(dòng)避障智能小車(chē)打好基礎(chǔ)

閱讀 1075·2021-10-13 09:39
2021京東云金秋上云特惠：企業(yè)上云專(zhuān)享受,云主機(jī)2核4G限量秒殺,僅155元/年

閱讀 2328·2021-09-10 11:24
愛(ài)用云互聯(lián)-香港4核4G 17元/月,美國(guó)特價(jià)1核1G 8元/月,湖北100G高防2核2G 40元/

閱讀 3344·2021-07-25 21:37
CSS三欄布局的經(jīng)典實(shí)現(xiàn)方法

閱讀 3464·2019-08-30 15:56
50行javaScript代碼實(shí)現(xiàn)簡(jiǎn)單版的 call , apply ,bind 【中級(jí)前端面試

閱讀 858·2019-08-30 15:44
簡(jiǎn)單記錄個(gè)a標(biāo)簽點(diǎn)不上的bug

閱讀 1448·2019-08-30 13:18

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

50行javaScript代碼實(shí)現(xiàn)簡(jiǎn)單版的 call , apply ,bind 【中級(jí)前端面試

相關(guān)文章