原生js代码能实现call和bind吗


Posted in Javascript onJuly 31, 2019

js手动实现call和bind都是谎言

网上有很多关于说自己实现call和bind的原理的文章,然而call和bind的原理真如他们所说的那样吗?今天就让我来推翻这些所谓的”原理“,揭开谎言下的真相。

首先看看网上对call的实现:

// 手写 call
Function.prototype.mycall = function (context) {
  context = context || window;
  context.fn = this;
  const args = [...arguments].slice(1);
  const result = context.fn(...args);
  // 执行fn时上下文context已被修改,不是我们所期望的call 
  delete context.fn;
  return result;
}
function show() {
  console.log(this);
}
show.mycall({haha:122});

以上代码的执行结果是

原生js代码能实现call和bind吗

如你所见,这样实现的call并不是我们所期望的那样。

对比于函数自带的call:

show.call({haha:122})

其结果为

原生js代码能实现call和bind吗

分析其原因不难发现,根据函数mycall,执行context.fn(...args)之前修改了上下文context,所以执行fn时所使用的上下文是修改后的上下文,导致与预期结果相差甚远。

核心

而且,往更深的层次去思考,call绝不是这样(或类似这样)实现的,call是底层语言为浏览器封装好的函数,是绝对不能也没必要用js强行模仿的。

综上,js模仿call和bind绝对没有get到底层原理,这样的模仿只能用于娱乐而已,没有实际价值。bind和call类似,这里就不赘述了。

Javascript 相关文章推荐
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
JS对文本框值的判断示例
Mar 10 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
Jan 22 Javascript
对称加密与非对称加密优缺点详解
Feb 06 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
在Vue中使用highCharts绘制3d饼图的方法
Feb 08 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
微信小程序实现折线图的示例代码
Jun 07 Javascript
jquery实现垂直无限轮播的方法分析
Jul 16 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
微信小程序下拉框搜索功能的实现方法
Jul 31 #Javascript
javascript中undefined的本质解析
Jul 31 #Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 #Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 #Javascript
js实现一个简易计算器
Mar 30 #Javascript
微信小程序iBeacon测距及稳定程序的实现解析
Jul 31 #Javascript
JS获取动态添加元素的方法详解
Jul 31 #Javascript
You might like
php htmlspecialchars加强版
2010/02/16 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
php模拟post行为代码总结(POST方式不是绝对安全)
2012/02/22 PHP
PHP转换IP地址到真实地址的方法详解
2013/06/09 PHP
基于jquery的可多选的下拉列表框
2012/07/20 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
jquery 实现返回顶部功能
2014/11/17 Javascript
一看就懂:jsonp详解
2015/06/01 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
微信小程序开发技巧汇总
2019/07/15 Javascript
ng-alain的sf如何自定义部件的流程
2020/06/12 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
Python使用cx_Freeze库生成msi格式安装文件的方法
2018/07/10 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
python协程之动态添加任务的方法
2019/02/19 Python
python数据归一化及三种方法详解
2019/08/06 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
python实现猜拳游戏项目
2020/11/30 Python
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
Servlet的实例是在生命周期什么时候创建的?配置servlet最重要的是什么?
2012/05/30 面试题
单位消防安全制度
2014/01/12 职场文书
最新茶叶店创业计划书
2014/01/14 职场文书
宗教学大学生职业生涯规划范文
2014/02/08 职场文书
大学生励志演讲稿
2014/04/25 职场文书
民事授权委托书范文
2014/08/02 职场文书
信访工作汇报材料
2014/10/27 职场文书
水电施工员岗位职责
2015/04/11 职场文书
会议新闻稿
2015/07/17 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
八年级语文教学反思
2016/03/03 职场文书
班干部竞选演讲稿(精选5篇)
2019/09/24 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python