原生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写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
javascript 打印页面代码
Mar 24 Javascript
测试你的JS的掌握程度的代码
Dec 09 Javascript
基于jquery的禁用右键、文本选择功能、复制按键的实现代码
Aug 27 Javascript
jQuery简单实现日历的方法
May 04 Javascript
原生javascript实现的一个简单动画效果
Mar 30 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
JS创建对象的写法示例
Nov 04 Javascript
package.json文件配置详解
Jun 15 Javascript
vue项目实现表单登录页保存账号和密码到cookie功能
Aug 31 Javascript
JS与SQL方式随机生成高强度密码示例
Dec 29 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 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
关于svn冲突的解决方法
2013/06/21 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
2014/04/24 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
删除重复数据的算法
2006/11/23 Javascript
JS array 数组详解
2009/03/22 Javascript
分享27款非常棒的jQuery 表单插件
2011/03/28 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
Javascript限制网页只能在微信内置浏览器中访问
2014/11/09 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
AngularJS指令与指令之间的交互功能示例
2016/12/14 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
详解Angular2响应式表单
2017/06/14 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
原生js实现公告滚动效果
2021/01/10 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
jQuery实现动态操作table行
2020/11/23 jQuery
[29:10]Ti4 冒泡赛第二天 NEWBEE vs Titan 3
2014/07/15 DOTA
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
台湾SHOPRO购物行家:亚洲首创影视.3C.家电.优质购物平台
2018/05/07 全球购物
类的核心特性有哪些
2014/01/01 面试题
运动会解说词50字
2014/01/18 职场文书
特色蛋糕店创业计划书
2014/01/28 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
乡镇群众路线专项整治方案
2014/11/03 职场文书
信用卡收入证明范本
2015/06/12 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
初中数学课堂教学反思
2016/02/17 职场文书
七年级思品教学反思
2016/02/20 职场文书
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
2021/05/30 Javascript
Java死锁的排查
2022/05/11 Java/Android