原生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 回车换行处理的办法及replace方法应用
Jan 24 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
微信小程序 下拉列表的实现实例代码
Mar 08 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
Aug 16 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
原生js实现Flappy Bird小游戏
Dec 24 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
Feb 20 Javascript
微信小程序生成分享海报方法(附带二维码生成)
Mar 29 Javascript
深入浅析vue-cli@3.0 使用及配置说明
May 08 Javascript
微信小程序下拉框搜索功能的实现方法
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
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
php实现HTML实体编号与非ASCII字符串相互转换类实例
2016/11/02 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
中止javascript执行的方法
2014/02/14 Javascript
Egret引擎开发指南之视觉编程
2014/09/03 Javascript
详解Document.Cookie
2015/12/25 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
基于javascript实现全屏漂浮广告
2016/03/31 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
jQuery Easyui datagrid/treegrid 清空数据
2016/07/09 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
angularjs+bootstrap实现自定义分页的实例代码
2017/06/19 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
基于Vue的商品主图放大镜方案详解
2019/09/19 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
[59:00]OG vs TNC 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05
2020/11/06 DOTA
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
Python 调用Java实例详解
2017/06/02 Python
Python编程argparse入门浅析
2018/02/07 Python
Python实现将Excel转换成为image的方法
2018/10/23 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
CSS3中的常用选择器使用示例整理
2016/06/13 HTML / CSS
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
新闻专业应届生求职信
2013/10/31 职场文书
受欢迎的大学生自我评价
2013/12/05 职场文书
初三政治教学反思
2014/01/30 职场文书
质量承诺书范文
2014/03/27 职场文书
房屋租赁授权委托书范本
2014/09/20 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
家长会欢迎词
2015/01/23 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
工作收入证明范本
2015/06/12 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书