如何手寫(xiě)call、apply、bind？

VEIGHTZ 發(fā)布于2019-08-23 16:53 / 2456人閱讀

摘要：可以改變，并且傳入?yún)?shù)，立刻執(zhí)行，返回函數(shù)返回值手寫(xiě)參數(shù)默認(rèn)值并不會(huì)排除，所以重新賦值是調(diào)用的函數(shù)執(zhí)行后刪除新增屬性可以改變，并且傳入?yún)?shù)，與不同的是，傳入的參數(shù)是數(shù)組或類(lèi)數(shù)組，立刻執(zhí)行，返回函數(shù)返回值手寫(xiě)參數(shù)默認(rèn)值并不會(huì)排除，所以重新賦值

call

Function.prototype.call(this, arg1, arg2, …..)
可以改變this，并且傳入?yún)?shù)，立刻執(zhí)行，返回函數(shù)返回值

手寫(xiě)call

Function.prototype.myCall = function(context = window, ...args) {
  context = context || window; // 參數(shù)默認(rèn)值并不會(huì)排除null，所以重新賦值
  context.fn = this; // this是調(diào)用call的函數(shù)
  const result = context.fn(...args);
  delete context.fn; // 執(zhí)行后刪除新增屬性
  return result;
}

apply

Function.prototype.apply(this, [arg1, arg2, …..])
可以改變this，并且傳入?yún)?shù)，與call不同的是，傳入的參數(shù)是數(shù)組或類(lèi)數(shù)組，立刻執(zhí)行，返回函數(shù)返回值

手寫(xiě)apply：

Function.prototype.myApply = function(context = window, args = []) {
  context = context || window; // 參數(shù)默認(rèn)值并不會(huì)排除null，所以重新賦值
  context.fn = this; // this是調(diào)用call的函數(shù)
  const result = context.fn(...args);
  delete context.fn;
  return result;
}

bind

Function.prototype.bind(this, arg1, arg2, …)
可以綁定this，并且傳入?yún)?shù)，方式與call相同，但是不會(huì)執(zhí)行，返回已綁定this的新函數(shù)

手寫(xiě)bind：

Function.prototype.myBind = function(context, ...args) {
  const _this = this;
  return function Bind(...newArgs) {
    // 考慮是否此函數(shù)被繼承
    if (this instanceof Bind) {
      return _this.myApply(this, [...args, ...newArgs])
    }
    return _this.myApply(context, [...args, ...newArgs])
  }
}

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/103448.html

相關(guān)文章

js函數(shù)this理解？手寫(xiě)apply、call、bind就夠了

摘要：一是什么函數(shù)的內(nèi)部屬性，引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象。函數(shù)做為節(jié)點(diǎn)事件調(diào)用時(shí)指向節(jié)點(diǎn)本身做為構(gòu)造函數(shù)實(shí)力化方法時(shí)指向?qū)嵗龑?duì)象箭頭函數(shù)里的普通函數(shù)，由于閉包函數(shù)是執(zhí)行的，所以指向箭頭函數(shù)的指向函數(shù)創(chuàng)建時(shí)的作用域。一、this是什么？函數(shù)的內(nèi)部屬性，this引用的是函數(shù)據(jù)以執(zhí)行的環(huán)境對(duì)象。也就是說(shuō)函數(shù)的this會(huì)指向調(diào)用函數(shù)的執(zhí)行環(huán)境。 function a(){ retur...

Cciradih 2019-08-26 10:39 評(píng)論0 收藏0
手寫(xiě)call、apply、bind函數(shù)

摘要：函數(shù)特點(diǎn)可以改變我們當(dāng)前函數(shù)的指向還會(huì)讓當(dāng)前函數(shù)執(zhí)行題目自測(cè)思路解析執(zhí)行傳入三個(gè)參數(shù)函數(shù)內(nèi)部執(zhí)行傳入三個(gè)參數(shù)函數(shù)內(nèi)部執(zhí)行 call函數(shù) 特點(diǎn)： 1)可以改變我們當(dāng)前函數(shù)的this指向 2）還會(huì)讓當(dāng)前函數(shù)執(zhí)行 Function.prototype.call = function (context) { if (typeof this !== function) { thro...

gecko23 2019-05-23 13:55 評(píng)論0 收藏0
手寫(xiě)call、apply、bind及相關(guān)面試題解析

摘要：我是前端我的全名是我是一個(gè)前端指向接收多個(gè)參數(shù)，第一個(gè)是返回值返回值是一個(gè)函數(shù)上下文的，不會(huì)立即執(zhí)行?？吕锘嚓P(guān)講解請(qǐng)移步簡(jiǎn)版的實(shí)現(xiàn)就算完成了歡迎吐槽點(diǎn)贊它們有什么不同？怎么用？ call 接收多個(gè)參數(shù)，第一個(gè)為函數(shù)上下文也就是this，后邊參數(shù)為函數(shù)本身的參數(shù)。 let obj = { name: 一個(gè) } ...

TwIStOy 2019-08-23 14:48 評(píng)論0 收藏0
手寫(xiě)JavaScript中的bind方法

摘要：如果綁定后的函數(shù)被了，那么此時(shí)指向就發(fā)生改變。構(gòu)造函數(shù)上的屬性和方法，每個(gè)實(shí)例上都有。接下來(lái)聲明一個(gè)函數(shù)，在該中獲取了第二次傳的參數(shù)，并且返回了的執(zhí)行。的又等于的實(shí)例。至此，就實(shí)現(xiàn)了自己的方法。之前已經(jīng)實(shí)現(xiàn)過(guò)了call，apply和new。今天順便把bind也實(shí)現(xiàn)下。首先： bind方法返回的是一個(gè)綁定this后的函數(shù)，并且該函數(shù)并沒(méi)有執(zhí)行，需要手動(dòng)去調(diào)用。(從這一點(diǎn)看bind函數(shù)...

AZmake 2019-08-26 13:35 評(píng)論0 收藏0
面試題里的那些各種手寫(xiě)

摘要：最近準(zhǔn)備初級(jí)前端面試，發(fā)現(xiàn)有很多手寫(xiě)實(shí)現(xiàn)什么的，例如什么手寫(xiě)實(shí)現(xiàn)，。后面以這道題為引線(xiàn)面試官可能會(huì)追問(wèn)什么是執(zhí)行上下文的判斷，的區(qū)別手寫(xiě)一個(gè)函數(shù)實(shí)現(xiàn)斐波那契數(shù)列首先拷一個(gè)阮神在他教程里的一個(gè)寫(xiě)法。最近準(zhǔn)備初級(jí)前端面試，發(fā)現(xiàn)有很多手寫(xiě)實(shí)現(xiàn)什么的，例如什么手寫(xiě)實(shí)現(xiàn)bind，promise。手寫(xiě)ajax，手寫(xiě)一些算法。翻閱了很多書(shū)籍和博客。這里做一個(gè)總結(jié)改進(jìn)，算是對(duì)我后面大概為期一個(gè)月找...

wh469012917 2019-08-23 16:58 評(píng)論0 收藏0