手写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) ...
随机推荐
- .net webapi跨域问题
2019年11月8日,近期做项目开始实行前后端分离的方式开发,前端使用vue的框架,打包发布后,调用后端接口出现跨域的问题,网上搜索出来的都是以下的配置方式: 但是,在我的项目中,按这种方式配置没有效 ...
- asp.net 创建虚拟目录 iis创建虚拟目录
这几天本人接了个档案管理查询系统的小项目,踩过的坑. 其实功能都挺简单的,大致要求客户有很多pdf文档,为了方便管理,所有要开发一个相当于文件管理系统,本人正好有现成的文件管理系统,修改下就可以.其中 ...
- Java学习——包装类
Java学习——包装类 摘要:本文主要介绍了Java中常用的包装类和基本类型之间的转换,包装类或基本类型和String之间的转换. 部分内容来自以下博客: https://www.cnblogs.co ...
- Linux进程管理 (篇外)内核线程简要介绍【转】
转自:https://www.cnblogs.com/arnoldlu/p/8336998.html 关键词:kthread.irq.ksoftirqd.kworker.workqueues 在使用p ...
- 11、shell_sed
正则表达式:正则表达式,就是用一种模式,去匹配一类字符串的公式. 正则表达式的解释是用正则表达式引擎来实现的,常用正则表达式引擎有两类: 基本正则.扩展正则. 正则表达式基础: 正则表达式是由一些 ...
- spring-cloud-kubernetes服务发现之在k8s环境下开发spring cloud应用
通常情况下,我们的线上的服务在迁移到k8s环境下的时候,都是采用平滑迁移的方案.服务治理与注册中心等都是采用原先的组件.比如spring cloud应用,在k8s环境下还是用原来的一套注册中心(如eu ...
- 虚拟机安装苹果macOS系统
Windows10系统虚拟机vmware15上装macos系统 一.简要步骤: 1.准备软件. 2.关闭VMware服务: 3.解压unlocker,运行文件: 4.启动vmware,选择macOS镜 ...
- Rust中的Slices
这个slice切片,python中有,go中有, 但确实,Rust中最严格. 精彩见如下URL: Rust 程序设计语言(第二版) 简体中文版 · GitBook (Legacy) https://k ...
- 跳表和ConcurrentSkipListMap解析
二分查找和AVL树查找 二分查找要求元素可以随机访问,所以决定了需要把元素存储在连续内存.这样查找确实很快,但是插入和删除元素的时候,为了保证元素的有序性,就需要大量的移动元素了. 如果需要的是一个能 ...
- 201871020225-牟星源《面向对象程序设计(java)》第十五周学习总结
201871020225-牟星源<面向对象程序设计(java)>第十五周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...