分析一下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的更多相关文章

  1. 不使用Tomcat,手写简单的web服务

    背景: 公司使用的YDB提供了http的查询数据库服务,直接通过url传入sql语句查询数据-_-||.ydb的使用参照:https://www.cnblogs.com/hd-zg/p/7115112 ...

  2. 手写call、apply、bind

    区别&联系 三者都是指定函数执行时的上下文,第一个参数都是上下文: call从第二个参数开始,后续所有的参数传递给函数执行: apply第二个参数是一个数组,传递给函数执行: bind返回一个 ...

  3. 手写简单的jq雪花飘落

    闲来无事,准备写个雪花飘落的效果,没有写太牛逼的特效,极大的简化了代码量,这样容易读取代码,用起来也很简单,对于那些小白简直是福利啊,简单易读易学.先直接上代码吧,然后再一一讲解,直接复制粘贴就可以拿 ...

  4. 利用Java手写简单的httpserver

    前言: 在看完尚学堂JAVA300中讲解如何实现一个最简单的httpserver部分的视频之后, 一.前置知识 1.HTTP协议 当前互联网网页访问主要采用了B/S的模式,既一个浏览器,一个服务器,浏 ...

  5. 手写简单PE

    环境工具:Windows 10 010Editor 目标程序功能: 调用MessageBoxA弹出消息框. 1.构造DOS头 typedef struct _IMAGE_DOS_HEADER { // ...

  6. 通过反射来手写简单的ORM SQlserver

    不说废话,直接上干货,如发现问题,欢迎大家指出,谢谢! //------------------------------------MySQlServerORM [简单 CURD] using Sys ...

  7. 手写简单的promise

    function Promise(fn) { var that = this; this.status = "pedding"; this.value = undefined; / ...

  8. node搭环境(四)--webpack启服务运行VUE模块文件(手写简单脚手架)

    webpack启服务步骤: 1.新建空文件夹webpack-vue.在空文件夹右键点击- GIt Bath here--输入cnpm init--按程序走完会生成package.json文件 2.打开 ...

  9. 手写简单的php生成Html网页

    这个是基本功,以前用到laravel及thinkphp时,这一步,都被设置好了吧. 这里只依靠纯的php环境,而没有任何框架, 而框架,只是将这一切规范化,加快代码效率及减小沟通成本,维护升级也方便, ...

随机推荐

  1. IDEA 延长使用

    压缩包下载地址:https://i.cnblogs.com/files 1.先以试用的形式进入idea,然后help -> Edit Custom VM Options 2.插入 :-javaa ...

  2. [数学]高数部分-Part III 中值定理与一元微分学应用

    Part III 中值定理与一元微分学应用 回到总目录 Part III 中值定理与一元微分学应用 1. 中值定理 费马定理 罗尔定理 拉格朗日中值定理 柯西中值定理 柯西.拉格朗日.罗尔三者间的关系 ...

  3. 【C#】C#中使用GDAL3(三):Windows下编译插件驱动

    转载请注明原文地址:https://www.cnblogs.com/litou/p/15720236.html 本文为<C#中使用GDAL3>的第三篇,总目录地址:https://www. ...

  4. VUE3 之 click 事件

    1. 概述 老话说的好:努力帮别人解决难题,你的难题也就不难解决了. 言归正传,今天我们来聊聊 VUE3 的 click 事件的相关知识. 2. click 事件 2.1 实现数字递减 <bod ...

  5. gPRC基本介绍

    1.说明 gRPC英文全名为Google Remote Procedure Call, 即Google远程过程调用, 是Google发布的一个高性能.通用的开源RPC框架, 2.gRPC定义 gRPC ...

  6. Ranger开源流水线docker化实践案例

    1.背景 开发部门决定在Apache Ranger开源社区贡献代码,目标是个人国内排名Top1,世界排名Top2,并且在已经成为Ranger项目的Committer情况下,争取成为Ranger项目的P ...

  7. vsconde launch.json配置 调试本地文件

    { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing ...

  8. 大厂必问的Java集合面试题

    本文目录: 常见的集合有哪些? List .Set和Map 的区别 ArrayList 了解吗? ArrayList 的扩容机制? 怎么在遍历 ArrayList 时移除一个元素? Arraylist ...

  9. cnetos7安装字体

    1 先下载字体 链接:https://pan.baidu.com/s/1FEV7K8c8S6o3gBukkSGp4w 提取码:font 2 安装字体脚本 vi font.sh #!/bin/bash ...

  10. [ flask ] flask-restful 实现嵌套的有关系的输出字段

    问题描述: 1. 先说明数据关系:有用户,和菜谱.一个用户可以拥有多个菜谱:一对多的关系 2.  resources/users.py 的输出字段: user_fields = { 'id':fiel ...