原生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时间自动刷新实现原理与步骤
Jan 06 Javascript
JS中获取数据库中的值的方法
Jul 14 Javascript
JQuery的ready函数与JS的onload的区别详解
Nov 21 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
深入理解angularjs过滤器
May 25 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
Vue.use源码学习小结
Jun 20 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 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
php zend解密软件绿色版测试可用
2008/04/14 PHP
PHP人民币金额数字转中文大写的函数代码
2013/02/27 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
php创建session的方法实例详解
2015/01/27 PHP
php eval函数一句话木马代码
2015/05/21 PHP
7个鲜为人知却非常实用的PHP函数
2015/07/01 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
JavaScript中数据类型转换总结
2016/12/25 Javascript
js判断手机号是否正确并返回的实现代码
2017/01/17 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
node跨域转发 express+http-proxy-middleware的使用
2018/05/31 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
Python获取当前时间的方法
2014/01/14 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
详解PANDAS 数据合并与重塑(join/merge篇)
2019/07/09 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
使用html5制作loading图的示例
2014/04/14 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
美国手工艺品市场的领导者:Annie’s
2019/04/04 全球购物
技术经济专业求职信
2014/09/03 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
终止或解除劳动合同及劳动关系的证明书
2014/10/06 职场文书
护士自我推荐信范文
2015/03/24 职场文书
退休欢送会主持词
2015/07/01 职场文书
电工生产实习心得体会
2016/01/22 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python
Java GUI编程菜单组件实例详解
2022/04/07 Java/Android