手写简单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环境,而没有任何框架, 而框架,只是将这一切规范化,加快代码效率及减小沟通成本,维护升级也方便, ...
随机推荐
- IDEA 延长使用
压缩包下载地址:https://i.cnblogs.com/files 1.先以试用的形式进入idea,然后help -> Edit Custom VM Options 2.插入 :-javaa ...
- [数学]高数部分-Part III 中值定理与一元微分学应用
Part III 中值定理与一元微分学应用 回到总目录 Part III 中值定理与一元微分学应用 1. 中值定理 费马定理 罗尔定理 拉格朗日中值定理 柯西中值定理 柯西.拉格朗日.罗尔三者间的关系 ...
- 【C#】C#中使用GDAL3(三):Windows下编译插件驱动
转载请注明原文地址:https://www.cnblogs.com/litou/p/15720236.html 本文为<C#中使用GDAL3>的第三篇,总目录地址:https://www. ...
- VUE3 之 click 事件
1. 概述 老话说的好:努力帮别人解决难题,你的难题也就不难解决了. 言归正传,今天我们来聊聊 VUE3 的 click 事件的相关知识. 2. click 事件 2.1 实现数字递减 <bod ...
- gPRC基本介绍
1.说明 gRPC英文全名为Google Remote Procedure Call, 即Google远程过程调用, 是Google发布的一个高性能.通用的开源RPC框架, 2.gRPC定义 gRPC ...
- Ranger开源流水线docker化实践案例
1.背景 开发部门决定在Apache Ranger开源社区贡献代码,目标是个人国内排名Top1,世界排名Top2,并且在已经成为Ranger项目的Committer情况下,争取成为Ranger项目的P ...
- vsconde launch.json配置 调试本地文件
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing ...
- 大厂必问的Java集合面试题
本文目录: 常见的集合有哪些? List .Set和Map 的区别 ArrayList 了解吗? ArrayList 的扩容机制? 怎么在遍历 ArrayList 时移除一个元素? Arraylist ...
- cnetos7安装字体
1 先下载字体 链接:https://pan.baidu.com/s/1FEV7K8c8S6o3gBukkSGp4w 提取码:font 2 安装字体脚本 vi font.sh #!/bin/bash ...
- [ flask ] flask-restful 实现嵌套的有关系的输出字段
问题描述: 1. 先说明数据关系:有用户,和菜谱.一个用户可以拥有多个菜谱:一对多的关系 2. resources/users.py 的输出字段: user_fields = { 'id':fiel ...