原生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 相关文章推荐
禁止ajax缓存获取程序最新数据的方法
Nov 19 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
Nov 22 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
实现无刷新联动例子汇总
May 20 Javascript
Windows系统下Node.js的简单入门教程
Jun 23 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
Dec 29 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
js实现网页定位导航功能
Mar 07 Javascript
JavaScript贪吃蛇小组件实例代码
Aug 20 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
Apr 01 Javascript
Vue开发Html5微信公众号的步骤
Apr 11 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 getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
JavaScript 字符编码规则
2009/05/04 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
JQuery 常用方法和事件详细介绍
2013/04/18 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
JS实现手写parseInt的方法示例
2017/09/24 Javascript
JavaScript中立即执行函数实例详解
2017/11/04 Javascript
详解js类型判断
2018/05/22 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
[03:54]DOTA2英雄梦之声_第06期_昆卡
2014/06/23 DOTA
[43:53]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.22
2019/09/05 DOTA
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
Python loguru日志库之高效输出控制台日志和日志记录
2020/03/07 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
Stokke美国官方网店:高级儿童家具、推车、汽车座椅和配件
2020/06/06 全球购物
应届生.NET方向面试题
2015/05/23 面试题
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
J2EE中常用的名词进行解释
2015/11/09 面试题
酒店销售经理岗位职责
2014/01/31 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
区域销售经理岗位职责
2015/04/02 职场文书
2015年远程教育工作总结
2015/05/20 职场文书
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
MySQL分区表实现按月份归类
2021/11/01 MySQL
win10更新失败无限重启解决方法
2022/04/19 数码科技