原生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 maxlength使用说明
Sep 09 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
用console.table()调试javascript
Sep 04 Javascript
jquery实现九宫格大转盘抽奖
Nov 13 Javascript
jQuery AJAX timeout 超时问题详解
Jun 21 Javascript
Javascript中常用类型的格式化方法小结
Dec 26 Javascript
js模拟百度模糊搜索的实例
Aug 04 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
如何为vue的项目添加单元测试
Dec 19 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 Javascript
JS原生实现轮播图的几种方法
Mar 23 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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
php生成图片验证码
2015/06/09 PHP
PHP数组函数array_multisort()用法实例分析
2016/04/02 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
php使用环形链表解决约瑟夫问题完整示例
2018/08/07 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
jquery easyui使用心得
2014/07/07 Javascript
基于Jquery实现万圣节快乐特效
2015/11/01 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
js的三种继承方式详解
2017/01/21 Javascript
js遮罩效果制作弹出注册界面效果
2017/01/25 Javascript
Bootstrap表单控件学习使用
2017/03/07 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
vue2中引用及使用 better-scroll的方法详解
2018/11/15 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
windows下安装python paramiko模块的代码
2013/02/10 Python
Python yield 小结和实例
2014/04/25 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
mac安装scrapy并创建项目的实例讲解
2018/06/13 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
python 返回一个列表中第二大的数方法
2019/07/09 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
幼教简历自我评价
2014/01/28 职场文书
学校万圣节活动方案
2014/02/13 职场文书
彩色的非洲教学反思
2014/02/18 职场文书
2014年大学学生会工作总结
2014/12/02 职场文书
Python中的嵌套循环详情
2022/03/23 Python