手写bind函数
实现bind函数
参考MDN提供的Polyfill方案
- Function.prototype.myBind = function(context){
- //这里对调用者做一个判断,如果不是函数类型,直接抛异常
- if(typeof this !== 'function'){
- throw '调用必须为函数'
- }
- //当我们调用bind函数时,我们可能传了不只一个参数
- //如 fun.bind({}, arg1, arg2)
- //我们需要把后面的参数拿出来
- let args = Array.prototype.slice.call(arguments, 1);
- let fToBind = this;
- let fNOP = function(){};
- let fBound = function(){
- return fToBind.apply(this instanceof fNOP ? this : context, args.concat(arguments));
- }
- if(this.prototype){
- fNOP.prototype = this.prototype;
- }
- fBound.prototype = new fNOP();
- return fBound;
- }
fBound函数这里有个判断 this instanceof FNOP 这个其实是为了避免一种情况,因为bind函数返回的是一个函数,当我们把这个函数实例化(就是new fun())
根据官方文档 当返回的函数被实例化的时候,this指向会锁定指向该实例,不管我们传入的参数指定this指向。
在下面我们 返回的fBound函数时 继承一个空函数 FNOP, 当返回的函数被实例化之后,this instanceof fNOP 结果为true,从而指定this指向
- function a (){}
- function b (){}
- a.prototype = new b();
- //如果我们返回的函数实例化了
- let c = new a();
- c instanceof b //true
- //但是大多数情况我们都是
- a instanceof b // false
如果这里明白了,那后面的就简单了,context 参数就是我们手动指定的this指向, 当我们绑定bind时会传递多个参数,执行的时候也会带参数,我们就需要把bind
函数除掉第一个以外的参数和我们调用方式时的参数进行拼接
- function foo (){}
- //示例中 args 就是指的[arg1, arg2]
- //args.concat(arguments) 就是将所有的arg1,arg2...arg4的参数进行拼接
- let newFoo = foo.bind({}, arg1, arg2);
- newFoo(arg3, arg4);
另外 arguments 参数不要搞混淆了,上面那个获取的是bind时的参数(就是{}, arg1, arg2)
下面的arguments 参数是指的调用时的 (就是 arg3, arg4)
手写bind函数的更多相关文章
- 理解并手写 bind() 函数
有了对call().apply()的前提分析,相信bind()我们也可以手到擒来. 参考前两篇:'对call()函数的分析' 和 '对apply()函数的分析',我们可以先得到以下代码: Functi ...
- 前端面试题整理——手写bind函数
var arr = [1,2,3,4,5] console.log(arr.slice(1,4)) console.log(arr) Function.prototype.bind1 = functi ...
- 优雅手撕bind函数(面试官常问)
优雅手撕bind函数 前言: 为什么面试官总爱让实现一个bind函数? 他想从bind中知道些什么? 一个小小的bind里面内有玄机? 今天来刨析一下实现一个bind要懂多少相关知识点,也方便我们将零 ...
- WPF启动流程-自己手写Main函数
WPF一般默认提供一个MainWindow窗体,并在App.Xaml中使用StartupUri标记启动该窗体.以下通过手写实现WPF的启动. 首先先介绍一下VS默认提供的App.Xaml的结构,如下图 ...
- 理解并手写 call() 函数
手写自己的call,我们要先通过call的使用,了解都需要完成些什么功能? call()进行了调用,是个方法,已知是建立在原型上的,使用了多个参数(绑定的对象+传递的参数). 我们把手写的函数起名为m ...
- 理解并手写 apply() 函数
apply()函数,在功能上类似于call(),只是传递参数的格式有所不同. dog.eat.call(cat, '鱼', '肉'); dog.eat.apply(cat, ['鱼', '肉']); ...
- C++之手写strlen函数
代码: int strlen(const char *str){ assert(str!=NULL); intlen=; while((*str++)!='\0') len++; return len ...
- js面试题之手写节流函数和防抖函数
函数节流:不断触发一个函数后,执行第一次,只有大于设定的执行周期后才会执行第二次 /* 节流函数:fn:要被节流的函数,delay:规定的时间 */ function throttle(fn,dela ...
- 手写Bind
Function.prototype.bind2 = function(context){ var self = this; var args = [].slice.call(arguments,1) ...
随机推荐
- 1、Ext.NET 1.7官方示例笔记-事件
官网参考地址:https://examples1.ext.net/#/Events/DirectEvents/Overview/ 先了解一下“事件” Ext.NET包括3种事件机制 DirectEve ...
- SQLAlchemy多表操作
目录 SQLAlchemy多表操作 一对多 数据准备 具体操作 多对多 数据准备 操作 其它 SQLAlchemy多表操作 一对多 数据准备 models.py from sqlalchemy.ext ...
- css中的行内元素和块级元素总结
块级元素 <address>, <button>, <caption>, <dd>, <del>, <div>, & ...
- hashlib(hmac)进阶之client跟server交互
首先我还是要强调不管任何相同的字符串通过hashlib加密之后都会产生相同的32位字符串,这个是日常Web中常用的加密算法如果我的client发送一个请求过来我server接受到后就要对该密码进行判断 ...
- python 之Lambda表达式
python 的 lambda 表达式 python写一些执行脚本时,使用lambda就可以省下定义函数的过程,比如说我们只是需要写个简单的脚本来管理服务器时,我们就不用专门定义函数然后再写调用,使用 ...
- JDBC学习笔记一
JDBC学习笔记一 JDBC全称 Java Database Connectivity,即数据库连接,它是一种可以执行SQL语句的Java API. ODBC全称 Open Database Conn ...
- Maven 依赖范围 scope 属性详解
依赖范围就是用来控制依赖与三种 classpath(编译 classpath.测试 classpath.运行 classpath)的关系. 依赖范围(scope) 对于编译 classpath 有效 ...
- adb连接夜神模拟器与adb常用操作命令
adb connect 127.0.0.1:62001 adb kill-server 在关闭adb服务后,要使用如下的命令启动adb服务. adb start-servermore than one ...
- 11-numpy笔记-莫烦基础操作1
代码 import numpy as np array = np.array([[1,2,5],[3,4,6]]) print('-1-') print('数组维度', array.ndim) pri ...
- NOIP 2012 Vigenère 密码
洛谷 P1079 Vigenère 密码 https://www.luogu.org/problemnew/show/P1079 JDOJ 1779: [NOIP2012]Vigenèr密码 D1 T ...