原生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 相关文章推荐
用Javascript实现UTF8编码转换成gb2312编码
Dec 22 Javascript
Highslide.js是一款基于js实现的网页中图片展示插件
Mar 30 Javascript
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
jquery.bgiframe.js在IE9下提示INVALID_CHARACTER_ERR错误
Jan 11 Javascript
js实现的点击数量加一可操作数据库
May 09 Javascript
学习JavaScript设计模式(单例模式)
Nov 26 Javascript
Bootstrap3制作图片轮播效果
May 12 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
JS小数转换为整数的方法分析
Jan 07 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
js实现弹出框的拖拽效果实例代码详解
Apr 16 Javascript
vue或react项目生产环境去掉console.log的操作
Sep 02 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
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
第十五节--Zend引擎的发展
2006/11/16 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
php需登录的文件上传管理系统
2020/03/21 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
asp 的 分词实现代码
2007/05/24 Javascript
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
jQuery实现类似滑动门切换效果的层切换
2013/09/23 Javascript
js实现可拖动DIV的方法
2013/12/17 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
2015/12/02 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
NodeJS创建最简单的HTTP服务器
2017/05/15 NodeJs
vue+iview写个弹框的示例代码
2017/12/05 Javascript
mpvue 单文件页面配置详解
2018/12/02 Javascript
JavaScript多种页面刷新方法小结
2019/04/04 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python3抓取中文网页的方法
2015/07/28 Python
Python中functools模块函数解析
2017/03/12 Python
Python入门必须知道的11个知识点
2018/03/21 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
Python subprocess模块功能与常见用法实例详解
2018/06/28 Python
使用celery执行Django串行异步任务的方法步骤
2019/06/06 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
python 发送get请求接口详解
2020/11/17 Python
Cecil Mode法国在线商店:女性时尚
2021/01/08 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
高中生期末评语大全
2014/01/28 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
爱护公物演讲稿
2014/09/09 职场文书
银行自荐信范文
2015/03/25 职场文书
2015中秋祝酒词
2015/08/12 职场文书