原生js代码能实现call和bind吗

 更新时间:2019年07月31日 15:05:59   作者:前端前端前端  
这篇文章主要介绍了原生js代码能实现call和bind吗,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

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});

以上代码的执行结果是

如你所见,这样实现的call并不是我们所期望的那样。

对比于函数自带的call:

show.call({haha:122})

其结果为

分析其原因不难发现,根据函数mycall,执行context.fn(...args)之前修改了上下文context,所以执行fn时所使用的上下文是修改后的上下文,导致与预期结果相差甚远。

核心

而且,往更深的层次去思考,call绝不是这样(或类似这样)实现的,call是底层语言为浏览器封装好的函数,是绝对不能也没必要用js强行模仿的。

综上,js模仿call和bind绝对没有get到底层原理,这样的模仿只能用于娱乐而已,没有实际价值。bind和call类似,这里就不赘述了。

相关文章

  • javascript实现拖拽并替换网页块元素

    javascript实现拖拽并替换网页块元素

    实现类似于学生换座位的效果,将网页内的两个元素通过拖拽的方式互换。
    2009-11-11
  • js中apply()和call()的区别与用法实例分析

    js中apply()和call()的区别与用法实例分析

    这篇文章主要介绍了js中apply()和call()的区别与用法,结合实例形式分析了apply()和call()的功能、区别、使用方法及相关操作注意事项,需要的朋友可以参考下
    2018-08-08
  • 详解如何在JavaScript中无缝地集成和使用Python代码

    详解如何在JavaScript中无缝地集成和使用Python代码

    这篇文章主要目标是帮助诸位理解如何在JavaScript中无缝地集成和使用Python代码,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2023-06-06
  • JS实现简单的浮动碰撞效果示例

    JS实现简单的浮动碰撞效果示例

    这篇文章主要介绍了JS实现简单的浮动碰撞效果,类似于广告悬浮图片在屏幕上来回碰撞的效果,涉及javascript结合时间动态操作页面元素属性的相关技巧,需要的朋友可以参考下
    2017-12-12
  • 一文详解JS中的事件循环机制

    一文详解JS中的事件循环机制

    JavaScript是单线程的编程语言,只能同一时间内做一件事。但是在遇到异步事件的时候,js线程并没有阻塞,还会继续执行。这是因为JS有事件循环机制,本文就为大家详细讲解一下这一机制,需要的可以参考一下
    2022-03-03
  • JS判断iframe是否加载完成的方法

    JS判断iframe是否加载完成的方法

    这篇文章主要介绍了JS判断iframe是否加载完成的方法,提供了2种实现方法,可分别针对IE内核与非IE内核浏览器进行判断与操作,涉及javascript事件操作与判定技巧,需要的朋友可以参考下
    2016-08-08
  • js出生日期 年月日级联菜单示例代码

    js出生日期 年月日级联菜单示例代码

    本篇文章主要介绍了js出生日期 年月日级联菜单的示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • css+js制作不定高度展开收起动画详解

    css+js制作不定高度展开收起动画详解

    这篇文章主要介绍了css+js制作不定高度展开收起动画详解的相关资料,需要的朋友可以参考下
    2023-06-06
  • js进阶语法之变量提升、函数提升以及参数的命名冲突问题解决

    js进阶语法之变量提升、函数提升以及参数的命名冲突问题解决

    JavaScript代码在执行前会经历一个预处理阶段,这个阶段主要涉及变量提升和函数提升,下面这篇文章主要介绍了js进阶语法之变量提升、函数提升以及参数的命名冲突问题解决的相关资料,需要的朋友可以参考下
    2024-09-09
  • 自制简易打赏功能的实例

    自制简易打赏功能的实例

    下面小编就为大家带来一篇自制简易打赏功能的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论