原生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 相关文章推荐
jquery中的$(document).ready()与window.onload的区别
Nov 18 Javascript
JavaScript 判断日期格式是否正确的实现代码
Jul 04 Javascript
jQuery实现新消息闪烁标题提示的方法
Mar 11 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
Jun 12 Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 Javascript
详解Vuex中mapState的具体用法
Sep 28 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
React 组件转 Vue 组件的命令写法
Feb 28 Javascript
巧妙运用v-model实现父子组件传值的方法示例
Apr 07 Javascript
Vuex的实战使用详解
Oct 31 Javascript
JavaScript canvas动画实现时钟效果
Feb 10 Javascript
前端深入理解Typescript泛型概念
Mar 09 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
第十二节 类的自动加载 [12]
2006/10/09 PHP
PHP循环语句笔记(foreach,list)
2011/11/29 PHP
php-fpm配置详解
2014/02/12 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
PHP错误处理函数
2016/04/03 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
JavaScript 数组运用实现代码
2010/04/13 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
JavaScript实现表格快速变色效果代码
2015/08/19 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
举例讲解Python中is和id的用法
2015/04/03 Python
pygame学习笔记(3):运动速率、时间、事件、文字
2015/04/15 Python
python杀死一个线程的方法
2015/09/06 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
彻底理解Python list切片原理
2017/10/27 Python
python3写的简单本地文件上传服务器实例
2018/06/04 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
Django自定义YamlField实现过程解析
2020/11/11 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
localstorage和sessionstorage使用记录(推荐)
2017/05/23 HTML / CSS
Photobook澳大利亚:制作相片书,婚礼卡,旅行相簿
2017/01/12 全球购物
将时尚融入珠宝:Adornmonde
2019/10/17 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
信访工作者先进事迹
2014/01/17 职场文书
违反交通法规检讨书
2014/09/10 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android