原生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 相关文章推荐
jquery1.9 下检测浏览器类型和版本的方法
Dec 26 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
js Calender控件使用详解
Jan 05 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
jQuery常用知识点总结以及平时封装常用函数
Feb 23 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
基于Fixed定位的框选功能的实现代码
May 13 Javascript
策略模式实现 Vue 动态表单验证的方法
Sep 16 Javascript
JavaScript中的Proxy对象
Nov 27 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
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
PHP生成静态页
2006/11/25 PHP
php获取mysql版本的几种方法小结
2008/03/25 PHP
使用PHP获取网络文件的实现代码
2010/01/01 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
如何在PHP中读写文件
2020/09/07 PHP
JavaScript 继承详解 第一篇
2009/08/30 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
jquery实现漫天雪花飞舞的圣诞祝福雪花效果代码分享
2015/08/20 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
基于JavaScript实现抽奖系统
2018/01/16 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
jQuery实现简单聊天室
2020/02/08 jQuery
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
Python 调用VC++的动态链接库(DLL)
2008/09/06 Python
python使用在线API查询IP对应的地理位置信息实例
2014/06/01 Python
python入门教程之识别验证码
2017/03/04 Python
Python cookbook(数据结构与算法)让字典保持有序的方法
2018/02/18 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
face++与python实现人脸识别签到(考勤)功能
2019/08/28 Python
python多进程并发demo实例解析
2019/12/13 Python
pandas 数据类型转换的实现
2020/12/29 Python
pandas按条件筛选数据的实现
2021/02/20 Python
用纯css3和html制作泡沫对话框实现代码
2013/03/21 HTML / CSS
HTML5计时器小例子
2013/10/15 HTML / CSS
Chicco婴儿用品美国官网:汽车座椅、婴儿推车、高脚椅等
2018/11/05 全球购物
英国最受欢迎的平价女士时装零售商:Roman Originals
2019/11/02 全球购物
三查三看党性分析材料
2014/02/18 职场文书
本科毕业生求职信
2014/06/15 职场文书