bind 函数的使用与polyfill

琛ｈ。发布于2019-08-22 11:07 / 1682人阅读

摘要：绑定函数被调用时，也接受预设的参数提供给原函数。一个绑定函数也能使用操作符创建对象这种行为就像把原函数当成构造器。

说明

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 属性。（正确的绑定函数没有的）

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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