手写apply、call、bind(大量代码)
最近又进行了基础知识的重新学习,然后进行了call,apply,bind的this指向、参数类型以及代码的手写,然后整理了下。
this指向
// this指向
const phper = {name: 'php',getName: function(){console.log(this.name+'is the best language in the world');} }; const webfansDoLi = { name: 'javascript', }; phper.getName(); phper.getName.call(webfansDoLi); phper.getName.apply(webfansDoLi) phper.getName.bind(webfansDoLi)() //打印结果:javascript is the best language in the world //打印结果:javascript is the best language in the world //打印结果:javascript is the best language in the world
结论:call、apply、bind的this都是指向他们的第一个参数。
参数类型
// 参数注入(异同比较)
const developer = {getSkills: function(...args){console.log(...args);},
}; const webfansDoLi = { getSkills: ['html'], } developer.getSkills.call(webfansDoLi,'es6','计算机基础'); developer.getSkills.apply(webfansDoLi,['hBuilder','微信小程序']); developer.getSkills.bind(webfansDoLi,'vue','react')() //打印结果:es6 计算机基础 //打印结果:hBuilder 微信小程序 //打印结果:vue react
结论:call和bind的第二个参数是开始都是实参参与,而apply则是第二个参数是参数数组(速记参数差异:apply参数是array,都是a开头)。
手写绑定
所有的绑定都是绑定在Function函数的prototype属性上的。
手写call
// 简易模拟实现--call
Function.prototype.apply = function(context){console.log(1)//重定义thisconst DoLi = context || window;//模拟档期那的对象的this指向 DoLi.func = this; //获取参数 const args = Array.from(arguments).slice(1); //绑定参数 const res = arguments.length>1?DoLi.func(...args):DoLi.func(); //清除定义的this delete DoLi.func; //返回结果 return res; } let a = { name: 'I am a', sayName: function(out){ console.log(this.name+(out?out:"")); } }; let b = { name: 'I am b' }; a.sayName.apply(b,['我是额外参数','参数2']) //输出结果:1 //输出结果:I am b我是额外参数,参数2
难点:this指向和参数列表截取需要注意
手写apply
// 简易模拟实现--apply
Function.prototype.apply = function(context){console.log(1)//重定义thisconst DoLi = context || window;//模拟档期那的对象的this指向 DoLi.func = this; //获取参数 const args = Array.from(arguments).slice(1,); //绑定参数 const res = arguments.length>1?DoLi.func(args):DoLi.func(); //清除定义的this delete DoLi.func; //返回结果 return res; } let a = { name: 'I am a', sayName: function(out){ console.log(this.name+(out?out:"")); } }; let b = { name: 'I am b' }; a.sayName.apply(b,['我是额外参数','参数2']) //输出结果:1 //输出结果:I am b我是额外参数,参数2
难点:能写出上面的call的话,这个只需要注意下第二个参数是数组就可以
手写bind
// 简易模拟实现--bind
Function.prototype.bind = function(context){console.log(1)//深拷贝,防止污染const DoLi = JSON.parse(JSON.stringify(context)) || window;//模拟档期那的对象的this指向 DoLi.func = this; //获取参数 const args = Array.from(arguments).slice(1,); // 返回一个绑定的函数,等待调用 return function() { //返回结果 return args.length>0?DoLi.func(...args):DoLi.func(); } } let a = { name: 'I am a', sayName: function(out){ console.log(this.name+(out?out:"")); } }; let b = { name: 'I am b' }; a.sayName.bind(b,['我是额外参数','参数2'])() //输出结果:1 //输出结果:I am b我是额外参数,参数2
难点:手写bind函数需要返回一个绑定函数,而不是一个结果。
好的,完成。
月如钩,无言独上西楼 ——煜李
本文使用 mdnice 排版
手写apply、call、bind(大量代码)相关推荐
- html 手写字效果,canvas画布实现手写签名效果的示例代码
最近项目中涉及到移动端手写签名的功能需求,将实现代码记录于此,供小伙伴们参考指摘哦~ HTML代码: 手写区 清除 确定 CSS样式: .mSign_signMark_box{padding: 15p ...
- 吴恩达机器学习 神经网络 作业1(用已经求好的权重进行手写数字分类) Python实现 代码详细解释
整个项目的github:https://github.com/RobinLuoNanjing/MachineLearning_Ng_Python 里面可以下载进行代码实现的数据集 题目介绍: In t ...
- 吴恩达机器学习 逻辑回归 作业3(手写数字分类) Python实现 代码详细解释
整个项目的github:https://github.com/RobinLuoNanjing/MachineLearning_Ng_Python 里面可以下载进行代码实现的数据集 题目介绍: In t ...
- Python不同方法实现手写数字识别结果和代码
一.背景 手写数字识别是符号识别的一个分支,虽然只是识别简单的10个数字,但却有着非常大的实用价值.在我们的日常生活中,每天都要进行大量的文档处理工作,比如税单,银行支票,汇款单,信用卡账单的处理,以 ...
- BP神经网络识别手写数字项目解析及代码
这两天在学习人工神经网络,用传统神经网络结构做了一个识别手写数字的小项目作为练手.点滴收获与思考,想跟大家分享一下,欢迎指教,共同进步. 平常说的BP神经网络指传统的人工神经网络,相比于卷积神经网络( ...
- 手写数字识别神经网络完整代码,带详细注释。
神经网络使用的两个数据集:一个是训练集(60000条),一个是测试测试集(10000条),下载后直接放在程序目录下就可以了 mnist手写字体训练集6000条,mnist_train.csv mnis ...
- ROS2手写接收IMU数据(Imu)代码并发布
目录 前言 接收IMU数据 IMU的串口连接 问题 python接收串口数据 python解析数据 ROS2发布IMU数据 可视化IMU数据 效果 前言 在前面测试完了单独用激光雷达建图之后,一直想把 ...
- 【手写数字识别】基于Lenet网络实现手写数字识别附matlab代码
1 内容介绍 当今社会,人工智能得到快速发展,而模式识 别作为人工智能的一个重要应用领域也得到了飞 速发展,它利用计算机通过计算的方法根据样本的 特征对样本进行分类,其中的光学字符识别技术受 到广大研 ...
- (一)Lenet5 手写数字识别原理及代码解析
模型简单,本地可跑 论文参考:Gradient-based learning applied to document recognition MNIST手写数据集 50000个训练数据 10000个测 ...
最新文章
- xp snapshot.
- 大家猜猜看除了围棋,人工智能下一个颠覆的领域是什么?
- 进阶学习(3.4) Builder Pattern 建造者模式
- 读再多书都没觉得自己变强?试试我这“5年陈”的方法
- 通过对象属性去重_Redis常见对象类型的底层数据结构
- linux内核网络raw_cpu_add,深入理解Linux网络技术内幕-设备注册和初始化(四)
- zabbix如何实现微信报警
- 科研绘图神器之Plotluck(如何节省时间)
- bootstrap-table分页插件使用
- loading加载的gif图
- 【题目记录】——2021 年百度之星·程序设计大赛 - 初赛二
- 桥接命令brctl的用法
- iframe嵌入微信公众号页面(有图片)
- Failed to parse time specification
- 【AxureRP9】V1.0网易课堂课程
- 六级词汇天天练(12.11)
- 0.2度背后的美国抉择:压不住新能源
- 华为和小米共推中国制造,增强国产手机产业链的自主研发实力
- 破解百度网盘下载速度方法
- iOS开发常用之摄像照相视频音频处理