手写简单call,apply,bind
分析一下call的使用方法:call是显示绑定this指向,然后第一个参数是你所指向的this对象,后面跟着多个参数,以逗号隔开
function sum(num1,num2){
return num1 + num2
}
sum.call({},1,2) // 3
上面是一个最简单的call使用方法,call的第一个参数,可以是对象,可以是数字,可以是空对象
当call的第一个参数是undefined或者是null时,他的指向是window
接下来就一步步的开始手写一个简单的call
首先第一步,我们需要在Function内添加一个原型对象hycall
Function.prototype.hycall=function(){
console.log('我是新的hycall对象');
}
sum.hycall() // 我是新的hycall对象
然后我们需要在内部执行sum的函数,但是由于这个hycall是通用式,不能写死内部的函数调用
这时候会有个问题:如何知道是谁调用了hycall??
其实很清楚的一个事情,对于this指向熟悉的都知道,sum.hycall是一个隐式绑定,此时的hycall内部的this就是当前的sum对象,我们用一个参数去接收this,再将其运行即可
Function.prototype.hycall=function(thisArg){
var fn = this // 外部的对象 sum,或者{}等等
fn()
}
function foo(){
console.log('我是foo对象',this);
}
sum.hycall({})
这里实现了一个最简单的call调用方式,接下来第二步,call的第一个参数是存在this指向的,此时的hycall需要接收一个参数对象thisArg,又因为这个参数是this的指向
问题二:如何让传来的this指向绑定到对象上?
对于传来的this指向,可以给其本身添加一个函数对象,再让其自身运行,相当于间接性的调用了函数
Function.prototype.hycall=function(thisArg){
var fn = this // 外部的对象 sum,或者{}等等
thisArg.fn=fn // thisArg身上添加一个fn
thisArg.fn() // 再将其调用即可
delete thisArg.fn // 调用完成之后再将其删除即可
}
function foo(){
console.log('我是foo对象',this);
}
sum.hycall({})
这里看似完成了对this参数的调用,但是此处又有问题出现:call是可以传入number等参数进入的,但是代码中不可能给一个数字添加函数例如123.fn(),此处又该如何解决?
这里有一个例子,当123要变成对象类型时,只需要new Number(123) ,便成为了一个对象。
以上例子说明,我们可以对thisArg进行对象转化
thisArg=Object(thisArg)
再考虑到call传入undefined或者null的时候,指向的this是window
我们对thisArg做出判断
thisArg=(thisArg !== null && thisArg !== undefined) ? thisArg=Object(thisArg) : window
第三步,对于传值,call除了能传递this指向,后方还可以跟多个传值,对于我们的hycall的接收,此处可以使用es6的rest参数语法 ...
Function.prototype.hycall=function(thisArg,...args){
var fn = this // 外部的对象 sum,或者{}等等
thisArg=(thisArg !== null && thisArg !== undefined) ? thisArg=Object(thisArg) : window // 判断thisArg是否存在,存在将其转换,不存在让其指向window
thisArg.fn=fn // thisArg身上添加一个fn
thisArg.fn(...args) // 再将其调用即可 spread--展开运算符
delete thisArg.fn // 调用完成之后再将其删除即可
}
function sum(a,b){
return a+b
}
sum.hycall({},1,2)
最后一步,接收返回值并返回出去
Function.prototype.hycall=function(thisArg,...args){
var fn = this // 外部的对象 sum,或者{}等等
thisArg=(thisArg !== null && thisArg !== undefined) ? thisArg=Object(thisArg) : window // 判断thisArg是否存在,存在将其转换,不存在让其指向window
thisArg.fn=fn // thisArg身上添加一个fn
var result = thisArg.fn(...args) // 再将其调用即可 spread--展开运算符
delete thisArg.fn // 调用完成之后再将其删除即可
return result
}
function sum(a,b){
return a+b
}
sum.hycall({},1,2)
以上是对call的一个简单的手写,如果对call的手写熟悉了,apply和bind其实也大同小异,apply第一个参数和call一样,但是第二个参数是以数组的方式进行传递
function sum(num1,num2){
console.log("sum被调用",this,num1,num2);
return num1+num2
}
// 系统调用
var result=sum.apply("abc",[20,30])
console.log(result);
上方是一个正常的系统调用,apply第二个参数不传值时会和call有些不一样
Function.prototype.hyapply=function(thisArg,argArray){
var fn = this // 外部的对象 sum,或者{}等等
thisArg=(thisArg !== null && thisArg !== undefined) ? thisArg=Object(thisArg) : window // 判断thisArg是否存在,存在将其转换,不存在让其指向window
argArray=argArray || []
thisArg.fn=fn // thisArg身上添加一个fn
var result = thisArg.fn(...argArray) // 再将其调用即可 spread--展开运算符
delete thisArg.fn // 调用完成之后再将其删除即可
return result
}
function sum(a,b){
return a+b
}
sum.hyapply({},1,2)
这里又有人要提问了:为什么call那里就可以不用判断第二个参数的值,你这里就需要呢?
因为在hycall中的第二个参数是...args 倘若我们未传值过来,...args的值=[],所以不需要对call的第二参数做出判断
下面开始对bind进行分析,bind是以返回一个函数的方法进行使用的
function sum(num1,num2,num3,num4){
console.log(num1,num2,num3.num4)
}
function bar(){
console.log("我是bar")
}
// 方式一
var newBar=bar.bind("aaa")
newBar()
// 方式二
var newSum=sum.bind("aaa",10,20,30,40)
newSum()
// 方式三
var newSum=sum.bind("aaa",10)
newSum(20,30,40)
手写bind函数
Function.prototype.hybind=function(thisArg,...argArray){
var fn = this // 外部的对象 sum,或者{}等等
thisArg=(thisArg !== null && thisArg !== undefined) ? thisArg=Object(thisArg) : window
function proxyFn(){
thisArg.fn=fn
var result=thisArg.fn()
deletr thisArg.fn
return result
}
return proxyFn
}
function sum(a,b){
return a+b
}
var newSum=sum.hybind("aaa")
newSum()
接下来需要考虑上方的一种情况
// 方式三
var newSum=sum.bind("aaa",10)
newSum(20,30,40)
由于我们的hybind只有两个参数,但你传第三个参数的时候,就需要内部调用
Function.prototype.hybind=function(thisArg,...argArray){
var fn = this // 外部的对象 sum,或者{}等等
thisArg=(thisArg !== null && thisArg !== undefined) ? thisArg=Object(thisArg) : window
function proxyFn(...args){ //此处接收第三个参数
thisArg.fn=fn
var finalArgs=[...argArray,...args]//拼接两个数组
var result=thisArg.fn(...finalArgs)
deletr thisArg.fn
return result
}
return proxyFn
}
function sum(a,b){
return a+b
}
var newSum=sum.hybind("aaa",10)
newSum(20,30,40)
以上就是对三个显示绑定的简单手写,其实对于上面的边界判断其实还不是很完善,例如=0的时候(优化边界判断),例如fn本身就存在然后给覆盖(使用ES6-symbol语法定义解决)等等
如有更好的意见和完善的地方欢迎补充留言,感谢coderwhy老师的指导
手写简单call,apply,bind的更多相关文章
- 不使用Tomcat,手写简单的web服务
背景: 公司使用的YDB提供了http的查询数据库服务,直接通过url传入sql语句查询数据-_-||.ydb的使用参照:https://www.cnblogs.com/hd-zg/p/7115112 ...
- 手写call、apply、bind
区别&联系 三者都是指定函数执行时的上下文,第一个参数都是上下文: call从第二个参数开始,后续所有的参数传递给函数执行: apply第二个参数是一个数组,传递给函数执行: bind返回一个 ...
- 手写简单的jq雪花飘落
闲来无事,准备写个雪花飘落的效果,没有写太牛逼的特效,极大的简化了代码量,这样容易读取代码,用起来也很简单,对于那些小白简直是福利啊,简单易读易学.先直接上代码吧,然后再一一讲解,直接复制粘贴就可以拿 ...
- 利用Java手写简单的httpserver
前言: 在看完尚学堂JAVA300中讲解如何实现一个最简单的httpserver部分的视频之后, 一.前置知识 1.HTTP协议 当前互联网网页访问主要采用了B/S的模式,既一个浏览器,一个服务器,浏 ...
- 手写简单PE
环境工具:Windows 10 010Editor 目标程序功能: 调用MessageBoxA弹出消息框. 1.构造DOS头 typedef struct _IMAGE_DOS_HEADER { // ...
- 通过反射来手写简单的ORM SQlserver
不说废话,直接上干货,如发现问题,欢迎大家指出,谢谢! //------------------------------------MySQlServerORM [简单 CURD] using Sys ...
- 手写简单的promise
function Promise(fn) { var that = this; this.status = "pedding"; this.value = undefined; / ...
- node搭环境(四)--webpack启服务运行VUE模块文件(手写简单脚手架)
webpack启服务步骤: 1.新建空文件夹webpack-vue.在空文件夹右键点击- GIt Bath here--输入cnpm init--按程序走完会生成package.json文件 2.打开 ...
- 手写简单的php生成Html网页
这个是基本功,以前用到laravel及thinkphp时,这一步,都被设置好了吧. 这里只依靠纯的php环境,而没有任何框架, 而框架,只是将这一切规范化,加快代码效率及减小沟通成本,维护升级也方便, ...
随机推荐
- 「AHOI2013」 差异
知识点: SA,线段树,单调栈 原题面 Loj Luogu 题意简述 给定一长度为 \(n\) 的字符串 \(S\),令 \(T_i\) 表示从第 \(i\) 个字符开始的后缀,求: \[\sum_{ ...
- IM2603 Type-C扩展坞电源管理 IC
IM2603 概述 用于带有集成降压转换器的 Type-C 外围应用的电源管理 IC IM2603 是一款主要用于 Type-C 外围应用的电源管理 IC. 它集成了一个带有内置高侧 MOSFET 的 ...
- Java工程编码格式由GBK转化成utf-8(编码格式互转)
在写项目的过程中我发现有的地方编码格式被设置成了 gbk 如果用eclipse等工具直接改回utf-8编码格式则会出现乱码. 下载:https://download.csdn.net/download ...
- Oracle 创建数据表以及对数据表、字段、主外键、约束的操作
选择主键的原则: 最少性 尽量选择使用单个键作为主键 稳定性 尽量选择数值更新少的列作为主键 1.创建数据表(CREATE TABLE) --创建数据表Student create table Stu ...
- 【Linux】Linux安装Tomcat
1.下载Tomcat 链接:Tomcat下载链接 提取码:88ae 链接:Xshell下载链接 提取码:439l 2.创建一个文件夹,上传tomcat到此文件夹 [root@localhost bin ...
- RabbitMQ开启SSL与SpringBoot连接测试
楔子 近期公司程序被安全扫描出 远程主机允许明文身份验证 中风险漏洞,查了下修复方案,RabbitMQ官方提供了SSL连接方式,而且 SpringBoot AMQP 也支持 SSL 连接.以下将配置R ...
- android studio 配置 Lombok 插件 -具体步骤
1.前言 idea 用惯了 Lombok 插件了,好用的很,可是开发安卓 却没有,即便在 android studio 安装了插件,但是仍然无法使用 因为需要配置 2.解决 (1)进入设置,找到插件设 ...
- NIO【同步非阻塞io模型】关于 NIO socket 的详细总结【Java客户端+Java服务端 + 业务层】【可以客户端间发消息】
1.前言 以前使用 websocket来实现双向通信,如今深入了解了 NIO 同步非阻塞io模型 , 优势是 处理效率很高,吞吐量巨大,能很快处理大文件,不仅可以 做 文件io操作, 还可以做sock ...
- 基于springboot的定时任务实现(非分布式)
1. 核心注解 在springboot项目中我们可以很方便地使用spring自己的注解@Scheduled和@EnableScheduling配合来实现便捷开发定时任务. @EnableSchedul ...
- css上下居中
position: absolute; top: 20%; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50% ...