实现bind函数

参考MDN提供的Polyfill方案

  1. Function.prototype.myBind = function(context){
  2. //这里对调用者做一个判断,如果不是函数类型,直接抛异常
  3. if(typeof this !== 'function'){
  4. throw '调用必须为函数'
  5. }
  6. //当我们调用bind函数时,我们可能传了不只一个参数
  7. //如 fun.bind({}, arg1, arg2)
  8. //我们需要把后面的参数拿出来
  9. let args = Array.prototype.slice.call(arguments, 1);
  10. let fToBind = this;
  11. let fNOP = function(){};
  12. let fBound = function(){
  13. return fToBind.apply(this instanceof fNOP ? this : context, args.concat(arguments));
  14. }
  15. if(this.prototype){
  16. fNOP.prototype = this.prototype;
  17. }
  18.  
  19. fBound.prototype = new fNOP();
  20.  
  21. return fBound;
  22. }

fBound函数这里有个判断 this instanceof FNOP 这个其实是为了避免一种情况,因为bind函数返回的是一个函数,当我们把这个函数实例化(就是new fun())

根据官方文档 当返回的函数被实例化的时候,this指向会锁定指向该实例,不管我们传入的参数指定this指向。

在下面我们 返回的fBound函数时 继承一个空函数 FNOP, 当返回的函数被实例化之后,this instanceof fNOP 结果为true,从而指定this指向

  1. function a (){}
  2. function b (){}
  3.  
  4. a.prototype = new b();
  5.  
  6. //如果我们返回的函数实例化了
  7. let c = new a();
  8. c instanceof b //true
  9. //但是大多数情况我们都是
  10. a instanceof b // false

如果这里明白了,那后面的就简单了,context 参数就是我们手动指定的this指向, 当我们绑定bind时会传递多个参数,执行的时候也会带参数,我们就需要把bind

函数除掉第一个以外的参数和我们调用方式时的参数进行拼接

  1. function foo (){}
  2. //示例中 args 就是指的[arg1, arg2]
  3. //args.concat(arguments) 就是将所有的arg1,arg2...arg4的参数进行拼接
  4. let newFoo = foo.bind({}, arg1, arg2);
  5. newFoo(arg3, arg4);

另外 arguments 参数不要搞混淆了,上面那个获取的是bind时的参数(就是{}, arg1, arg2

下面的arguments 参数是指的调用时的 (就是 arg3, arg4)

手写bind函数的更多相关文章

  1. 理解并手写 bind() 函数

    有了对call().apply()的前提分析,相信bind()我们也可以手到擒来. 参考前两篇:'对call()函数的分析' 和 '对apply()函数的分析',我们可以先得到以下代码: Functi ...

  2. 前端面试题整理——手写bind函数

    var arr = [1,2,3,4,5] console.log(arr.slice(1,4)) console.log(arr) Function.prototype.bind1 = functi ...

  3. 优雅手撕bind函数(面试官常问)

    优雅手撕bind函数 前言: 为什么面试官总爱让实现一个bind函数? 他想从bind中知道些什么? 一个小小的bind里面内有玄机? 今天来刨析一下实现一个bind要懂多少相关知识点,也方便我们将零 ...

  4. WPF启动流程-自己手写Main函数

    WPF一般默认提供一个MainWindow窗体,并在App.Xaml中使用StartupUri标记启动该窗体.以下通过手写实现WPF的启动. 首先先介绍一下VS默认提供的App.Xaml的结构,如下图 ...

  5. 理解并手写 call() 函数

    手写自己的call,我们要先通过call的使用,了解都需要完成些什么功能? call()进行了调用,是个方法,已知是建立在原型上的,使用了多个参数(绑定的对象+传递的参数). 我们把手写的函数起名为m ...

  6. 理解并手写 apply() 函数

    apply()函数,在功能上类似于call(),只是传递参数的格式有所不同. dog.eat.call(cat, '鱼', '肉'); dog.eat.apply(cat, ['鱼', '肉']); ...

  7. C++之手写strlen函数

    代码: int strlen(const char *str){ assert(str!=NULL); intlen=; while((*str++)!='\0') len++; return len ...

  8. js面试题之手写节流函数和防抖函数

    函数节流:不断触发一个函数后,执行第一次,只有大于设定的执行周期后才会执行第二次 /* 节流函数:fn:要被节流的函数,delay:规定的时间 */ function throttle(fn,dela ...

  9. 手写Bind

    Function.prototype.bind2 = function(context){ var self = this; var args = [].slice.call(arguments,1) ...

随机推荐

  1. 1、Ext.NET 1.7官方示例笔记-事件

    官网参考地址:https://examples1.ext.net/#/Events/DirectEvents/Overview/ 先了解一下“事件” Ext.NET包括3种事件机制 DirectEve ...

  2. SQLAlchemy多表操作

    目录 SQLAlchemy多表操作 一对多 数据准备 具体操作 多对多 数据准备 操作 其它 SQLAlchemy多表操作 一对多 数据准备 models.py from sqlalchemy.ext ...

  3. css中的行内元素和块级元素总结

    块级元素 <address>,  <button>,  <caption>,  <dd>,  <del>,  <div>,  & ...

  4. hashlib(hmac)进阶之client跟server交互

    首先我还是要强调不管任何相同的字符串通过hashlib加密之后都会产生相同的32位字符串,这个是日常Web中常用的加密算法如果我的client发送一个请求过来我server接受到后就要对该密码进行判断 ...

  5. python 之Lambda表达式

    python 的 lambda 表达式 python写一些执行脚本时,使用lambda就可以省下定义函数的过程,比如说我们只是需要写个简单的脚本来管理服务器时,我们就不用专门定义函数然后再写调用,使用 ...

  6. JDBC学习笔记一

    JDBC学习笔记一 JDBC全称 Java Database Connectivity,即数据库连接,它是一种可以执行SQL语句的Java API. ODBC全称 Open Database Conn ...

  7. Maven 依赖范围 scope 属性详解

    依赖范围就是用来控制依赖与三种 classpath(编译 classpath.测试 classpath.运行 classpath)的关系. 依赖范围(scope) 对于编译 classpath 有效 ...

  8. adb连接夜神模拟器与adb常用操作命令

    adb connect 127.0.0.1:62001 adb kill-server 在关闭adb服务后,要使用如下的命令启动adb服务. adb start-servermore than one ...

  9. 11-numpy笔记-莫烦基础操作1

    代码 import numpy as np array = np.array([[1,2,5],[3,4,6]]) print('-1-') print('数组维度', array.ndim) pri ...

  10. NOIP 2012 Vigenère 密码

    洛谷 P1079 Vigenère 密码 https://www.luogu.org/problemnew/show/P1079 JDOJ 1779: [NOIP2012]Vigenèr密码 D1 T ...