50行javaScript代码实现简单版的 call , apply ,bind 【中级前端面试基础必备】
在实现自己的
call
,apply
,bind
前,需要复习一下this
.
###所谓的this
其实可以理解成一根指针:
其实 this 的指向,始终坚持一个原理:this
永远指向最后调用它的那个对象,这就是精髓。最关键所在
this
的四种指向:
当this
所在的函数被普通调用时,指向window
,如果当前是严格模式,则指向undefined
function test() {console.log(this);
};test();
指向window 输出下面的代码:
// Window {speechSynthesis: SpeechSynthesis, caches: CacheStorage, localStorage: Storage, sessionStorage: Storage, webkitStorageInfo: DeprecatedStorageInfo…}
复制代码
严格模式
'use strict';
function test() {console.log(this);
};
test();
// undefined复制代码
当this
所在当函数被以obj.fn()
形式调用时,指向obj
var obj = {name: 'segmentFault',foo: function() {console.log(this.name);}
}
obj.foo();
// 'segmentFault'复制代码
还可以这么做
function test() {console.log(this.name);
}
var obj = {name: 'qiutc',foo: test
}
obj.foo();
// 'qiutc'
复制代码
当call,apply
加入后,this
的指向被改变了
function a() {console.log(this.name);}const b = {name: "segmentFault"}a.call(b,1,2,3)//输出 segmentFault和 1,2,3function a(a,b,c) {console.log(this.name);console.log(a,b,c)}a.apply(b,[1,2,3])//输出segmentFault和1,2,3复制代码
遇到bind后 :
function a() {console.log(this.name);}const b = {name: "segmentFault"}a.bind(b, 1, 2, 3)复制代码
此时控制台并没有代码输出,因为bind会重新生成并且返回一个函数,这个函数的this
指向第一个参数
function a() {console.log(this.name);}const b = {name: "segmentFault"}const c = a.bind(b, 1, 2, 3)c()//此时输出segmentFault
复制代码
正式开始自己实现call
:
在函数原型上定义自己的myCall
方法:
Function.prototype.myCall = function (context, ...arg) {const fn = Symbol('临时属性')context[fn] = thiscontext[fn](...arg)delete context[fn]}复制代码
四行代码实现了简单的call
,思路如下:
- 通过对象属性的方式调用函数,这个函数里面的
this
指向这个对象 - 每次调用新增一个
symbol
属性,调用完毕删除 - 这个
symbol
属性就是调用mycall
方法的函数 - 函数形参中使用
...arg
是将多个形参都塞到一个数组里,在函数内部使用arg这个变量时,就是包含所有形参的数组 - 在调用
context[fn](...arg)
时候,...arg
是为了展开数组,依次传入参数调用函数
为了简化,今天都不做类型判断和错误边际处理,只把原理讲清楚。
自己实现apply
在函数原型上定义自己的myApply
方法:
//实现自己的myApplyFunction.prototype.myApply = function (context, arg) {const fn = Symbol('临时属性')context[fn] = thiscontext[fn](...arg)delete context[fn]}const obj2 = {a: 1}test.myApply(obj2, [2, 3, 4])复制代码
同理,只是apply
传递的第二个参数是数组,这里我们只需要在调用时,将参数用...
把数组展开即可
自己实现bind
:
bind
跟apply,call
的本质区别,bind
不会改变原函数的this
指向,只会返回一个新的函数(我们想要的那个this
指向),并且不会调用。但是apply
和bind
会改变原函数的this
指向并且直接调用
bind
在编写框架源码,例如koa
等中用得特别多:
//实现自己的myBindFunction.prototype.myBind = function (context, ...firstarg) {const that = thisconst bindFn = function (...secoundarg) {return that.myCall(context, ...firstarg, ...secoundarg)}bindFn.prototype = Object.create(that.prototype)return bindFn}var fnbind = test.myBind(obj, 2)fnbind(3)复制代码
同理 自己定义好原型上的myBind
方法 this
劫持 保留最初的调用mybind
方法的那个对象 返回一个新的函数 这个新的函数内部this
指向已经确定,使用的是我们的mycall
方法
学习需要循序渐进,建议根据本文顺序去封装一遍,是比较轻松的,当然
bind
还需要判断是否是new
调用.
完整版本bind
Function.prototype.myBind = function (objThis, ...params) {const thisFn = this; // 存储源函数以及上方的params(函数参数)// 对返回的函数 secondParams 二次传参let fToBind = function (...secondParams) {console.log('secondParams',secondParams,...secondParams)const isNew = this instanceof fToBind // this是否是fToBind的实例 也就是返回的fToBind是否通过new调用const context = isNew ? this : Object(objThis) // new调用就绑定到this上,否则就绑定到传入的objThis上return thisFn.call(context, ...params, ...secondParams); // 用call调用源函数绑定this的指向并传递参数,返回执行结果};fToBind.prototype = Object.create(thisFn.prototype); // 复制源函数的prototype给fToBindreturn fToBind; // 返回拷贝的函数
};复制代码
觉得写得不错可以给个
star
,欢迎加入我们的前端交流群~:
转载于:https://juejin.im/post/5d5109796fb9a06adb7fd50f
50行javaScript代码实现简单版的 call , apply ,bind 【中级前端面试基础必备】相关推荐
- javascript 代码_如何使您JavaScript代码保持简单并提高其可读性
javascript 代码 by Leonardo Lima 莱昂纳多·利马(Leonardo Lima) 如何使您JavaScript代码保持简单并提高其可读性 (How to keep your ...
- python写一个游戏多少代码-使用50行Python代码从零开始实现一个AI平衡小游戏
集智导读: 本文会为大家展示机器学习专家 Mike Shi 如何用 50 行 Python 代码创建一个 AI,使用增强学习技术,玩耍一个保持杆子平衡的小游戏.所用环境为标准的 OpenAI Gym, ...
- 50行python游戏代码_使用50行Python代码从零开始实现一个AI平衡小游戏
使用50行Python代码从零开始实现一个AI平衡小游戏 发布时间:2020-10-23 09:26:14 来源:脚本之家 阅读:74 集智导读: 本文会为大家展示机器学习专家 Mike Shi 如何 ...
- 愿你是那天上星,永远闪耀照亮夜空——50行Python代码绘制满天星
今天用50行Python代码绘制了星空满天的动图.解释下为什么要做这样一件事,因为今天是空军成立72周年纪念日,希望通过这样的方式去表达出每个年轻人都向往像星空中的一颗星星,散发着自己的光芒照亮整个夜 ...
- python50行小游戏_使用50行Python代码从零开始实现一个AI平衡小游戏
集智导读: 本文会为大家展示机器学习专家 Mike Shi 如何用 50 行 Python 代码创建一个 AI,使用增强学习技术,玩耍一个保持杆子平衡的小游戏.所用环境为标准的 OpenAI Gym, ...
- [原创]22行JavaScript代码实现QQ群成员提取器,绿色、环保、无病毒!
原来想给QQ群内的成员发邮件,找了一个现成的软件,没想到居然有QQ盗号病毒,很不爽.就决定自己动手,丰衣足食. 首先,我想到如果能够直接从QQ群成员列表中把所有成员拷贝出来,岂不是很方便.不过QQ明显 ...
- 50行Python代码玩转微信小游戏颜色王者
50行Python代码玩转微信小游戏"颜色王者" 游戏模式 在微信小程序里搜索"颜色王者",即可找到该游戏. 游戏的目标比拼色彩敏感度.点击图片中不一样的色块即 ...
- 100行JavaScript代码实现JavaScript
先看效果: 100行JavaScript代码实现经典游戏俄罗斯方块 新建一个html文件,复制如下代码,用浏览器打开即可: <!doctype html> <html> < ...
- 只要200行JavaScript代码,就能把特斯拉汽车带到您身边
Jerry的前一篇文章 如何使用JavaScript开发AR(增强现实)移动应用 (一) 介绍了用React-Native + ViroReact开发增强现实应用的一些预备知识. 本文咱们开始进入增强 ...
最新文章
- 技术图文:如何改进算法的运行效率?
- R语言KNN模型数据分类实战
- jquery 同一个页面处理多个ajax请求
- MATLAB表白利器
- 聊聊高并发系统之队列术
- 在项目中缓存是如何使用的?为什么要用缓存?缓存使用不当会造成什么后果?
- 如何基于ERP的sales organization 创建CRM对应的数据
- java 内存模型6_深入理解Java内存模型(六)——final
- 视图编辑php,PhpStorm视图模式
- 华为麒麟1020处理器曝光:性能提升50%,5nm制程!Mate 40有望成为首发机型
- 蓝桥杯 ALGO-159 算法训练 P0103
- Pytorch——计算机视觉工具包:torchvision
- 321影音 多功能播放器
- 语音信号处理的一些基础知识
- python金融分析小知识(7)——股票收盘价曲线可视化
- 阿里云物联网平台数据解析(python)
- 「大数据的关键思考系列」15:阿里巴巴的大数据实践(1)
- 【北大青鸟天府校区的Java专业怎么样?】
- IDEA解决打开properties乱码问题
- 黄山自驾游攻略——不仅仅是攻略哦
热门文章
- android 融云定义主题,融云开发者文档
- 计算机软考可以直接高级吗,计算机软考没有中级能考高级吗
- ubuntu下docker简单安装mysql
- appium的三种等待方式 (还没实践过,记录在此)
- 构建之法首周阅读体会
- Hibernate学习笔记--第二篇 关联关系映射 many –to –one
- opensips mysql 版本_Opensips-1.11版本安装过程
- windows常见端口和协议--SMB(445)-NETBIOS(137-138-139)
- (8)FPGA实现1s闪灯代码(学无止境)
- (36)虚拟时钟(中心对齐约束)