如何手寫call、apply、bind？

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

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

call

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

手寫call

Function.prototype.myCall = function(context = window, ...args) {
  context = context || window; // 參數(shù)默認值并不會排除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ù)組或類數(shù)組，立刻執(zhí)行，返回函數(shù)返回值

手寫apply：

Function.prototype.myApply = function(context = window, args = []) {
  context = context || window; // 參數(shù)默認值并不會排除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相同，但是不會執(zhí)行，返回已綁定this的新函數(shù)

手寫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云服務器云服務器 JS中bind、call和apply的作 apply與call的區(qū)別 js中的call和apply apply()

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/103448.html

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

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

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

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

gecko23 2019-05-23 13:55 評論0 收藏0
手寫call、apply、bind及相關面試題解析

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

TwIStOy 2019-08-23 14:48 評論0 收藏0
手寫JavaScript中的bind方法

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

AZmake 2019-08-26 13:35 評論0 收藏0
面試題里的那些各種手寫

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

wh469012917 2019-08-23 16:58 評論0 收藏0