bind 函數的使用與polyfill

琛ｈ。發布于2019-08-22 11:07 / 1685人閱讀

摘要：綁定函數被調用時，也接受預設的參數提供給原函數。一個綁定函數也能使用操作符創建對象這種行為就像把原函數當成構造器。

說明

bind()方法創建一個新的函數, 當被調用時，將其this關鍵字設置為提供的值，在調用新函數時，在任何提供之前提供一個給定的參數序列。

語法

fun.bind(thisArg[, arg1[, arg2[, ...]]])

參數

thisArg

當綁定函數被調用時，該參數會作為原函數運行時的 this 指向。當使用new 操作符調用綁定函數時，該參數無效。

arg1, arg2, ...

當綁定函數被調用時，這些參數將置于實參之前傳遞給被綁定的方法。

返回值,返回由指定的this值和初始化參數改造的原函數拷貝

描述

bind() 函數會創建一個新函數（稱為綁定函數），新函數與被調函數（綁定函數的目標函數）具有相同的函數體（在 ECMAScript 5 規范中內置的call屬性）。當新函數被調用時 this 值綁定到 bind() 的第一個參數，該參數不能被重寫。綁定函數被調用時，bind() 也接受預設的參數提供給原函數。一個綁定函數也能使用new操作符創建對象：這種行為就像把原函數當成構造器。提供的 this 值被忽略，同時調用時的參數被提供給模擬函數。

兼容舊瀏覽器polyfill

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable")
    }

    var aArgs = Array.prototype.slice.call(arguments, 1), 
      fToBind = this, 
      fNOP = function () {},
      fBound = function () {
        fBound.prototype = this instanceof fNOP ? new fNOP() : fBound.prototype
        return fToBind.apply(this instanceof fNOP
                                 ? this
                                 : oThis || this,
                                 aArgs )
        }   
//aArgs.concat(Array.prototype.slice.call(arguments));why use concat method instead of aArgs here
    if( this.prototype ) {
      // Function.prototype doesn"t have a prototype property
      fNOP.prototype = this.prototype
    }

    return fBound
  }
}

上述算法和實際的實現算法還有許多其他的不同 （盡管可能還有其他不同之處，卻沒有那個必要去窮盡）：這部分實現依賴于`Array.prototype.slice()`,`Array.prototype.concat()`,`Function.prototype.call()`這些原生方法。這部分實現創建的函數的實現并沒有caller 以及會在 get，set或者deletion上拋出TypeError錯誤的 arguments 屬性這兩個不可改變的“毒藥” 。（假如環境支持{jsxref("Object.defineProperty")}}， 或者實現支持__defineGetter__ and __defineSetter__ 擴展）,這部分實現創建的函數有 prototype 屬性。（正確的綁定函數沒有的）

GPU云服務器云服務器 Binding使用 bind服務器與 hbase的安裝與使用免費域名的申請與使用

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

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

手動實現bind函數（附MDN提供的Polyfill方案解析）

摘要：被調用時，等參數將置于實參之前傳遞給被綁定的方法。它返回由指定的值和初始化參數改造的原函數拷貝。一個綁定函數也能使用操作符創建對象這種行為就像把原函數當成構造器。其實這個思路也是庫如何實現繼承的方法。他的函數如下最后一步是將的指回。 update: 2018-06-08 原文鏈接為什么要自己去實現一個bind函數？ bind()函數在 ECMA-262 第五版才被加入；它可能無法在所...

idisfkj 2019-08-26 12:00 評論0 收藏0
Polyfill：Function.prototype.bind的四個階段

摘要：第二階段被忽略的細節函數的屬性，用于表示函數的形參。第三階段被忽視的細節通過生成的構造函數。五本文涉及的知識點的用法的用法除操作符外的構造函數的用法下詭異的命名函數表達式技術六總結在這之前從來沒想過一個的會涉及這么多知識點，感謝給的啟發。昨天邊參考es5-shim邊自己實現Function.prototype.bind，發現有不少以前忽視了的地方，這里就作為一個小總結吧。一、Fu...

mudiyouyou 2019-08-22 10:57 評論0 收藏0
關于JS函數的bind

摘要：昨天被人問到的的作用是什么這個倒還能回答出來，之后返回一個新的函數，這個函數可以保持傳遞的上下文。沒有完全實現規定的。比如規定了的和行為。 https://friskfly.github.io/2016/03/24/about-function-bind-in-js/ 昨天被人問到js的bind的作用是什么？這個倒還能回答出來，bind 之后返回一個新的函數，這個函數可以保持傳遞的t...

CloudwiseAPM 2019-08-19 17:57 評論0 收藏0
從一道面試題，到“我可能看了假源碼”

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

Carson 2019-08-20 14:23 評論0 收藏0
從一道面試題，到“我可能看了假源碼”

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

rockswang 2019-08-30 15:52 評論0 收藏0